溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
