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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
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
example2.php
2006/10/09 PHP
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
详解python中的Turtle函数库
2018/11/19 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
大学校园毕业自我鉴定
2014/01/15 职场文书
营销总经理岗位职责
2014/02/02 职场文书
医院院务公开实施方案
2014/05/03 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
优秀教师申报材料
2014/12/16 职场文书
优秀员工事迹材料
2014/12/20 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
工作简历自我评价
2015/03/11 职场文书