基于JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器的具體代碼，供大家參考，具體內(nèi)容如下
HTML代碼：
<body> <h1>點(diǎn)名啦</h1> <div id='did'> <input type='button' value='隨機(jī)點(diǎn)名器'><br> <input type='submit' onclick='doClick()' value='開(kāi)始'> </div></body>
CSS代碼：
<style> * { margin: 0px; padding: 0px; } body { background-color: rgb(255, 249, 249); } h1 { text-align: center; padding-top: 100px; color: rgba(250, 54, 129, 0.562); } #did { position: relative; width: 200px; margin: 60px auto; } #did input:first-child { width: 200px; height: 60px; background-color: rgba(250, 54, 129, 0.562); /* 不要邊框或設(shè)邊框?yàn)橥该?*/ border: none; border-radius: 20px; font-size: 25px; color: #fff; box-shadow: 0px 0px 3px 3px rgba(250, 54, 129, 0.158); /* 點(diǎn)擊時(shí)邊框消失 */ outline: 0; } #did input:nth-last-child(1) { width: 100px; height: 40px; margin: 40px 50px; background-color: rgba(250, 54, 129, 0.562); border: 1px solid transparent; background-color: rgba(255, 68, 177, 0.432); border-radius: 15px; box-shadow: 0px 0px 2px 2px rgba(250, 54, 129, 0.158); font-size: 17px; color: #333; outline: 0; transition: color 0.2s ease-out; transition: box-shadow 0.2s ease-out; } #did input:nth-last-child(1):hover { color: #fff; cursor: pointer; box-shadow: 0px 0px 4px 4px rgba(250, 54, 129, 0.158); }</style>
JavaScript代碼：
<script> var rollcall = document.getElementById('rollcall-id'); var action = document.getElementById('action-id'); var h1 = document.getElementsByTagName('h1'); //不能用name,用name只會(huì)取得一個(gè)字符 var allName = ['張柳菲', '高穎影', '趙溫言', '李穎', '鄧辰希', '莫若鄰', '秦橙', '吳筱宇', '趙希', '馬素瀅', '呂沁雅', '羅鴻哲', '夏素蕓', '謝焱之', '曹夢(mèng)朦', '李允書(shū)', '周楓橋', '孫浩', '江雁菁', '楊振凱', '林舒言', '錢(qián)妙妙', '郭景', '杜貝貝', '童閔然', '鐘小凌', '韓云韻', '白然之']; //隨機(jī)產(chǎn)生一個(gè)名字 function stringRandom() { return parseInt(Math.random() * allName.length); } var time = null; var luckName; //開(kāi)始 function doStart() { if (time == null) { time = setInterval(function () { //獲取隨機(jī)點(diǎn)名的值 luckName = allName[stringRandom()]; rollcall.setAttribute('value', luckName); }, 100); } } //停止 function doStop() { if (time != null) { clearInterval(time); time = null; } } //點(diǎn)擊事件 function doClick() { if (action.value == '開(kāi)始') { //改變樣式 action.style.backgroundColor = '#cecece'; action.style.boxShadow = '0px 0px 2px 2px rgba(100, 100, 100, 0.4)'; action.value = '停止'; h1[0].innerHTML = '點(diǎn)名啦'; //開(kāi)始隨機(jī)點(diǎn)名 doStart(); } else if (action.value == '停止') { action.style.backgroundColor = 'rgba(255, 68, 177, 0.432)'; action.style.boxShadow = '0px 0px 2px 2px rgba(250, 54, 129, 0.158)'; action.value = '開(kāi)始'; h1[0].innerHTML = '恭喜' + luckName + '同學(xué)獲得一次發(fā)言機(jī)會(huì)'; //停止 doStop(); } }</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. IntelliJ IDEA設(shè)置背景圖片的方法步驟2. 利用php來(lái)自動(dòng)調(diào)用不同服務(wù)器上的flash3. Python TestSuite生成測(cè)試報(bào)告過(guò)程解析4. PHP基礎(chǔ)之流程控制3——while/do-while5. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法6. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法7. 簡(jiǎn)述JAVA同步、異步、阻塞和非阻塞之間的區(qū)別8. python操作數(shù)據(jù)庫(kù)獲取結(jié)果之fetchone和fetchall的區(qū)別說(shuō)明9. 解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)題10. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
網(wǎng)公網(wǎng)安備