喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station 来喵宅苑，有可爱的男孩子

正文

作者:4原创教程

{"name":"4原创教程","sizeType":1,"icon":"","order":9999,"description":"","comp":""}

作者:妖蓝君

组织办活动，到了抽题答题的环节我想用这么一个转盘选题，总比拿箱子放纸条要高端大气多了找个差不多的自己改一下P点图片就OK了其实，有什么更好的方案么第一种是JS+HTML的： [attach]255010[/attach] [mw_shl_code=javascript,true]<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>flash抽奖转盘通用模板</title> <style type="text/css"> #flashContent { width:510px; height:510px; } #layer { background:#f5f5f5; border:#000 solid 1px; padding:20px; position:absolute; left:50%; top:50%; display:none; } </style> </head> <body> <div id="flashContent"></div> <script> flashHoler = "flashContent" //加载flash的容器ID autoPlay = "yes" //初始化时是否自动旋转，"yes" or "no" setPointer="no" //初始化时是否设置鼠标指针，"yes" or "no" url_bg = "bg.png"; //转盘背景图片 url_prize = "prize.png"; //奖品图片 url_pointer = "pointer.png"; //指针图片 url_btnStart = "btnStart.swf"; //开始按钮图片，可以是图片或flash url_btnOver = "btnOver.gif"; //鼠标经过图片 url_btnWait = "btnWait.gif"; //旋转过程中按钮图片 url_btnSuc = "btnSuc.gif"; //旋转结束后按钮图片 W_bg = "510"; //背景图片尺寸 W_btn = "124"; //按钮图片尺寸 W_pointer = "150"; //指针图片宽度 H_pointer = "255"; //指针图片高度 totleNum = 10; //奖品个数 turns = 10; //旋转圈数 stopNum = Math.floor(Math.random()*10)+1; //中奖奖品 </script> <script src="loadFlash.js"></script> <script src="jquery-1.7.min.js"></script> </body> </html>[/mw_shl_code] 上面中奖奖品的地方是我自己改了个随机数，附件里面的demo3.html是这个第二种是HTML5的： [attach]255012[/attach] 图片看起来很渣对吧，页面没有用图片，就一个HTML，这个圈全是canvas里面画出来的，转的很平稳，最后还是慢慢停下的 [mw_shl_code=javascript,true]<input type="button" value="开始旋转" style="float: left;" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <canvas id="wheelcanvas" width="500" height="500"></canvas> <script type="application/javascript"> var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB", "#2E2C75", "#673A7E", "#CC0071", "#F80120", "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"]; var restaraunts = ["北京", "上海", "天津", "南京", "杭州", "深圳", "武汉", "济南", "重庆", "大连", "合肥", "郑洲"]; var startAngle = 0; var arc = Math.PI / 6; var spinTimeout = null; var spinArcStart = 10; var spinTime = 0; var spinTimeTotal = 0; var ctx; function draw() { drawRouletteWheel(); } function drawRouletteWheel() { var canvas = document.getElementById("wheelcanvas"); if (canvas.getContext) { var outsideRadius = 200; var textRadius = 160; var insideRadius = 125; ctx = canvas.getContext("2d"); ctx.clearRect(0,0,500,500); ctx.strokeStyle = "black"; ctx.lineWidth = 2; ctx.font = 'bold 12px sans-serif'; for(var i = 0; i < 12; i++) { var angle = startAngle + i * arc; ctx.fillStyle = colors; ctx.beginPath(); ctx.arc(250, 250, outsideRadius, angle, angle + arc, false); ctx.arc(250, 250, insideRadius, angle + arc, angle, true); ctx.stroke(); ctx.fill(); ctx.save(); ctx.shadowOffsetX = -1; ctx.shadowOffsetY = -1; ctx.shadowBlur = 0; ctx.shadowColor = "rgb(220,220,220)"; ctx.fillStyle = "black"; ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius); ctx.rotate(angle + arc / 2 + Math.PI / 2); var text = restaraunts; ctx.fillText(text, -ctx.measureText(text).width / 2, 0); ctx.restore(); } //Arrow ctx.fillStyle = "black"; ctx.beginPath(); ctx.moveTo(250 - 4, 250 - (outsideRadius + 5)); ctx.lineTo(250 + 4, 250 - (outsideRadius + 5)); ctx.lineTo(250 + 4, 250 - (outsideRadius - 5)); ctx.lineTo(250 + 9, 250 - (outsideRadius - 5)); ctx.lineTo(250 + 0, 250 - (outsideRadius - 13)); ctx.lineTo(250 - 9, 250 - (outsideRadius - 5)); ctx.lineTo(250 - 4, 250 - (outsideRadius - 5)); ctx.lineTo(250 - 4, 250 - (outsideRadius + 5)); ctx.fill(); } } function spin() { spinAngleStart = Math.random() * 10 + 10; spinTime = 0; spinTimeTotal = Math.random() * 3 + 4 * 1000; rotateWheel(); } function rotateWheel() { spinTime += 30; if(spinTime >= spinTimeTotal) { stopRotateWheel(); return; } var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal); startAngle += (spinAngle * Math.PI / 180); drawRouletteWheel(); spinTimeout = setTimeout('rotateWheel()', 30); } function stopRotateWheel() { clearTimeout(spinTimeout); var degrees = startAngle * 180 / Math.PI + 90; var arcd = arc * 180 / Math.PI; var index = Math.floor((360 - degrees % 360) / arcd); ctx.save(); ctx.font = 'bold 30px sans-serif'; var text = restaraunts[index] ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10); ctx.restore(); } function easeOut(t, b, c, d) { var ts = (t/=d)*t; var tc = ts*t; return b+c*(tc + -3*ts + 3*t); } draw(); </script>[/mw_shl_code] [attach]255013[/attach]

