效果预览：
一、模拟抽奖的实现过程
旋转原理：当支持CSS3属性采用transform: rotate（角度deg）设置,当角度为正数时顺时针旋转，当为负数时逆时针旋转。如果是IE8及其以下，采用采用绝对定位设置top和left，模拟角度旋转。
run方法，参数angle指角度
function run(angle) {
if (isIE) {
cosDeg = Math.cos(angle * Math.PI / 180);
sinDeg = Math.sin(angle * Math.PI / 180);
with (target.filters.item(0)) {
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
}
target.style.top = (orginH - target.offsetHeight) / 2 + "px";
target.style.left = (orginW - target.offsetWidth) / 2 + "px";
} else if (target.style.MozTransform !== undefined) {
target.style.MozTransform = "rotate(" + angle + "deg)";
} else if (target.style.OTransform !== undefined) {
target.style.OTransform = "rotate(" + angle + "deg)";
} else if (target.style.webkitTransform !== undefined) {
target.style.webkitTransform = "rotate(" + angle + "deg)";
} else {
target.style.transform = "rotate(" + angle + "deg)";
}
}
模拟转盘加速，匀速和减速。当角度小于某个数值时，让其处于加速此处采用1.01的系数作为加速度，当大于某个数值时处于高速匀速状态，当角度大于设置的最大数值时，让其减速采用系数为0.99。设置负数作为减速的值（即变量 tmp），随即获取负360中的值（即变量 m），当大于这个值时，转盘停止。
var tmp = -900;
var m = -parseInt(Math.random() * 360);
timer = setInterval(function () {
if (i > 3000) {
tmp = parseInt(tmp * 0.99);
if (tmp > m) {
tmp = m;
clearInterval(timer);
msg(m);
}
run(tmp);
}
else if (i > 1000) {
i = i + 45;
run(i);
}
else {
i = parseInt((i + 1) * 1.01);
run(i);
}
}, 50);
启动抽奖和重新设置抽奖
<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:
<html>
<head>
<title>抽奖</title>
<style type="text/css">
#container{ 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;
var i = 1, sinDeg = 0, cosDeg = 0, timer = null;
var mRotate = function () {
var rotate = function (target, msg) {
target = m$(target);
var orginW = target.clientWidth, orginH = target.clientHeight;
clearInterval(timer);
function run(angle) {
if (isIE) {
cosDeg = Math.cos(angle * Math.PI / 180);
sinDeg = Math.sin(angle * Math.PI / 180);
with (target.filters.item(0)) {
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
}
target.style.top = (orginH - target.offsetHeight) / 2 + "px";
target.style.left = (orginW - target.offsetWidth) / 2 + "px";
} else if (target.style.MozTransform !== undefined) {
target.style.MozTransform = "rotate(" + angle + "deg)";
} else if (target.style.OTransform !== undefined) {
target.style.OTransform = "rotate(" + angle + "deg)";
} else if (target.style.webkitTransform !== undefined) {
target.style.webkitTransform = "rotate(" + angle + "deg)";
} else {
target.style.transform = "rotate(" + angle + "deg)";
}
}
var tmp = -900;
var m = -parseInt(Math.random() * 360);
timer = setInterval(function () {
if (i > 3000) {
tmp = parseInt(tmp * 0.99);
if (tmp > m) {
tmp = m;
clearInterval(timer);
msg(m);
}
run(tmp);
}
else if (i > 1000) {
i = i + 45;
run(i);
}
else {
i = parseInt((i + 1) * 1.01);
run(i);
}
}, 50);
}
return { rotate: rotate }
} ();
function showMsg() {
mRotate.rotate("demo", function msg(m) {
if (m > -90 && m < -30) {
m$("msg").innerHTML += "22222222";
}
else if (m > -150 && m < -90) {
m$("msg").innerHTML += "333333333";
}
else if (m > -210 && m < -150) {
m$("msg").innerHTML += "444444";
}
else if (m > -270 && m < -210) {
m$("msg").innerHTML += "5555555";
}
else if (m > -330 && m < -270) {
m$("msg").innerHTML += "6666666";
} else {
m$("msg").innerHTML += "111111111";
}
m$('restart').style.display = "block";
});
}
window.onload = function () {
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;
}
}
</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等多种平台。另外，此计数器不同于一般意义上的访客计数器，专门用于记录某一访客对某一网站的访问次数。