[JavaScript学习-01]JavaScript实现九宫格抽奖
2024-05-14 21:14:46
效果：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 实现九宫格抽奖</title>
<style>body{background-color: #2c9afc;}#container {width: 330px;height: 340px;margin: 10% auto;border: 7px solid #99d4ff;border-radius: 10px;padding: 2%;}#list {width: 330px;height: 340px;list-style: none;margin: 0;padding: 0;}#list li,#list span {width: 100px;height: 100px;float: left;text-align: center;line-height: 100px;position: relative;background-color: #384f9a;margin: 1.4%;border-radius: 5px;}#list li img{display: block;width: 100%;height: 100%;}#list li .mask{width: 100%;height: 100%;position: absolute;left:0;top:0;background: url(images/mask.png) no-repeat;background-size: cover;display: none;}#list span:hover {cursor: pointer;color: orange;font-size: 18px;}#list .active .mask{display: block;}#message {line-height: 32px;color: #9a9a9a;text-align: center;position:absolute;left: 50%;top: 50px;width: 300px;height: 50px;margin-left: -150px;display: none;background: #000;color: #fff;}
</style>
</head>
<body> <h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 实现九宫格抽奖</h3><div id="container"><ul id="list"><!-- img标签放奖品图片 --><!-- mask类为抽奖滚动起来的标记 --><li><img src="data:images/1.png"/><div class="mask"></div></li><li><img src="data:images/2.png"/><div class="mask"></div></li><li><img src="data:images/3.png"/><div class="mask"></div></li><li><img src="data:images/4.png"/><div class="mask"></div></li><span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">开始抽奖</span><li><img src="data:images/5.png"/><div class="mask"></div></li><li><img src="data:images/6.png"/><div class="mask"></div></li><li><img src="data:images/7.png"/><div class="mask"></div></li><li><img src="data:images/8.png"/><div class="mask"></div></li></ul><div id="message"></div><!-- 获奖信息展示 --></div>
</body><script type="text/javascript">var container = document.getElementById('container'),li = container.getElementsByTagName('li'),span = document.getElementById('startbutton'),message = document.getElementById('message'),timer = null;bReady = true;//定义一个抽奖开关var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序var num = 0;//num用来存放得到的随机函数，也就是抽中的奖品//开始抽奖function startlottery(){if(bReady) {//当抽奖开关为true的时候，可点击抽奖message.style.display="none";//将获奖信息div隐藏（以防止上次抽奖信息还显示）span.style.background="#ada7a8";bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖num = getrandomnum(1,9)//得到一个随机数（即奖品）// console.log(num)startinit(num);//执行抽奖初始化}}//抽中的奖品 返回1-9的整数，包含1，不包含9function getrandomnum(n, m) {return parseInt((m - n) * Math.random() + n);}//抽奖初始化function startinit(num) {var i = 0; //定义一个i 用来计算抽奖跑动的总次数var t =200; //抽奖跑动的速度 初始为200毫秒var rounds = 5; //抽奖转动的圈数var rNum = rounds*8; //标记跑动的次数（这是一个条件判断分界线）timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数//抽奖滚动的函数function startscroll() {//每次滚动抽奖将所有li的class都设为空for(var j = 0; j < li.length; j++) {li[j].className = '';}var prizenum = prize[i%li.length]; //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置li[prizenum].className = "active";i++;if(i<rNum-8){ //当i小于转(rNum-8次)的数量，t不变还是200毫秒timer = setTimeout(startscroll, t);//继续执行抽奖滚动}else if(i>= rNum-8 && i< rNum+num){//t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低t+=(i-rNum+8)*5;timer = setTimeout(startscroll, t);//继续执行抽奖滚动}if( i >= rNum+num){//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息if (num==1) {message.innerHTML="恭喜你中了耳机";}else if(num==2){message.innerHTML="恭喜你中了iPad";}else if(num==3){message.innerHTML="感谢参与";}else if(num==4){message.innerHTML="恭喜你中了洋娃娃";}else if(num==5){message.innerHTML="恭喜你中了红色鞋子";}else if(num==6){message.innerHTML="恭喜你中了白色手机";}else if(num==7){message.innerHTML="恭喜你中了黑色手机";}else if(num==8){message.innerHTML="恭喜你中了蓝色鞋子";}var timer2 = null;timer2 = setTimeout(function(){message.style.display="block";//奖品展示的信息为显示状态span.style.background="#ff3a59";clearTimeout(timer2);},1000);bReady = true;//当计时器结束后让span标签变为抽奖状态clearTimeout(timer);}}}</script>
</html>
JS实现九格宫抽奖，让中奖不再是梦！
转自微信公众号：前端进阶周刊，侵删
[JavaScript学习-01]JavaScript实现九宫格抽奖相关推荐
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript">//继承第一种方式: ...
- javaScript系列 [01]-javaScript函数基础
[01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...
- 简单的javascript学习01
---------------------------------------------------------------------------------------------------- ...
- JavaScript学习01
逻辑运算 //逻辑非!的结果一定是true or false 而逻辑或和与与实际值有关 var log = console.log; log(!1); //false //内部执行如下: var re ...
- 【JavaScript学习】JavaScript 常用工具类封装
文章目录 1.JavaScript 常用工具类封装 (1)获得浏览器地址所有参数 (2)将json转为get参数 (3)格式校验工具类 (4)数组操作工具类 (5)表单取值工具类 (6)时间转换工具类 ...
- 【JavaScript学习】JavaScript对象创建
1.最简单的方法,创建一个对象,然后添加属性 1 var person = new Object(); 2 person.age = 23; 3 person.name = "David&q ...
- JAVASCRIPT学习笔记----Javascript引用类型
引用类型的值(对象)是引用类型的一个实例,引用类型是一种数据结构. (一)Object类型 1.创建方式 1 //第一种:new Object() 2 var person = new Object( ...
- JavaScript 学习-8.JavaScript 箭头函数的使用
前言 ES6 中引入了箭头函数() =>.箭头函数不需要使用function关键字,允许我们编写更短的函数. 箭头函数 之前使用function 定义函数 fun1 = function() { ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
最新文章
- inode与block详解
- 比特币现金（BCH）社交平台推出新玩法
- 03_ClickHouse数据格式，TabSeparated、TSKV、CSV格式、JSON格式、Parquet、ORC、其它数据格式（Native，Pretty，Values，Vertical等）
- Android -- 短信
- HTTP系列之:HTTP缓存
- Python到底是有什么魅力，让程序猿为它折腰？
- 安卓学习第10课——listview
- 6-2 多项式求值 (15 分)
- JDK源码（1）-阅读指引
- ArcGIS：ArcToolBox工具使用——提取DEM/DSM中的高程点
- gitlab用户，组，项目权限管控
- 1.7 试探法(回溯法)
- PreScan第三课：Sensors Model
- 数据库SQL（基础代码）
- 动手学树莓派第1章：先唠叨两句
- 手机连接Fiddler后无法上网问题解决
- AutoIt的录制（AU3Record）
- 【图片】图片处理，图片压缩相关知识分享
- html 给div设置边框颜色代码,div边框颜色设置
- 财务自由到底是啥感觉啊...