使用JavaScript怎么實(shí)現(xiàn)一個(gè)課堂隨機(jī)點(diǎn)名系統(tǒng)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)課堂隨機(jī)點(diǎn)名系統(tǒng)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

萊州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

style樣式

<style>
 .cor {
  background-color: #6083cd;
 }
 #box {
  width: 500px;
  border: 2px solid black;
  margin: 0 auto;
  height: 500px;
 }
 ul {
  list-style: none;
 }
 li {
  width: 50px;
  height: 50px;
  margin: 20px;
  float: left;
  line-height: 50px;
  text-align: center;
 }
 .center {
  width: 156px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
 }
 #pp {
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 35px;
 
 }
 </style>

body排列

<div id="box">
 <h2 >點(diǎn)名系統(tǒng)</h2>
 <div class="center">
  <input type="button" value="開始點(diǎn)名" id="btn">
  <input type="button" value="停止點(diǎn)名" id="btn2">
 </div>
 <span id="pp"></span>
 <div id="dv">
 </div> 
 </div>

js代碼

<script>
 function my$(id){
  return document.getElementById(id);
 }
 
 
 //定義數(shù)組，存放數(shù)值
 var arr = ["卓子賢","梁圖","袁紹思","張家磊","梁文龍","方志豪","曾勇強(qiáng)","陳文"];
 
 //先創(chuàng)建一個(gè)ul加入到名字為dv的div中
 var oul = document.createElement("ul"); 
 my$("dv").appendChild(oul);
 //接下來(lái)遍歷arr數(shù)組，動(dòng)態(tài)創(chuàng)建li元素并且加入到ul中，并且把數(shù)組變量動(dòng)態(tài)寫到li中
 for(var i=0;i<arr.length;i++){
 oli = document.createElement("li");
 oul.appendChild(oli);
 oli.innerHTML = arr[i];
 }
 
 //先獲取到所有的li，為下面的應(yīng)用css樣式做鋪墊
 var oli = oul.getElementsByTagName("li");
 
 var timer;//這里先定義一個(gè)變量，開啟定時(shí)器再賦值，
 //為鼠標(biāo)注冊(cè)點(diǎn)擊事件
 my$("btn").onclick=function (){
  clearInterval(timer);//在開啟定時(shí)器之前先清除定時(shí)器，避免出現(xiàn)用戶多次點(diǎn)擊開啟多個(gè)定時(shí)器而關(guān)不掉。
  //開啟定時(shí)器并賦值給變量
  timer = setInterval(function (){
  var num = parseInt(Math.random()*arr.length);
  console.log(num);
  //這里遍歷所有的li元素，在開啟定時(shí)器之前先把所有的li的樣式清除掉
  //如果這里不清除，那么所有的li在下一步都會(huì)全部應(yīng)用上css樣式，
  //全部都會(huì)高亮顯示,無(wú)法實(shí)現(xiàn)排他效果
  for(var i=0;i<oli.length;i++){
   oli[i].className = "";
  }
  oli[num].className = "cor";
  //將生成的隨機(jī)數(shù)動(dòng)態(tài)顯示到span中，將最后所選擇的數(shù)組名顯示到span中
  my$("pp").innerHTML = arr[num];
  //console.log(arr[num]);
  },100);
 }
 //停止點(diǎn)名按鈕。
 my$("btn2").onclick=function (){
  clearInterval(timer);
 }
 
</script>

上述就是小編為大家分享的使用JavaScript怎么實(shí)現(xiàn)一個(gè)課堂隨機(jī)點(diǎn)名系統(tǒng)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：使用JavaScript怎么實(shí)現(xiàn)一個(gè)課堂隨機(jī)點(diǎn)名系統(tǒng)
鏈接地址：http://muchs.cn/article38/pppesp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、ChatGPT、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)