js实现简单的抽奖系统
更新时间：2022年03月09日 11:56:53 作者：か逸辰か
这篇文章主要为大家详细介绍了js实现简单的抽奖系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个用js编写的简单的抽奖系统，供大家参考，具体内容如下
效果图如图所示：字节带闪动，点击开始，可进行抽奖，并且按钮变为结束按钮，然后点击结束按钮，可以结束，并抽奖成功。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style type="text/css">
table {
width: 400px;
height: 400px;
border: gray solid 1px;
border-collapse: collapse;
text-align: center;
margin: 0 auto;
margin-top: 100px;
}
.td {
border: gray solid 1px;
background-color: lightskyblue;
}
.td1 {
border: gray solid 1px;
background-color: red;
}
td:hover {
background-color: cornflowerblue;
}
div {
width: 100px;
height: 40px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
#btn {
width: 100px;
height: 40px;
}
#blink{
width: 300px;
height: 90px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
font-size: 70px;
font: "微软雅黑";
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="blink">
抽 奖 了
</div>
<table>
</table>
<div>
<input type="button" id="btn" value="开始" onclick="click1()" />
</div>
</body>
<script type="text/javascript">
/*利用二维数据+dom操作*/
var interval = 0;
var table = document.querySelector("table");
var arr = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20],
[21, 22, 23, 24, 25]
]
for(var i in arr) {
var tr = table.insertRow();
for(var j in arr[i]) {
var td = tr.insertCell();
td.setAttribute("class", "td");
td.innerHTML = arr[i][j];
}
}
//获取所有的td标签数组
var count = document.querySelectorAll("td");
function click1() {
//找到当前按钮
var btn = document.querySelector("#btn");
//判断按钮状态
if(btn.value == '开始') {
//点解后修改背景颜色
btn.style.backgroundColor = "red";
//修改按钮文字
btn.value = "结束";
//停止继续调用setInterval函数进行抽奖
clearInterval(interval);
interval = setInterval(function() {
var rad = Math.floor(Math.random() * 25);
for(var i = 0; i < count.length; i++) {
//通过遍历来重新给表设置样式
count[i].setAttribute("class", "td");
if(rad === i) {
//给抽到的人改变样式
count[i].setAttribute('class', 'td1');
}
}
}, 100)
} else {
//设置背景颜色
btn.style.backgroundColor = "gainsboro";
//修改按钮文字
btn.value = "开始";
clearInterval(interval);
}
}
function changeColor() {
var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color = color.split("|");
document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
}
setInterval("changeColor()", 200);
</script>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript滚动条属性scrollTop和scrollHeight
在开发中我们常常会用到判断滚动条是否触底的逻辑,我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight,这篇文章主要给大家介绍了关于JavaScript滚动条属性scrollTop和scrollHeight的相关资料,需要的朋友可以参考下2023-11-11
现在使用手机上网的人越来越多，一些下载网站会通过判断不同系统手机来访问不同网页，比如iPhone和Android。下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问2015-07-07
今天小编就为大家分享一篇解决layui 复选框等内置控件不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现扯网动画效果，文中的示例代码讲解详细，对我们学习JS有一定的帮助，需要的可以参考一下2022-06-06
这篇文章主要介绍了ES6使用Set数据结构实现数组的交集、并集、差集功能,结合实例形式分析了ES6中Set数据结构的相关函数与实现数组交集、并集、差集的相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了JS实现页面数据懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
我们做项目的时候往往会需要把数组里面一些重复的项去掉,下面这篇文章主要给大家介绍了关于js数组去重常见的7种方法汇总,对每种方法都进行了总结,需要的朋友可以参考下2022-08-08
这篇文章介绍了JS增加行复制行删除行的实现代码，有需要的朋友可以参考一下2013-11-11
这是关于asp知识整理的第二份笔记，只有把最基础的问题搞清楚了，才能更好的学习ASP编程。2015-09-09
Driver.js是一个引导插件，本文主要介绍了Driver.js前端引导页组件的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论