JS实现简单的抽奖转盘效果示例


Posted in Javascript onFebruary 16, 2019

本文实例讲述了JS实现简单的抽奖转盘效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com JS抽奖转盘</title>
  <style>
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
    .big{
      width: 318px;
      height: 318px;
      margin:100px auto;
    }
    .big>div{
      width: 100px;
      height: 100px;
      background: pink;
      float: left;
      line-height: 100px;
      text-align: center;
      border: solid;
    }
    .big>div:nth-of-type(5){
      background: yellow;
      cursor: pointer;
    }
    #act{
      background: red;
    }
  </style>
</head>
<body>
<div class="big">
  <div class="small" id="act">1</div>
  <div class="small">2</div>
  <div class="small">3</div>
  <div class="small">8</div>
  <div id="cj">点击抽奖</div>
  <div class="small">4</div>
  <div class="small">7</div>
  <div class="small">6</div>
  <div class="small">5</div>
</div>
<script>
  var arrDiv=document.getElementsByClassName("small");
  var oCj=document.getElementById("cj");
  var num=0;
  var shijian=Math.random()*5000+3200;
  oCj.onclick=function(){
    oTime=setInterval(dianji,200);
  }
  function dianji() {
    num=num+1;
    if (num>arrDiv.length-1){
      num=0
    }
    for(j=0;j<arrDiv.length;j++){
      arrDiv[j].id="";
    }
    arrDiv[num].id="act";
    setTimeout(tingzhi,shijian);
    function tingzhi() {
      clearInterval(oTime)
    }
   }
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

JS实现简单的抽奖转盘效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 #Javascript
详解Element 指令clickoutside源码分析
Feb 15 #Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 #Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 #Javascript
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
如何查看python关键字
2021/01/17 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
事业单位分类改革实施方案
2014/03/21 职场文书
求职信范文大全
2014/05/26 职场文书