JavaScript实现九宫格抽奖功能的示例代码
目录
- 效果图
- 实现流程
- 主要代码
效果图
话不多说，直接上效果：
实现流程
主要流程为：
1. 根据效果图，构建静态页面
2. 获取元素(自带的属性)
3. 绑定事件
4. 事件触发之后
4.1 所有的li元素 在指定的时间间隔下 颜色随机变化
4.2 延时器 2秒后 清除定时器
4.3 在清除定时器之后,所有的li背景色复位,随机选一个
主要代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 240px;
margin: 30px auto;
border: 1px solid #ccc;
}
ul li {
width: 60px;
height: 60px;
line-height: 30px;
text-align: center;
margin: 10px;
float: left;
background-color: orange;
color: white;
}
/* 清浮动 */
ul:after {
content: "";
display: block;
clear: both;
}
p {
margin: 20px auto;
text-align: center;
}
.btn {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: none;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>礼品1</li>
<li>礼品2</li>
<li>礼品3</li>
<li>礼品4</li>
<li>礼品5</li>
<li>礼品6</li>
<li>礼品7</li>
<li>礼品8</li>
<li>礼品9</li>
</ul>
<p><button onclick="alert(123)" title="按钮">开始抽奖</button></p>
</div>
</body>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.className = "btn";
// 通过标签名 获取元素
var lis = document.getElementsByTagName("li");
// 为元素绑定单击事件
btn.onclick = function () {
// 禁用按钮
btn.disabled = true;
var timer = setInterval(function () {
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = getColor();
}
}, 100);
// 使用延时器 清除定时器
setTimeout(function (){
clearInterval(timer)
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = "orange"
}
var index = Math.floor( Math.random() * lis.length )
lis[index].style.backgroundColor = "red";
// 启用按钮
btn.disabled = false;
}, 2000)
}
// 随机颜色的函数
function getColor() {
return "#" + Math.random().toString(16).substr(2, 6);
}
</script>
</html>
以上就是JavaScript实现九宫格抽奖功能的示例代码的详细内容，更多关于JavaScript九宫格抽奖的资料请关注我们其它相关文章！
相关推荐
-
js实现九宫格抽奖
本文实例为大家分享了js实现九宫格抽奖的具体代码,供大家参考,具体内容如下 <div id="contaner"> <div id="one">一块钱</div> <div id="two">谢谢惠顾</div> <div id="three">下去写作业</div> <div id="four">一局游戏<
-
原生JavaScript实现九宫格抽奖
本文实例为大家分享了JavaScript实现九宫格抽奖 的具体代码,供大家参考,具体内容如下 思路:通过移动背景颜色实现中奖信息,每一个方形元素,需要按顺序排列,加个延时器,当到最后一个的时候让它从0开始就可以动起来了,!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
-
JS实现简单九宫格抽奖
用JavaScript写一个九宫格的抽奖盘,供大家参考,具体内容如下 点击中间的块,选中奖品的亮块会在边缘的8个块循环: 选中后,弹出选中的内容: 代码参考: HTML文件: <body> <div class="box"> <ul id="jiangPin"> <li><a href="javascript:viod(0);" ><span>奖品 1
-
php+lottery.js实现九宫格抽奖功能
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() function start_lottery(){ if(flag){ //alert('正在抽奖
-
JavaScript实现九宫格抽奖
本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码,供大家参考,具体内容如下 看到个抽奖案例,觉得还不错.就自己做了一个简单版本. 点击中间的开始,抽奖就会跑起来,速度由慢到快,再到慢,最后停下.停下的格子就是中奖的奖品. 主要思路: 1.抽奖的高亮色块轮循,使用一个 class 去控制. 2.要控制色块轮循的速度快慢,要用到计时器 setTimeout,可以控制轮循速度. 3.正在抽奖轮循的时候,开始按钮是不能点击的.所以要用一个变量判断当前是否正在轮循. 4.轮循的次数是一个随
-
原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: <div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>抽奖</div> <div>美的冰箱</div> <
-
原生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{w
-
JavaScript实现九宫格抽奖功能的示例代码
目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch
-
php 实现收藏功能的示例代码
整理文档,搜刮出一个php 实现收藏功能的示例代码,稍微整理精简一下做下分享. HTML: <a class = "x" id="{$photo.id}" uid="{$Think.session.uid}" status = "{$collect_pic}" href = "javascript:void(0);"> <if condition = "$collect_num
-
基于VUE实现的九宫格抽奖功能
先给大家展示下效果图: HTML代码: <template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapp
-
原生JavaScript实现滑动拖动验证的示例代码
本文介绍了原生JavaScript实现滑动拖动验证的示例代码,分享给大家,具体如下: 通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用. 实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现. 现在,你可以在这里 看到完整的源码. 原生实现 原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作. 滑块验证的结构主要分为四个部分:轨道.滑块.背景和文案,我们可以使用下面的 HTML
-
Spring boot+mybatis+thymeleaf 实现登录注册增删改查功能的示例代码
本文重在实现理解,过滤器,业务,逻辑需求,样式请无视.. 项目结构如下 1.idea新建Spring boot项目,在pom中加上thymeleaf和mybatis支持.pom.xml代码如下 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3
-
Android 实现九宫格抽奖功能
效果展示 实现步骤 1.生成抽奖矩形: 其中每个矩形的宽高相同,长度为整个控件宽度的1/3. 代码展示 public class NineLuckPan extends View { private Paint mPaint; private ArrayList<RectF> mRects;//存储矩形的集合 private float mStrokWidth = 5;//矩形的描边宽度 private int mRectSize;//矩形的宽和高(矩形为正方形) private int[]
-
微信小程序实现幸运大转盘功能的示例代码
目录 一.项目展示 二.抽奖页 三.领奖页 一.项目展示 幸运大转盘是一个简单的抽奖小程序 参与用户点击抽奖便可抽取轮盘的奖品 二.抽奖页 抽奖页是一个大轮盘和活动规则 页面形式简单 主要核心在于轮盘 核心代码[轮盘旋转]如下: getLottery: function () { var that = this var awardIndex = Math.random() * 6 >>> 0; // 获取奖品配置 var awardsConfig = app.awardsConfig,
-
Android实现显示和隐藏密码功能的示例代码
在前端中我们知道用javascript就可以可以很容易实现,那么在Android中怎么实现这个功能呢? Java代码 package com.example.test2; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Pa