日本不卡不码高清免费观看,久久国产精品久久w女人spa,黄色aa久久,三上悠亚国产精品一区二区三区

您的位置:首頁技術文章
文章詳情頁

js實現隨機點名器精簡版

瀏覽:180日期:2024-05-02 13:26:40

本文實例為大家分享了js實現隨機點名器的具體代碼,供大家參考,具體內容如下

此點名器開始點名后需點擊停止按鈕完成點名,因為是精簡版沒有考慮自動停止需求。姓名數據以字符串形式儲存,適合小范圍點名使用,有大量需求可自己適當改進。

<head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>隨機點名生成</title> <style> /* 頁面css樣式 */ .wrapper { width: 800px; margin: 100px auto; border: 1px solid #ddd; text-align: center; } .box li { vertical-align: top; display: inline-block; width: 100px; height: 50px; border: 2px solid #ddd; border-radius: 15px; text-align: center; line-height: 50px; margin: 5px; } .wrapper button { border: none; width: 100px; height: 50px; border-radius: 10px; cursor: pointer; outline: none; margin-top: 20px; font-weight: bolder; color: #333; background-color: rgb(14, 146, 43); } .wrapper button { display: inline-block; } body { background-color: #eee; } </style></head><body> <div class='wrapper'> <h1 align='center'>隨機點名系統</h2> //實時顯示系統時間標簽 <h6 align='right'></h6> <ul class='box'></ul> <button class='start'>開始</button> <button class='stop'>停止</button> </div></body><script> //定義全局變量方便引用 var boxUl = document.getElementsByClassName(’box’)[0]; var start = document.getElementsByClassName(’start’)[0]; var stop = document.getElementsByClassName(’stop’)[0] var oLi = document.getElementsByTagName(’li’); //數據準備 var nameString = new String('張三,李四,王五,趙六,周七,田八,國九,歸零,張3,李4,王5,趙6,周7,田8,國9,歸0'); var nameArr = nameString.split(','); //獲取每個學生姓名添加到標簽中,自動解析html標簽 var str = ''; for (let i = 0; i < nameArr.length; i++) { str += '<li >' + nameArr[i] + '</li>' } boxUl.innerHTML = str; //添加開始按鈕的點擊事件 var timer = null; start.onclick = function () { // 設置定時器 timer = setInterval(function () { // 根據數組長度范圍生成隨機數 var i = Math.floor(Math.random() * nameArr.length); // 先通過for循環清空所有style屬性 for (var j = 0; j < oLi.length; j++) { oLi[j].removeAttribute('style'); } // 為隨機選擇的li顏色屬性 oLi[i].style.background = 'red'; }, 150); }; // 點擊停止 stop.onclick = function () { // 清空定時器停止點名 clearInterval(timer); } //頁面初始化時間設置 window.onload = function () { datatime(); } //頁面時間動態刷新 setInterval(datatime, 1000); function datatime() { let data = new Date(); let dataString ='現在是北京時間:' + data.toLocaleString(); document.getElementById('data').innerHTML = dataString; }</script>

附一張效果圖

js實現隨機點名器精簡版

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
日本不卡不码高清免费观看,久久国产精品久久w女人spa,黄色aa久久,三上悠亚国产精品一区二区三区
综合视频一区| 中文字幕在线官网| 激情婷婷综合| 激情欧美国产欧美| 喷白浆一区二区| 日韩精品免费一区二区夜夜嗨| 亚洲午夜久久| 国产欧美在线观看免费| 久久精品国产亚洲aⅴ| 都市激情国产精品| 亚洲精品a级片| 日韩精品视频网| 麻豆精品在线播放| 国产66精品| 亚洲精品一二三区区别| 午夜精品影视国产一区在线麻豆| 亚洲伊人影院| 国产精品一区二区99| 日韩国产一区二区| 亚洲欧美日本视频在线观看| 日韩一区二区三区在线看| 欧美黑人做爰爽爽爽| 亚洲黄色免费av| 蜜臀a∨国产成人精品| 久久av国产紧身裤| 日韩在线观看不卡| 婷婷精品在线| 理论片午夜视频在线观看| 国产一区白浆| 国产精品美女午夜爽爽| 国产综合色产| 国产午夜一区| 亚洲大全视频| 国产精品白丝av嫩草影院| 激情欧美丁香| 麻豆一区二区99久久久久| 欧美日韩国产综合网| 久久国产精品免费一区二区三区| 日韩中文首页| 亚洲欧洲免费| 99久久夜色精品国产亚洲1000部| 婷婷视频一区二区三区| 亚洲精品在线影院| 欧美午夜三级| 欧美午夜不卡| 国产一区二区三区日韩精品| 蘑菇福利视频一区播放| 美女视频网站久久| 蜜臀91精品一区二区三区| 91日韩在线| 欧美专区一区| 欧美日韩国产高清| 国产va免费精品观看精品视频| 亚洲精品综合| 国内精品福利| 大香伊人久久精品一区二区| 天堂久久一区| 香蕉成人久久| 欧美日韩精品一本二本三本| 国产精品嫩草99av在线| 国产高潮在线| 日韩精品免费一区二区在线观看| 欧美国产先锋| 久久久久观看| 亚洲一区二区日韩| 亚洲精品国产偷自在线观看| 国产精品蜜芽在线观看| 国产午夜精品一区在线观看| 亚洲制服少妇| 好看不卡的中文字幕| 国产精品久久久久蜜臀| 国产精品一二| 欧美日韩99| 日韩高清在线不卡| 一本综合精品| 蜜桃国内精品久久久久软件9| 国产激情精品一区二区三区| 国产亚洲午夜| 亚洲精品成人| 五月婷婷六月综合| 欧美日韩精品在线一区| 欧美精选视频一区二区| 国产96在线亚洲| 国产成人免费视频网站视频社区| 国产日本精品| 国产欧美一区二区三区国产幕精品| 亚洲综合中文| 蜜芽一区二区三区| 中文字幕一区二区三区四区久久 | 宅男在线一区| 亚洲涩涩在线| 欧美日韩视频网站| 日韩中文首页| 视频一区中文| 午夜在线视频观看日韩17c| 欧美中文日韩| 亚州欧美在线| 青青国产91久久久久久| 久久激情五月婷婷| 国产精品115| 国产精品不卡| 欧美天堂视频| 亚洲午夜精品久久久久久app| 久久精品观看| 伊人久久亚洲美女图片| 石原莉奈在线亚洲三区| 亚洲日本久久| 精品久久免费| 神马日本精品| 国产精品腿扒开做爽爽爽挤奶网站| 99在线精品免费视频九九视| 亚洲一区二区三区四区五区午夜 | 丝袜诱惑一区二区| 欧美羞羞视频| 影院欧美亚洲| 911精品国产| 亚洲一区资源| 亚洲黄页一区| 日本午夜精品视频在线观看| 久久精品一本| 99久久夜色精品国产亚洲1000部| 国产精品日本| 国产精品毛片久久久| 国产成人免费| 女人天堂亚洲aⅴ在线观看| 只有精品亚洲| 久久只有精品| 亚洲欧洲午夜| 国产精品地址| 久久网站免费观看| 日韩中文字幕在线一区| 精品精品国产三级a∨在线| 久久久国产精品一区二区中文| 日韩午夜av| 久久av国产紧身裤| 在线精品小视频| 国产精品99久久免费| 亚洲高清毛片| 欧美日本精品| 亚洲国产专区校园欧美| 视频一区视频二区中文字幕| 国产精品综合色区在线观看| 久久久久中文| 日本va欧美va欧美va精品| 国产精品蜜芽在线观看| 在线一区二区三区视频| 国产精品麻豆久久| 日韩毛片网站| 激情婷婷久久| 国产精品va视频| 亚洲欧美久久| 电影天堂国产精品| 国产精品一页| 亚洲一区二区三区四区电影| 日韩精品中文字幕第1页| 视频一区二区中文字幕| 日韩1区2区| 日韩黄色av| 天堂资源在线亚洲| 精品一区视频| 日韩精品亚洲aⅴ在线影院| 久久久久久黄| 精品久久91| 日韩欧美中文在线观看| 蜜桃成人av| 在线亚洲人成| 国产精品v日韩精品v欧美精品网站 | 精品视频黄色| 婷婷综合国产| 亚洲综合精品| 亚洲先锋成人| 色天使综合视频| 国产一区二区三区视频在线| 欧美亚洲福利| 亚洲精品国产精品粉嫩| 九色精品91| 日韩高清成人| 精品久久国产一区| 国产精品99久久免费观看| 亚洲欧美久久精品| 亚洲深夜影院| 狠狠爱成人网| 久久精品中文| 中文字幕一区久| 国产精品s色| 7777精品| 美国三级日本三级久久99 | 国产日本亚洲| 日本亚洲最大的色成网站www | 水蜜桃久久夜色精品一区| 欧美日韩亚洲一区| 日韩av资源网| 中文精品电影| 免费久久99精品国产自在现线| 亚洲福利国产| 99久久99久久精品国产片果冰| 国产成人精品福利| 成人国产精品一区二区免费麻豆| 国产精品视频一区二区三区四蜜臂| 日本在线一区二区三区|