原生js實現簡單的隨機點名系統
阿新 • • 發佈：2019-03-31
create 定時 oat alert name idt 顏色 理工大學 time
<!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">
<title>Document</title>
<style>
.box{
width: 500px;
height: 60px;
border:1px solid #ccc;
text-align: center;
line-height:60px;
margin:10px;
background-color: gray;
float: left;
}
</style>
</head>
<body onload="init()">
<button onclick="start()">隨機點名開始</button>
<button onclick = "end() ">隨機點名結束</button>
<div id="path"></div>
</body>
<script>
// 實現隨機點名系統第一步就需要建立一個數組
var arr = [‘四川大學‘,‘我的大學‘,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘,‘四川理工大學‘,
‘四川科技大學‘,‘四川輕化工大學‘,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘
,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘
,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘,‘四川理工大學‘,‘四川科技大學‘,‘四川輕化工大學‘,‘四川輕化工大學‘];
// 設置一個索引值
var index = -1;//這個必須要是-1的，只有這樣隨機點名的效果才會出現
// 設置一個頂點事件段，用來停止用
var time;
// 遍歷數組，能夠實現簡單的功能
// 當頁面初次進行加載的時候
function nowSend() {
if(index != -1) {
//將上一個選中的div的背景還原
document.getElementById("id" + index).style.backgroundColor = "gray";
}
//隨機數
var num = Math.floor(Math.random() * arr.length);
index = num; //記錄被選中的div的id
//獲取對應的div
var div = document.getElementById("id" + num);
//設置背景顏色
div.style.backgroundColor = "red";
}
// 隨機點名開始
function start() {
// 要想要】跑起來，可以直接在裏面設置一個定時器
time = setInterval(‘nowSend()‘,100);
}
// 隨機點名結束
function end() {
// 可以直接在裏面放一個清除定時器的
clearInterval(time);
alert(‘接下來由‘+arr[index]+‘學生代表上臺進行演講‘)
}
// 初始化操作
function init() {
//將數組顯示在頁面上
for(var i = 0; i < arr.length; i++) {
//獲取父容器
var fa = document.getElementById("path");
//創建小div
var div = document.createElement("div");
//設置id屬性,方便尋找
div.id = "id" + i;
div.className = "box"; //方便給小div設置樣式
//設置小div中顯示的內容
div.innerHTML = arr[i];
//將小div放在父容器中
fa.appendChild(div);
}
}
</script>
</html>
原生js實現簡單的隨機點名系統