原生JS实现九宫格抽奖效果
作者：完美续航 发布时间：2024-04-17 10:33:38
标签：js,抽奖
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
#container{width:310px;height:310px;margin:30px auto;}
#ul1{width:310px;height:310px;list-style:none;}
#ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}
#ul1 a:hover{cursor:pointer;color:orange;font-size:18px;}
#ul1 .active{background:red;color:#fff;}
#pp{line-height:32px;color:#9a9a9a;text-align:center;}
</style>
</head>
<body>
<div id="container">
<ul id="ul1">
<li>一等奖</li>
<li>二等奖</li>
<li>三等奖</li>
<li>四等奖</li>
<a>开始</a>
<li>五等奖</li>
<li>六等奖</li>
<li>七等奖</li>
<li>八等奖</li>
</ul>
<p id="pp"></p>
</div>
<script>
var container = document.getElementById('container'),
li = container.getElementsByTagName('li'),
aa = container.getElementsByTagName('a')[0],
pp = document.getElementById('pp'),
timer = null;
function start(){
var i = 0;
var num = Math.floor(Math.random() * li.length) + 20;
if(i<num){
timer = setInterval(function(){
for(var j=0;j<li.length;j++){
li[j].className = '';
}
li[i％li.length].className = 'active';
i++;
if(i === num){
clearInterval(timer);
if(num％li.length === 0){
pp.innerHTML += "恭喜您中了：8 等奖" + '<br/>';
}else{
pp.innerHTML += "恭喜您中了："+ parseInt(num％li.length) + " 等奖"+ '<br/>';
}
}
},130);
}
}
aa.onclick = function(){
start();
}
</script>
</body>
</html>
来源：http://www.qdfuns.com/notes/40961/8faeb4cd96ee77b45bb62751bec7e413.html
0
投稿猜你喜欢
LSTM介绍关于LSTM的具体原理，可以参考：https://www.jb51.net/article/178582.htmhttps://- 简介python 动态执行字符串代码片段（也可以是文件）， 一般会用到exec,eval。execexec_stmt ::= "e
- 这篇文章主要介绍了python修改文件内容的3种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 操作系统：macOS High Sierra 10.13.3Python3.6因为此版本自带python2.7，就下载并安装了anacond
- Python 是面向对象的语言，所以程序抛出的异常也是类。常见的异常类1.NameError：尝试访问一个没有申明的变量2.ZeroDivi
- 项目初始化首先我们创建一个目录，初始化 npm,得到一个package.json文件。mkdir react-clicd react-cli
- Golang的接口是什么在 Golang 中，接口是一种类型，它是由一组方法签名组成的抽象集合。接口定义了对象应该具有的行为，而不关心对象的
- 前言本文将介绍Java正则表达式中的Pattern类与Matcher类。首先我们要清楚指定为字符串的正则表达式必须首先被编译为pattern
- 统计分析常常会出错、存在偏见或过于狭隘。数字崇拜者常因专注于统计分析而把可用性研究引入歧途。强调洞察力和定性研究更为重要。用户研究有两种类型
- 文本文件具备初步存放、编辑各类数据的能力，并可以持久保留和数据共享。1. 建立文件 建立文本文件有两种途径：一是通过Windows的“记事
- 视频本教程的视频选择图形我们谈到了 Opengameart.org，这是免费游戏艺术的重要来源，也是我们最喜欢的艺术家之一&ldqu
- // 涉及命名空间 using System; using System.Collections; using System.Compone
- 一、停止数据库服务打开sqlserver自带的配置管理器，停止数据库服务。二、打开cmd窗口，执行命令(以管理员运行)以单用户模式启动sql
- 前言摘要昨天和同事merge代码又遇到了很多冲突，发现之前有些方法写的参数不规范，没有传入Context，不方便进行链路追踪。他在revie
- 一、Go语言通道基础概念1.channel产生背景 线程之间进行通信的时候，会因为资源的争夺而产生竟态问
- 地图服务是指可以提供数据信息的接口，比如说本地搜索/路线规划等，下面小编给大家整理下百度地图API之本地搜索和范围搜索，具体请看下文。地图服
- 本文实例讲述了python实现的汉诺塔算法。分享给大家供大家参考，具体如下：规则：圆盘从下面开始按大小顺序重新摆放在另一根柱子上。并且规定在
- 本位实例为大家分享了Python生成随机密码的实现过程，供大家参考，具体内容如下写了个程序，主要是用来检测MySQL数据库的空密码和弱密码的
- 在JavaScript中，阻止表单默认提交行为的方法有两种，分别是：（1） return false示例代码<form name=&q
- 众所周知，我们可以通过索引值（或称下标）来查找序列类型（如字符串、列表、元组...）中的单个元素，那么，如果要获取一个索引区间的元素该怎么办
