javascript 转盘抽奖代码和计数器代码

要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下

看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...

效果预览：

一、模拟抽奖的实现过程

旋转原理：当支持CSS3属性采用transform: rotate（角度deg）设置,当角度为正数时顺时针旋转，当为负数时逆时针旋转。如果是IE8及其以下，采用采用绝对定位设置top和left，模拟角度旋转。

run方法，参数angle指角度

复制代码代码如下:

模拟转盘加速，匀速和减速。当角度小于某个数值时，让其处于加速此处采用1.01的系数作为加速度，当大于某个数值时处于高速匀速状态，当角度大于设置的最大数值时，让其减速采用系数为0.99。设置负数作为减速的值（即变量 tmp），随即获取负360中的值（即变量 m），当大于这个值时，转盘停止。

复制代码代码如下:

启动抽奖和重新设置抽奖

复制代码代码如下:

<input id="test" type="button" value="抽奖" />
<input id="restart" style="display: none;" type="button" value="再抽一次" />
m$('test').onclick = function () {
                m$('test').style.display = "none";
                showMsg();
            }

m$('restart').onclick = function () {
m$('restart').style.display = "none";

if (isIE) {
                    m$("demo").style.top = "0px";
                    m$("demo").style.left = "0px";
                } else if (m$("demo").style.MozTransform !== undefined) {
                    m$("demo").style.MozTransform = 'rotate(0deg)';
                } else if (m$("demo").style.OTransform !== undefined) {
                    m$("demo").style.OTransform = 'rotate(0deg)';

} else if (m$("demo").style.webkitTransform !== undefined) {
                    m$("demo").style.webkitTransform = 'rotate(0deg)';
                } else {
                    m$("demo").style.transform = 'rotate(0deg)';
                }

m$('test').style.display = "block";
i = 0;
}

二、完整代码demo:

复制代码代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>抽奖</title>
    <style type="text/css">
        #container{width: 400px;height: 400px;position: relative;margin: 0 auto;}
        #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
    </style>
</head>
<body style="height: 1000px;">
    <div id="container">
        <div id="demo">
            <img alt="" src="http://files.jb51.net/file_images/article/201406/20146394819279.png?20145394926" width="400" height="400" />
        </div>
    </div>
    <input id="test" type="button" value="抽奖" />
    <input id="restart" style="display: none;" type="button" value="再抽一次" />
    <div id="msg">
    </div>
    <script type="text/javascript">
        var m$ = function (id) { return document.getElementById(id); }
        var ua = navigator.userAgent;
        var isIE = /msie/i.test(ua) && !window.opera;

window.onload = function () {
            m$('test').onclick = function () {
                m$('test').style.display = "none";
                showMsg();
            }

m$('restart').onclick = function () {
m$('restart').style.display = "none";

m$('test').style.display = "block";
                i = 0;
            }
        }
    </script>
</body>
</html>

该方法的关键是Cookie技术和动态图像特性的综合运用。使用Cookie，可以在用户端的硬盘上记录用户的数据，下次访问此站点时，即可读取用户端硬盘的Cookie，直接得知来访者的身份和访问次数等有关信息。JavaScript中通过document.cookie属性访问Cookie，这个属性包括名字、失效日期、有效域名、有效URL路径等。用等号分开的名字和其值是Cookie的实际数据，本例中用来存储该访问者访问该页面的次数。通过把Web页中的图像映射到一个Images数组，一定条件下修改该数组项的特性，可以实现动态图像显示。本例中，首先预载入一组图像，每次调用该Web页时，随机产生新的一组图像，通过覆盖原图像实现动态的趣味性效果。

　　源程序count.html

　< html>

　　< head>

　　< meta http－equiv=″Content－Type″

　　content=″text/html; charset=gb2312″>

　　< title>趣味计数器< /title>

　　< /head>

　　< body>

　　< p>< script language=″JavaScript″>

　　var expdays=60;

　　var exp=new Date();

　　exp.setTime(exp.getTime()

　　(expdays＊24＊60＊60＊1000));

　　function count(info){

　　//若是该访客的第一次访问，将计数器值赋1，否则加1累积

　　var wwhcount=getcookie(′wwhcount′);

　　if (wwhcount==null){

　　wwhcount=1;

　　}

　　else{wwhcount＋＋;}

　　setcookie(′wwhcount′,wwhcount,exp);

　　return countdisp(wwhcount)

　　}

　　function countdisp(countvar){

　　//实现随机显示，不足6位以0补全，可以自己调整显示位数

　　var countvar1=″000000″＋countvar;

　　var howFar1=countvar1.length;

　　countvar1=countvar1.substring(howFar1, howFar1－1)

　　var index=″ ″＋Math.floor(Math.random()＊10);

　　if (index==″10″){

　　index=″0″};

　　for (var icount=0;icount< 6;icount＋＋){

　　var g=countvar1.substring(icount,icount＋1);

　　document.images[icount].src=″http:

　　//localhost/images/″＋index＋g＋″.gif″;

　　}

　　}

　　function getCookieVal(offset){

　　//获取该访问者的已访问次数

　　var endstr=document.cookie.indexOf(″;″,offset);

　　if (endstr==－1)

　　endstr=document.cookie.length;

　　return unescape(document.cookie.substring(offset,endstr));

　　}

　　function getcookie(name){

　　//截取Cookie中的name信息段

　　var arg=name＋″=″;

　　var alen=arg.length;

　　var clen=document.cookie.length;

　　var i=0;

　　while (i< clen){

　　var j=i＋alen;

　　if (document.cookie.substring(i,j)==arg)

　　return getCookieVal(j);

　　i=document.cookie.indexOf(″ ″,i)＋1;

　　if (i==0) break;}

　　return null;

　　}

　　function setcookie(name,value){

　　//存储该访客计数器的数值

　　var argv=setcookie.arguments;

　　var argc=setcookie.arguments.length;

　　var expires=(argc>2)?argv[2]:null;var path=(argc>3)?argv[3]:null;

　　var domain=(argc>4)?argv[4]:null;

　　var secure=(argc〉5)?argv[5]:false;

　　document.cookie=name＋″=″＋escape(value)

　　＋((expires==null)?″ ″:(″;expires=″＋expires.toGMTString()))

　　＋((path==null)?″ ″:(″;path=″＋path))＋((domain==null)?″

　　″:(″;domain=″＋domain))＋((secure==true)?″;secure″:″ ″);

　　}

　　function deletecookie(name){

　　//使该信息行失效，删除该用户关于访问次数的信息

　　var exp=new Date();

　　exp.setTime(exp.getTime()－1);

　　var cval=getcookie(name);

　　document.cookie=name＋″=″＋cval＋″;expires=″＋exp.toGMTString();

　　}

　　< /script>< /p>

　　< ! －－预载入图像数组－－>

　　您是第 < img src=″http://localhost/images/00.gif″ height=20 width=20>

　　< img src=″http://localhost/images/00.gif″

　　height=20 width=20>

　　< img src=″http://localhost/images/00.gif″

　　height=20 width=20>

　　< img src=″http://localhost/images/00.gif″

　　height=20 width=20>

　　< I mg src=″http://localhost/images/00.gif″

　　height=20 width=20>

　　< img src=″http://localhost/images/00.gif″

　　height=20 width=20>次光临！

　　< script language=″JavaScript″>

　　//调用count()函数，实现计数器的动态图像显示

　　count();

　　< /script>

　　< /body>

　　< /html>

　　注意事项

　　由于使用了JavaScript语言，因此该方法具有与应用平台的无关性，可以适用于Unix、Windows等多种平台。另外，此计数器不同于一般意义上的访客计数器，专门用于记录某一访客对某一网站的访问次数。

大衣哥年度 王小源 帅总 囧囧丸 天佑 流氓三金 毕加索 王冕 风小筝 利哥天佑天佑 沈曼资料

javascript 转盘抽奖代码和计数器代码的更多相关文章

C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
【JAVA系列】使用JavaScript实现网站访问次数统计代码
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]使用JavaScript实现网站 ...
HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
jquery——九宫格大转盘抽奖
一.用到的图片二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
纯CSS3大转盘抽奖（响应式、可配置）
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
web：转盘抽奖
移动web:转盘抽奖(幸运大转盘) 为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...
移动web：转盘抽奖(幸运大转盘)
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...
css3转盘抽奖
做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...
jquery实现转盘抽奖
jquery实现转盘抽奖一.总结一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...

随机推荐

windows bat批处理语法简析
第一节先介绍windows批处理.这个起源于跟旁边同事学习在windows用命令行办公,渐渐地有些批处理功能就需要了,于是专门抽出了几天学习了一下.我认为文档最重要的功能是为了备忘,择取了很多文档的例 ...
oracle--游标--bai
--复制表 create table emp as(select * from scott.emp); select * from emp; --(1) 最简单的游标 declare --声明并初始化 ...
内网穿透神器（ngrok）服务端部署【分享一台自己的ngrok服务器】【多平台】
Ngrok为何物 “ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放.”这是百度百科上给Ng ...
[转]C语言SOCKET编程指南
1.介绍 Socket编程让你沮丧吗?从man pages中很难得到有用的信息吗?你想跟上时代去编Internet相关的程序,但是为你在调用 connect() 前的bind() 的结构而不知所措?等 ...
C语言基础(11)-随机数发生器
一. rand() rand是一个C语言库函数,功能是生成一个随机数.rand需要一个不同的种子,才能生成不同的随机数. 二. srand(int seed) rand需要一个不同的种子,才能生成不同 ...
mysql 快速简单安装法
网上下载的编译好的包最好安装在 /usr/local 目录下面: 我用的mysql的版本的是:mysql--linux-i686-icc-glibc23.tar.gz 在官网上就可以下载到. 先期工 ...
Xcode 快捷键、常用技巧
关于iOS开发中的技能快捷键经常使用鼠标太TM的D疼了,快捷键能大大地提高我们的开发速度,使我们的手指尽情的在键盘上飞舞,优美的代码,哈哈哈,那些常规的复制.粘贴.剪切请自行度娘或者Google一下 ...
gulp工具rename
gulp 对文件批量重命名 gulp-rename重命名 var gulp = require('gulp'); var rename = require("gulp-rename" ...
&&&&数组去重方法总结&&&&&
[数组去重]本文一共总结了5种方法: //方法一:sort方法 var ary = [1, 4, 2, 3, 1, 2, 2, 3, 3, 2, 5, 2, 1, 2];Array.prototype ...
耿丹CS16-2班第六次作业汇总
Deadline: 2016-11-13 11:59 作业内容第六次作业总结 00.本次题目分值最高为**6分/题 × 7题 + 5分/篇 × 1篇 = 47分**,其中有新解法者每题加原创分**2 ...

javascript 转盘抽奖代码和计数器代码

javascript 转盘抽奖代码和计数器代码的更多相关文章

随机推荐

热门专题