查看回复

百度网盘(音乐)外链解析

作者:a841867051

之前写博客在文章插入MP3都是在搜狗音乐找的外链缺点: 1.外链不稳定经常改mp3链接 2.你妹的盗链啊 3.毕竟不是我的链 …… 这期来讲下怎么利用百度网盘音乐来做mp3直链 [mw_shl_code=php,false] <?php //匹配shareid和uk参数 preg_match('|\/(\d*)\/(\d*)\.|', $_SERVER["REQUEST_URI"], $res); list($shareid, $uk) = array_slice($res, 1, 2); if ($uk != "3240220216") { exit(0); } //构造百度网盘分享网址获取源码 $url = "http://pan.baidu.com/share/link?shareid=$shareid&uk=$uk"; $src = file_get_contents($url); //匹配源码里面的音乐地址并跳转 preg_match('|MusicPlayer\("(.*)"|U', $src, $res); $songurl = $res[1]; //如果要外链其它格式的文件，可以反注释下面两行代码 preg_match('|dlink\\\":\\\"(.*)\\\"|U', $src, $res); $songurl = str_replace("\\\\", "", $res[1]); header("Location:$songurl");[/mw_shl_code] 另存为baidu.php 放到网站目录防盗链:修改函数中uk值3240220216为你自己的例如我的是http://pan.baidu.com/share/home?uk=3240220216 在.htaccess添加 [mw_shl_code=php,false] RewriteEngine on RewriteRule ^bd bd.php [L][/mw_shl_code] 将以下函数复制另存为baidu.html(名字随意) [mw_shl_code=php,false] <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function Change() { var url = document.getElementById("text1").value; var arr = url.split("&"); var shareid = arr[0].split("=")[1]; var uk = arr[1].split("=")[1]; var songurl = "http://你的网站/baidu/"+shareid+"/"+uk+".mp3"; //地址跳转了这边就不用写baidu.php了 document.getElementById("text2").value = songurl; } </script> <body> 分享地址：<input id="text1" type="TEXT" value="" size="100"/><br /> 外链地址：<input id="text2" type="TEXT" value="" size="100"/><br /> <input type="BUTTON" value="转换" onclick="Change()"/> </body> </html>[/mw_shl_code] 运行baidu.html 输入分享链接例如:http://pan.baidu.com/share/link?shareid=3496067596&uk=3240220216 经过转换后:http://www.iippcc.com/bd/3496067596/3240220216.mp3

查看回复

[javascript]日期时间动态-随便写的;

作者:蓝宇轩

[i=s] 本帖最后由蓝宇轩于 2012-8-11 15:11 编辑 [mw_shl_code=xhtml,true]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>时间</title> <style type="text/css"> body{ background:#CCC;} #mydiv{height:35px;} </style> </head> <body> <div id="mydiv"></div> </body> </html> <script type="text/javascript"> function $$(id){ return document.getElementById(id);//用它来寻找到指定id的div; } function datetime(){ var dt=new Date();//定义一个日期对象; var dttime=dt.getFullYear()+"-";//将时期对象的"年"填充到dttime里;用"-"字符串分开; dttime+=dt.getMonth()+1+"-";//将时期对象的"月"填充到dttime里; dttime+=dt.getDate()+"-";//将时期对象的"日"填充到dttime里; dttime+=dt.getHours()+"-";//将时期对象的"小时"填充到dttime里; dttime+=dt.getMinutes()+"-";//将时期对象的"分"填充到dttime里; dttime+=dt.getSeconds();//将时期对象的"秒"填充到dttime里; $$("mydiv").innerHTML=dttime;//将dttime填充到Div(mydiv)的内容里; setTimeout("datetime()",1000);//每隔1000毫秒(1秒)执行一次上面的函数;时间就在逐渐更新了; } window.onload=datetime;//窗体打开就执行; </script>[/mw_shl_code]

查看回复

html5视频与音频标签;写着玩玩的!无需介意

作者:蓝宇轩

[i=s] 本帖最后由蓝宇轩于 2012-8-11 02:11 编辑用html5;可以不用flash来当网页播放器了! 那就是video标签和audio标签 [mw_shl_code=html,true]<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <video controls> <source src="file:///D|/动漫/动漫/东方/幻想万华镜-春雪异变之章配音版(蓝光).MP4" type="video/mp4"/> </video> <audio controls> <source src="file:///D|/动漫/动漫歌曲/旧番/【Clannad】eufonius - メグメル.mp3"/> </audio> </body> </html> [/mw_shl_code] html5的声明已经和xhtml1和html4不一样了很简洁;只有一句:<!doctype html>来声明. 上面是视频;下面是音频;地址自己改! 目前wmv格式视频谷歌与IE浏览器支持;火狐不支持; controls这个属性尽量不去掉,否则播放按钮的工具栏会隐藏起来

查看回复

JavaScript常用函数之字符串去空格

作者:gwl3323405

显然还有很多人在用JavaScript而非Jquery等框架，而且JavaScript还有有很多无法替代的强大优点。 JavaScript没有trim()函数，想去除字符串的空格却找不到合适办法，这不，有人帮我们实现了（代码摘抄自网络来源已无从考证）！更加强大的去除左右边空格函数巨实用。 [mw_shl_code=javascript,true]//去除左边的空格 function Ltrim(){ document.getElementById("txt").value=(document.getElementById("txt").value).replace( /^\s*/,""); } //去除右边的空格 function Rtrim(){ document.getElementById("txt").value=(document.getElementById("txt").value).replace(/(\s*$)/g,""); } //去除左右两边的空格 function LRtrim(){ document.getElementById("txt").value=(document.getElementById("txt").value).replace(/^\s+|\s+$/g,"") } //去除所有的空格 function trim(){ document.getElementById("txt").value=(document.getElementById("txt").value).replace(/\s+/g,""); }[/mw_shl_code]

查看回复

JavaScript模仿X猫做一个搜索框

作者:gwl3323405

最近逛Y宝的X猫，猛然发现搜索框已经悄然变样了，变得更加的有趣和智能，搜索框里会自动显示热门的搜索词且每隔一段时候换一个，我觉得这样的好处是，既帮X猫自己做的广告推送又免去用户搜索的麻烦，可谓一举两得。而享受此搜索框带来的方便同时，我却在思考如何实现这样一个搜索框的问题了，正所谓：三句话不离老本行吧！：）当天我就抽空做了一个，时间和技术有限，纯属业余之作，大家全当看看做个参考吧。 JavaScript代码： [mw_shl_code=javascript,true]var defval="SKII 入驻X猫";//默认显示的文本框内容 //文本框失去焦点的方法 function blurMd(){ if(val.length==0){ document.getElementById("txt").value=defval; grayStyle(); }else if(val==defval){ grayStyle(); } } //点击文本框触发的方法 function clickMd(){ var val=document.getElementById("txt").value; if(val==defval){ var a =document.getElementById("txt").createTextRange(); a.moveStart('character',0); a.collapse(true); a.select(); lgrayStyle();//改样式为浅灰色 } } //将文本框字体颜色设置为淡灰色 function lgrayStyle(){ document.getElementById("txt").style.color="lightgray"; } //将文本框字体颜色设置为灰色 function grayStyle(){ document.getElementById("txt").style.color="gray"; } //将文本框字体颜色设置为黑色 function blackStyle(){ document.getElementById("txt").style.color="black"; } window.onload=function(){ document.getElementById("txt").value=defval;//初始化显示内容 clickMd();//移动光标到首位 grayStyle();//文本灰色样式 //文本框点击事件 document.getElementById("txt").onkeydown=function(){ var val=document.getElementById("txt").value;//获得当前文本框的内容 if(val==defval&&(event.keyCode==37||event.keyCode==39)){//如果输入的是左右键并且是默认内容，则不做处理 //return false; this.blur();//失去焦点 }else{ blackStyle();//改为黑色样式 if(val==defval){//如果是默认内容则清空，并且样式改为灰色 document.getElementById("txt").value=""; } } } //搜索按钮点击事件-应该是带入文本框内容到后台查询的，我这里只做一个取值的展示 document.getElementById("btn").onclick=function(){ alert("您即将搜索的内容是："+document.getElementById("txt").value);//显示当前文本框的内容 } }[/mw_shl_code] HTML代码： [mw_shl_code=html,true]<input type="text" id="txt" onblur="blurMd()" onkeydown="keydownMd()" onclick="clickMd()" /><input type="button" id="btn" value="搜索"/>[/mw_shl_code] 上面的代码插入相应标签内可直接运行（已亲测），可能存在一些小bug大家参考下吧！#6958!

查看回复

Node.js小教程（一）

作者:Takk...

一开始先声明，明天开学#5x，所以本教程更新时间大概为一周一次。。

首先呢是对node.js的一些简介也许你第一眼看到这个名字会觉得这是一个JavaScript的应用但其实呢，Node.js是一个后端的Javascript运行环境，或者说是一个平台这个环境采用V8引擎（如果对javascript有了解的童鞋应该知道，不过呢，不知道也没事，你只要知道好厉害好厉害的引擎就行了，也就是说这是一个好厉害好厉害的东西。。。）目前为主要用来进行web项目的开发的后端语言。怎么说呢，node.js与其他的后端语言（比如php）有一些不同其他的语言一般是先要有一个HTTP服务器，比如Apache什么的但是node.js不同哦，在Node中，Http是首要的，所有项目都是从创建一个服务器开始的。。这个后面会讲到。本篇主要是作为以后的一个目录功能，然后是node.js的安装及hello world部分。目前node.js是一门新但比较成熟，至少比dart还是会相对来说更被支持，国内的大多数服务器商家都会支持node.js语言。下面我就来手把手教你在windows下安装node.js，并进行一个常规的hello world程序。。（node.js的一些资源：cnode社区：http://cnodejs.org，入门教程：http://www.nodebeginner.org/index-zh-cn.html）

一：安装首先前往node.js的官网：http://www.nodejs.org/ 直接点击install,或者点击download下载安装包然后运行安装包，指定个目录，直接一直next就行了（貌似是会自动添加环境变量）安装后，我们来检测一下是否安装成功：运行cmd，输入node -v 如果和下图一样会显示你的版本号，那么就代表你已经把node.js在你的机子上撸出来了。。 [attach]239922[/attach] 二：hello world！正如我前面所说，在node.js中，http是首要的。我们新建一个文件夹(比如我在e盘的根目录下建立了一个名字叫gn00的文件夹): [attach]239924[/attach] 下一步进入文件夹，我们创建一个文本，名字改为：app.js（当然一般来说什么都可以）然后我们输入一段代码 [mw_shl_code=javascript,true] var http = require('http'); server = http.createServer(function (req, res) { res.writeHeader(200, {"Content-Type": "text/plain"}); res.end("Hello Takk...\n"); }) server.listen(8000); console.log("httpd start @8000"); [/mw_shl_code] 然后运行cmd，用cd命令到你那个文件夹的位置比如我的文件夹路径为E:\gn00，我就是输入： e: cd gn00 然后就会是这个样子 [attach]239929[/attach] 接着输入node app （这里是你那个文件的文件名） [attach]239930[/attach] 最后你只要打开你的浏览器（最好是谷歌浏览器，或者火狐）输入：http://localhost:8000/ 然后你就可以看到效果了。 [attach]239931[/attach] 至此，我们的hello world部分就算是完成了。下一章我会解释前面那段代码的意思~~ 然后开始正式的node.js之路、。

查看回复

腿酸，来一起玩儿cocos2d-html5吧 (二)

作者:基叔

[i=s] 本帖最后由基叔于 2013-5-17 16:59 编辑大腿好酸！酸的看不下书了，于是来写教程。二，Cocos2d-html5 开发环境搭建 1，工欲善其事，必先利其器，我们需要准备以下工具 1，Cocos2d-html5 2.1.3引擎戳我下载 2，Sublime text 编辑器点我至官网下载 3，Wamp 服务器至官网下载 2，将 Wamp 和 Sublime text 一步步安装，点击 [attach]184189[/attach] 运行wamp，找到安装目录，打开wamp，打开www [目录如下 C:\wamp\www ] 将下载好的cocos2d-html5 解压进入，如图 [attach]184191[/attach] 3，打开浏览器 [ 推荐chrome ，360极速， IE10，Firefox，Opera ]，输入http://localhost/ 看效果 [attach]184192[/attach] 4，新建我们自己的项目 Asteroids 复制 template [attach]184193[/attach] 并重命名为 Asteroids [attach]184194[/attach] 修改 index.html ,找到<ol>标签，添加如下一行 [mw_shl_code=html,true]<li><a href="Asteroids/index.html">Asteroids</a> <span class="comment">射击小行星</span></li> [/mw_shl_code] [attach]184199[/attach] ctrl + c 保存 打开浏览器，输入http://localhost/ ，戳开[attach]184200[/attach] 得到如下画面 [attach]184202[/attach] 好啦我们的项目已经新建好了，下一回我们开始制作游戏

查看回复