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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
Vue+Flask实现图片传输功能
Apr 01 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
javascript删除字符串最后一个字符
2014/01/14 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
如何进行Linux分区优化
2016/09/13 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
婚前协议书范本
2014/04/15 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
学生安全承诺书
2014/05/22 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
小学运动会入场词
2015/07/18 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript