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 相关文章推荐
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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
PHP面向对象法则
2012/02/23 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python实现ping的方法
2015/07/06 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python中取整的几种方法小结
2017/01/06 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python Pandas 箱线图的实现
2019/07/23 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
超市开学活动方案
2014/03/01 职场文书
会计演讲稿范文
2014/05/23 职场文书
中学生逃课检讨书
2015/02/17 职场文书
大学生十八大感想
2015/08/11 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
MySQL为id选择合适的数据类型
2021/06/07 MySQL
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
SQL Server表分区删除详情
2021/10/16 SQL Server
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android