妖蓝君
js+html几种不同的抽奖大转盘,转来看看
展开Biu

组织办活动,到了抽题答题的环节我想用这么一个转盘选题,总比拿箱子放纸条要高端大气多了

找个差不多的自己改一下P点图片就OK了其实,有什么更好的方案么

第一种是JS+HTML的:

[mw_shl_code=javascript,true]<!DOCTYPE HTML>

*本站禁止HTML标签噢*

*本站禁止HTML标签噢*

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

*本站禁止HTML标签噢* 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>

*本站禁止HTML标签噢*

<div id="flashContent"></div>

*本站禁止HTML标签噢*

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的:

图片看起来很渣对吧,页面没有用图片,就一个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]

[查看全文]
a841867051
百度网盘(音乐)外链解析
展开Biu

之前写博客 在文章插入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">

*本站禁止HTML标签噢*

<meta charset="UTF-8">

*本站禁止HTML标签噢* </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>

*本站禁止HTML标签噢*

分享地址:<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]日期时间动态-随便写的;
展开Biu

本帖最后由 蓝宇轩 于 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">

*本站禁止HTML标签噢*

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

*本站禁止HTML标签噢* 时间</title>

<style type="text/css">

body{ background:#CCC;}

#mydiv{height:35px;}

</style>

</head>

*本站禁止HTML标签噢*

<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视频与音频标签;写着玩玩的!无需介意
展开Biu

本帖最后由 蓝宇轩 于 2012-8-11 02:11 编辑

用html5;可以不用flash来当网页播放器了!

那就是video标签和audio标签

[mw_shl_code=html,true]<!doctype html>

*本站禁止HTML标签噢*

*本站禁止HTML标签噢*

<meta charset="utf-8">

*本站禁止HTML标签噢* 无标题文档</title>

</head>

*本站禁止HTML标签噢*

<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这个属性尽量不去掉,否则播放按钮的工具栏会隐藏起来

[查看全文]
gwl3323405
JavaScript常用函数之字符串去空格
展开Biu

显然还有很多人在用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]

[查看全文]
gwl3323405
JavaScript模仿X猫做一个搜索框
展开Biu

最近逛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!

[查看全文]
Takk...
Node.js小教程(一)
展开Biu

一开始先声明,明天开学#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在你的机子上撸出来了。。

二:hello world!

正如我前面所说,在node.js中,http是首要的。

我们新建一个文件夹(比如我在e盘的根目录下建立了一个名字叫gn00的文件夹):

下一步进入文件夹,我们创建一个文本,名字改为: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

然后就会是这个样子

接着输入node app (这里是你那个文件的文件名)

最后你只要打开你的浏览器(最好是谷歌浏览器,或者火狐)

输入:http://localhost:8000/

然后你就可以看到效果了。

至此,我们的hello world部分就算是完成了。

下一章我会解释前面那段代码的意思~~

然后开始正式的node.js之路、。


[查看全文]
基叔
腿酸,来一起玩儿cocos2d-html5吧 (二)
展开Biu

本帖最后由 基叔 于 2013-5-17 16:59 编辑

大腿好酸! 酸的看不下书了,于是来写教程。

二,Cocos2d-html5 开发环境搭建

1, 工欲善其事,必先利其器,我们需要准备以下工具

1,Cocos2d-html5 2.1.3引擎 戳我下载

2,Sublime text 编辑器 点我至官网下载

3,Wamp 服务器 至官网下载

2, 将 Wamp 和 Sublime text 一步步安装,点击 运行wamp

找到安装目录,打开wamp,打开www [目录如下 C:\wamp\www ]

将下载好的cocos2d-html5 解压进入如图

3, 打开浏览器 [ 推荐chrome ,360极速, IE10,Firefox,Opera ],输入http://localhost/ 看效果

4,新建我们自己的项目 Asteroids

复制 template

并重命名为 Asteroids

修改 index.html ,找到 *本站禁止HTML标签噢* 标签,添加如下一行

[mw_shl_code=html,true] *本站禁止HTML标签噢* <a href="Asteroids/index.html">Asteroids</a> <span class="comment">射击小行星</span></li>

[/mw_shl_code]

ctrl + c 保存

打开浏览器,输入http://localhost/戳开

得到如下画面

好啦我们的项目已经新建好了,下一回我们开始制作游戏

[查看全文]