日期: 2020-06-22 17:46:31
本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下
抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！
方法一：使用table写一个随机抽奖
这是html+js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/test2.css" >
<title>抽奖</title>
</head>
<body>
<div class="content">
<div class="top">
抽奖活动
</div>
<div class="body">
<table>
<tr>
<th>百度</th>
<th>腾讯</th>
<th>阿里</th>
<th>京东</th>
<th>华为</th>
</tr>
<tr>
<th>滴滴</th>
<th>蚂蚁金服</th>
<th>乐视</th>
<th>中国电网</th>
<th>中石化</th>
</tr>
<tr>
<th>美团</th>
<th>乐视</th>
<th>小米</th>
<th>网易</th>
<th>酷我</th>
</tr>
<tr>
<th>爱奇艺</th>
<th>盛大</th>
<th>短文学</th>
<th>浅墨诗韵</th>
<th>浪子一秋</th>
</tr>
</table>
</div>
<div class="bottom">
<input type="button" name="" id="button" class="button" value="开始" onclick="toStart(this)">
</div>
</div>
</body>
<script type="text/javascript">
var timer;
var button = document.querySelector("#button");
function toStart() {
// 启动定时器
if (timer == undefined) {
timer = setInterval(changeStyle, 100);
button.setAttribute("value", "停止");
} else {
clearInterval(timer);
timer = undefined;
button.setAttribute("value", "开始");
}
}
// 改变样式
var a, b;
function changeStyle() {
var tb = document.querySelector("table");
console.log(a);
if (a != undefined) {
tb.rows[a].cells[b].style.backgroundColor = "white";
}
//
// 获取要操作的元素
a = parseInt(Math.random() * 4);
b = parseInt(Math.random() * 5);
// console.log(a);
var col = tb.rows[a].cells[b];
col.style.backgroundColor = "red";
}
</script>
</html>
方法二：使用span标签写
html+js代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/test2.css" >
<title>抽奖</title>
</head>
<body>
<div class="content">
<div class="top">
抽奖活动
</div>
<div class="body" id="body">
</div>
<div class="bottom">
<input type="button" name="" id="button" class="button" value="开始" onclick="toStart()">
</div>
</div>
</body>
<script type="text/javascript">
// 获取要操作的元素
var div = document.getElementById("body");
// 动态添加span
for (var i = 0; i < 25; i++) {
// 创建一个新的标签
var el = document.createElement("span");
// 给标签设置内容
el.innerText = i;
// 添加子元素
div.appendChild(el);
}
var timer;
var button = document.querySelector("#button");
function toStart() {
// 启动定时器
if (timer == undefined) {
timer = setInterval(changeStyle, 100);
button.setAttribute("value", "停止");
} else {
clearInterval(timer);
timer = undefined;
button.setAttribute("value", "开始");
}
}
// 改变样式
var selection;
function changeStyle() {
var spans = document.getElementsByTagName("span");
if (selection != undefined) {
console.log(selection);
spans[selection].style.backgroundColor = "white";
}
selection = parseInt(Math.random() * 25);
var spans = document.getElementsByTagName("span");
var selectSpan = spans[selection];
selectSpan.style.backgroundColor = "red";
}
</script>
</html>
两个页面的css代码
*{
margin: 0;
padding: 0;
}
body{
display: block;
}
.content{
width: 500px;
margin: auto;
}
.top{
text-align: center;
height: 50px;
color: red;
font-size: 30px;
}
table{
width: 100%;
border: 1px solid red;
border-spacing: 0;
}
th{
border: 1px dashed rgb(189, 189, 86);
height: 40px;
}
.bottom{
height: 50px;
margin-top: 20px;
text-align: center;
}
.button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* test2-1 */
.body{
width: 512px;
height: 260px;
border: 1px solid red;
}
span{
display: inline-block;
width: 100px;
height: 50px;
border: 1px dashed #b1da1f;
line-height: 50px;
text-align: center;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持奥多码。
