这篇文章主要为大家详细介绍了 js 轮盘抽奖实例,分析 js 轮盘抽奖实现原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
现在学习到了过渡效果了,已经开始有做动画效果的意识了,会实现一些比较炫的小玩意,一个网页加入过渡动画效果,会让人看起来很有美观,不僵硬,有看头,动画是一个网页美观的主要体现之一,下面做个使用个过渡效果实现的抽奖例子。
先来效果图:
这个的实现需要使用到一些 js 代码。
所需图片:
这张图是 pointer.png 的位置的。
turntable-bg.jpg 这张是背景图,在背景位置。
这张是 turntable.png 位置的。
需要这三张图片,如果要实现一下,直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字,放到同一个文件下。
代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>抽奖</title>
- <!-- 这里是CSS部分 -->
- <style>
- #bg{
- width: 650px;
- height: 600px;
- margin: 0 auto;
- background: url(turntable-bg.jpg) no-repeat;
- position: relative;
- }
- img[src^="pointer"]{
- position: absolute;
- z-index: 10;
- top: 155px;
- left: 247px;
- }
- img[src^="turntable"]{
- position: absolute;
- z-index: 5;
- top: 60px;
- left: 116px;
- transition: all 4s;
- }
- </style>
- </head>
- <body>
- <!-- 这里是HTML结构部分 -->
- <div id="bg">
- <img src="pointer.png" alt="pointer">
- <img src="turntable.png" alt="turntable">
- </div>
- <!-- 这里是js部分 -->
- <script>
- var oPointer=document.getElementsByTagName("img")[0];
- var oTurntable=document.getElementsByTagName("img")[1];
- var cat=51.4;
- var num=0;
- var offOn=true;
- document.title="";
- oPointer.onclick=function(){
- if(offOn){
- oTurntable.style.transform="rotate(0deg)";
- offOn=!offOn;
- ratating();
- }
- }
- function ratating(){
- var timer=null;
- var rdm=0;
- clearInterval(timer);
- timer=setInterval(function(){
- if(Math.floor(rdm/360)<3){
- rdm=Math.floor(Math.random()*3600);
- }else{
- oTurntable.style.transform="rotate("+rdm+"deg)";
- clearInterval(timer);
- setTimeout(function(){
- offOn=!offOn;
- num=rdm60;
- if(num<=cat*1){
- alert("4999元");
- }else if(num<=cat*2){
- alert("条50元");
- }else if(num<=cat*3){
- alert("10元");
- }else if(num<=cat*4){
- alert("5元");
- }else if(num<=cat*5){
- alert("免息服务");
- }else if(num<=cat*6){
- alert("提交白金");
- }else if(num<=cat*7){
- alert("未中奖");
- }
- },4000);
- }
- },30);
- }
- </script>
- </body>
- </html>
css 和 HTML 代码不多,主要是为了实现过渡设置,还有为了实现层叠而使用 position 定位,让元素脱离文档流,js 代码在于获取元素和事件的点击,点击指针会旋转,所以要给指针加个点击事件,然后是判断旋转是否停止,如果没有就点击也不能调用函数 ratating(),这个函数执行转盘的旋转和判断指针停在什么位置,然后弹出相应的内容,而函数里实现旋转的过程,是获取转盘的元素,然后使用 js 控制 css 的属性 - transform:rotate(),我们不是使用过这个属性在 css 里直接使它实现旋转的效果吗?就是和伪类选择器: hover 及过渡属性一起使用去实现的,那么因为 css 实现不了数字的运算和鼠标点击,所以让 js 去实现且控制 css 属性,实现到点击旋转这个功能,然而定时器的使用暂时不说,思路就是使用 js 实现数字的运算和鼠标的点击及 css 属性的控制达到旋转的效果。
Math.random() 是随机数的生成,Math.floor() 向下取整。
来源: http://www.phperz.com/article/17/0331/263601.html