js轮盘抽奖实例分析


Posted in Javascript onApril 17, 2020

现在学习到了过渡效果了,已经开始有做动画效果的意识了,会实现一些比较炫的小玩意,一个网页加入过渡动画效果,会让人看起来很有美观,不僵硬,有看头,动画是一个网页美观的主要体现之一,下面做个使用个过渡效果实现的抽奖例子。

先来效果图: 

js轮盘抽奖实例分析

这个的实现需要使用到一些js代码。

所需图片:

js轮盘抽奖实例分析

这张图是pointer.png的位置的。

js轮盘抽奖实例分析

turntable-bg.jpg这张是背景图,在背景位置。

js轮盘抽奖实例分析

这张是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=rdm%360;
 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()向下取整。

想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
JavaScript 中有关数组对象的方法(详解)
Aug 15 #Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 #Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 #Javascript
又一款js时钟!transform实现时钟效果
Aug 15 #Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 #Javascript
深入分析javascript中console命令
Aug 14 #Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
python编写Logistic逻辑回归
2020/12/30 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python实现从wind导入数据
2019/12/03 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
初中生评语大全
2014/04/24 职场文书
体育专业求职信
2014/07/16 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
岗位职责范本大全
2015/02/26 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL