案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript相關知識，做一個隨機點名的案例，你可以通過點擊開始按鈕控制上方名字的閃動，點擊停止按鈕可以隨機選定一個名字，
案例演示
運行程式后，我們可以看到一個矩形框按鈕，顯示開始點名，點擊后名字隨機閃動，同時按鈕變成停止點名，再次點擊按鈕，會隨機出現一個名字，也就是"天選之子"，
原始碼學習
HTML主要就是兩個盒子模型，用于存放姓名陣列和點擊按鈕，
<body background="../images/背景圖片.jpg">
<!-- 有個小院-興趣編程 -->
<!-- 點名的大盒子 -->
<div id="ready">天選之子,你準備好了嗎?</div>
<div id="start" onclick="doit()">開始點名</div>
<!-- 引入js檔案 -->
<script src="https://www.cnblogs.com/xFeater/archive/2022/11/js/index.js" type="text/javascript"></script>
</body>
接下來是核心javascript代碼，定義一個承載名字的陣列，定時器初始化為null，開始點名按鈕的點擊事件doit()，根據getElementById()方法獲取對應組件，用if()判斷若時間為空，則開啟點名事件show()同時通過innerHTML屬性回傳開始和結束標簽之間的 HTML，否則清除定時器，show()函式主要是獲取名字陣列，并通過下標隨機生成名字，setTimeout()函式是表示1s后執行show()函式，
var names=["點不到我","李明","劉子揚","黃花菜","鄭華","李詢","白敬亭","王一博"];
var time=null;
function doit(){
var button=window.document.getElementById("start");
if(time==null){
// innerHTML 屬性設定或回傳表格行的開始和結束標簽之間的 HTML
button.innerHTML="停止點名";
show();
}else{
button.innerHTML="開始點名";
clearInterval(time);
time=null;
}
}
function show(){
var box=window.document.getElementById("ready");
var num=Math.floor(Math.random()*100000)%names.length;
box.innerHTML=names[num];
time=setTimeout("show()",1);
}
關注我，跟著我每天學習一點點，讓你不在枯燥，不在孤單..
學會這個隨機點名器，上課還怕被提問？
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例，編程/就業/副業/創業/資源，
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538768.html
標籤：其他