本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下

抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！

方法一：使用table写一个随机抽奖

这是html+js代码

抽奖

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";

}

方法二：使用span标签写

html+js代码如下

抽奖

// 获取要操作的元素

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";

}

两个页面的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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。