快捷導(dǎo)航

js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)

更新時(shí)間：2019年11月21日 08:45:55 作者：一名正在努力的前端小白

這篇文章主要介紹了js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js隨機(jī)點(diǎn)名系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下

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">
 <h1 style="text-align:center">點(diǎn)名系統(tǒng)</h1>
 <div class="center">
  <input type="button" value="開(kāi)始點(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)寫(xiě)到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è)變量，開(kāi)啟定時(shí)器再賦值，
 //為鼠標(biāo)注冊(cè)點(diǎn)擊事件
 my$("btn").onclick=function (){
  clearInterval(timer);//在開(kāi)啟定時(shí)器之前先清除定時(shí)器，避免出現(xiàn)用戶多次點(diǎn)擊開(kāi)啟多個(gè)定時(shí)器而關(guān)不掉。
  //開(kāi)啟定時(shí)器并賦值給變量
  timer = setInterval(function (){
  var num = parseInt(Math.random()*arr.length);
  console.log(num);
  //這里遍歷所有的li元素，在開(kāi)啟定時(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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: