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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章为大家分享了js鼠标点击图片切换效果实现代码，特别炫酷的效果，具有一定的参考价值，推荐给大家，感兴趣的小伙伴们可以参考一下2015-11-11
本节主要介绍了用javascript对一个json数组深度赋值的具体实现，需要的朋友可以参考下2014-07-07
浅析使用BootStrap TreeView插件实现灵活配置快递模板
这篇文章主要介绍了使用bootstrap-treeview插件实现灵活配置快递模板的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了JS小游戏之宇宙战机源码,是一款非常经典的游戏源码,包含了游戏设计中比较常见的逻辑处理,本文附带了该游戏的完整源码,需要的朋友可以参考下2014-09-09
JavaScript 程序错误Cannot use ''in'' operator to search的解决方法
下面小编就为大家带来一篇JavaScript 程序错误Cannot use 'in' operator to search的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
需要检查用户是否修改了一个表单中的内容，可以使用本文提供的方法，如果修改了表单的内容则返回true，没修改则返回false，有需求的朋友可以参考下2013-07-07
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
JavaScript 指定宽度高度的无间断滚动实现代码，这样的效果适合作为焦点新闻的轮播显示。2010-03-03
这篇文章主要介绍了js实现的类似于asp数据字典的数据类型代码实例,即js实现的字典数据类型,需要的朋友可以参考下2014-09-09
JavaScript 定义类或对象,javascript步入高手行列必须要了解的。2009-12-12
做项目时遇到一个数据表需要展示，由于坚定着使用合理标签表示合适内容，于是使用了table，悲剧开始了。2010-01-01
最新评论