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中对数组的操作代码
Aug 12 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php下将XML转换为数组
2010/01/01 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript内存管理介绍
2015/03/13 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python实现发送email的几种常用方法
2014/08/18 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python实现矩阵打印
2019/03/02 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
学校领导班子四风问题整改意见
2014/10/02 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL