本次分享JavaScript主要知識點涉及到for循環、if選擇結構判斷語句、數組的定義、定時器、清除定時器、日期對象的使用。
執行后效果圖：
思路：
1.網頁結構搭建： HTML
2.網頁布局美化： CSS
3.隨機功能實現: JavaScript
分析后案例思路圖：
編碼工作：
Html代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基於JavaScript的隨機點名工具</title> </head> <body> <h1>王者榮耀英雄隨機點名系統</h1> <span id="span"></span> <div class="box" id="box"></div> <input type="button" id="btn" value="點名"/> </body> </html>
Css代碼：
body{
background-color: pink;/*整個網頁的背景顏色*/
}
h1{
text-align: center;/*文本居中*/
}
.box{
width: 1000px; /*大盒子寬度10000像素*/
height: 240px; /*大盒子高度240像素*/
margin: 0 auto; /*外邊距：上下的外間距為0 水平(左右)間距 自動居中*/
margin-top: 100px;/* 距離上方的外間距空出100像素*/
clear: both; /*清除浮動*/
}
#btn{
width: 100px; /*按鈕的寬度為100像素*/
height: 30px; /*按鈕的高度為100像素*/
margin-left: 600px;/*按鈕距離左側外邊距為600像素*/
margin-top: 50px; /*按鈕距離上方外邊距為50像素*/
}
.name{ /*name是子節點在js代碼單獨設置的類選擇器*/
width: 100px; /*設置子節點盒子的寬度是100像素*/
height: 30px; /*設置子節點盒子的高度是30像素*/
float: left; /*設置子節點盒子的浮動為向左浮動*/
background-color: antiquewhite;/*設置子節點盒子的背景顏色為“古董白”色*/
margin-left: 10px;/*設置子節點盒子距離左側外邊距為10像素*/
margin-top: 10px; /*設置子節點盒子距離上側外邊距為10像素*/
text-align: center;/*設置子節點盒子中的文本字體為居中顯示*/
line-height: 30px;/*設置子節點盒子中的文本高度為30像素*/
}
#span{ /*日期在單獨的一行中顯示，所以采用行內元素span*/
float: right; /*向左浮動*/
position: relative;/*設置位置為：相對定位。*/
top: 55px; /*上方空出55顯示*/
right: 185px; /*右側空出185像素*/
}
JavaScript代碼：
//1.創造虛擬后台數據
var arrs = ["魯班七號","諸葛亮","后裔","趙雲","女媧","小喬","不知火舞","大喬",
"韓信","亞瑟","孫尚香","孫悟空","孫臏","馬可波羅","廉頗","扁鵲","白起","安琪拉"
,"劉禪","張飛","妲己","甄姬","虞姬","項羽","庄周","黃忠","羋月","鍾馗"
,"劉邦","狄仁傑","王昭君","蔡文姬","花木蘭","蘭陵王","哪吒","姜子牙","武則天","關羽"
,"周瑜","曹操","李白","阿珂","呂布","嬴政","劉備"];
//2.獲取父節點元素
var boxNode = document.getElementById("box");
//2.1循環遍歷所有的數組中的元素，然后創建子節點元素
for (var i = 0; i < arrs.length; i++) {
//通過文檔對象 創建新元素“div”小盒子，使用divNode子節點進行接收
var divNode = document.createElement("div");
//使用子節點divNode向頁面中寫入數組中的每一個元素的名字
divNode.innerHTML=arrs[i];
//使用子節點divNode 調用 css中的類選擇器的name
divNode.className="name";
//使用父節點進行追加子節點
boxNode.appendChild(divNode);
}
//3.點名
// 使用文檔對象通過id獲取元素到btn
var btn= document.getElementById("btn");
// 當按鈕btn被單擊后觸發匿名函數
btn.onclick = function () {
// 如果 選擇的值全等於“點名”二字 則執行下方代碼
if(this.value==="點名"){
//設置定時器：每過100毫秒、執行一次下方的setTimes函數 並使用 timeId進行接收定時后的結果
timeId=setInterval("setTimes()",100);
this.value="停止";//本次按鈕的內容被賦值為停止
}else{//否則
//清除計時器
clearInterval(timeId);// 清除定時器（定時后的結果被清除）
this.value="點名";//本次按鈕的內容被賦值為點名
}
}
// 設置定時器內容函數
function setTimes () {
//遍歷數組中的使用元素
for (var j = 0; j < arrs.length; j++) {
//將父節點數組中的每一個元素的背景顏色清空
boxNode.children[j].style.background="";
}
// 獲取隨機選中的結果
//parseInt() 函數可解析一個字符串,並返回一個整數
//Math.random()是數學函數中的隨機某個數值（可整、可小數）
var random = parseInt(Math.random()*arrs.length);
//將父節點數組中的隨機被選中元素的背景顏色設置為紅/
boxNode.children[random].style.background="red";
}
//4.調用時間
//使用文檔對象通過id獲取元素到span
var spanNode = document.getElementById("span");
//調用獲取時間函數
getTime();
//設置定時器： 每過1秒執行一次 時間函數
setInterval(getTime , 1000);
// 定義 獲取時間 函數
function getTime() {
// 實例化對象： 創建日期對象
var day = new Date();
//通過對象獲取年月日時分秒
var year = day.getFullYear();
var month = day.getMonth()+1;
var dat = day.getDay();
var hours = day.getHours();
var minitues = day.getMinutes();
var second = day.getSeconds();
// 通過 span節點向頁面拼接寫入 年月日時分秒
spanNode.innerHTML =year+"-"+month+"-"+dat+" "+hours+":"+minitues+":"+second;
}
作者： 楊校
出處： https://www.cnblogs.com/xiaoxiao5016
分享是快樂的，也見證了個人成長歷程，文章大多都是工作經驗總結以及平時學習積累，基於自身認知不足之處在所難免，也請大家指正，共同進步。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出, 如有問題， 可郵件（397583050@qq.com）咨詢。