JS实现抽奖活动程序

本小程序涉及JS知识点
定时器，回调函数，onclick点击事件绑定元素，选择器方式获取元素…

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;margin: 100px auto;}.content {text-align: center;line-height: 100px;font-size: 40px;color: tomato;border: 1px solid rgb(205, 138, 50);border-bottom: 0;}.box button {width: 100%;padding: 20px;border: 1px solid #ccc;background-color: rgb(82, 83, 170);font-size: 35px;outline: none;}</style>
</head>
<body><div class="box"><h2>谷阳北路全家咖啡饮料抽奖活动!</h2><div class="content">原味拿铁</div><button>开始</button></div><script>// 获取到button元素var btn = document.querySelector('.box button')// 获取content元素var contentnode = document.querySelector('.content')// 创建数组var nameList = ['香草拿铁', '美式', '焦糖', '蜂蜜柚子', '橙子', '纯牛奶', '红牛', '元气森林']// 声明定时器标记，默认是停止状态var intervalID = null;//还没有点击之前，“开始”其实是停止状态// 给元素绑定事件，点击开始按钮触发事件,就调用回调函数。btn.onclick = function () {// 判断此刻定时器是否开启if (intervalID) {//定时器是开启状态// 按钮文字改回来btn.innerHTML = '开始';// 清除定时器(为什么？)clearInterval(intervalID)// 定时标记变量变化intervalID = null;} else {//定时器是关闭状态// 修改按钮文字btn.innerHTML = '停止';// 开启定时器(非常重要一环，为什么要在这里开？)intervalID = setInterval(function () {// 取随机数作为数组元素索引var index = Math.floor(Math.random() * nameList.length);//    根据随机的索引从数组中 获取元素contentnode.innerHTML = nameList[index]},100)console.log(intervalID)}}</script>
</body>
</html>

JS实现抽奖活动程序相关推荐

前端js计算抽奖概率
很好用的js计算抽奖概率的公式 let weightList = [20, 8, 30, 50, 80, 10] // 权重数组 weightList = [...weightList, 0, 0] ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
年会抽奖源码html js,js年会抽奖程序
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. 年会抽奖用.嘉宾入场后一一在线拍照,照片入库后,可以对照片进行抽奖. 代码托管在开源中国, ...
html抽奖怎么重置,js实现抽奖的两种方法
本文实例为大家分享了js实现抽奖的具体代码,供大家参考,具体内容如下抽奖活动的原理还是很简单的,通过代码一目了然,如果看不懂就私聊我,可以私下交流! 方法一:使用table写一个随机抽奖这是htm ...
html+css+js写抽奖程序
html+css+js写抽奖程序简介:本文讲解,如何使用html+css+js写抽奖程序,后面也会加上后端,记录每一次的抽奖的结果. HTML结构这个html结构就十分的简单,几行而已. < ...
php 随机数抽奖页面,源生JS做出抽奖页面
这次给大家带来源生JS做出抽奖页面,源生JS做出抽奖页面的注意事项有哪些,下面就是实战案例,一起来看一下. 效果图: 图片素材 : 代码如下,复制即可使用: 幸运抽奖页面 /*CSS代码*/ *{ p ...
html+css+js实现抽奖功能
html+css+js实现抽奖功能一.代码 <!DOCTYPE html> <html lang="en"> <head><meta c ...
js年会抽奖_嘿！这真的是一个正经的抽奖程序！
编者按:本文作者奇舞团团长月影奇舞团有一个传统项目,每年年会由我在现场写一个抽奖程序,所有人一起review代码,以确保抽奖算法正确且公平,然后愉快滴开始抽奖. 现场写的抽奖程序不仅要公平无bug, ...
jquery.rotate.js 转盘抽奖示例
使用jquery.rotate.js 插件简单的转盘抽奖示例: 1.引入jQuery和jquery.rotate.js插件 <script src="static/js/jquery. ...

JS实现抽奖活动程序

JS实现抽奖活动程序相关推荐

最新文章

热门文章