快捷導(dǎo)航

JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名

更新時(shí)間：2017年03月09日 08:47:08 作者：北斗星先森

這篇文章主要介紹了基于JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

1. 效果：

2. Html代碼：

<body>
<form>
  <div align="center">
    <input type="button" value="開(kāi)始點(diǎn)名" onclick="students()" class="ks"/>
    <input type="button" value="停止點(diǎn)名" onclick="stop()" class="ks" id="nu"/>
    <hr color="blue">
    <br>
    <div id="div1" align="center">隨機(jī)點(diǎn)名區(qū)域</div>
  </div>
</form>
</body>

3. JavaScript代碼：

<script type="text/javascript">
    var i = 0;
    //t用來(lái)接收setTimeOut()的返回值
    var t;
    var st = ['張三','李四', '老王','旺財(cái)','鐵柱', '王八','來(lái)福','小明','小紅','狗蛋','SB.Child'];
    var u;
    //點(diǎn)名函數(shù)
    function students()
    {
      //順序點(diǎn)名
    /*  if (i < st.length)
      {
        u = st[i];
      }
      else
      {
        //點(diǎn)到最后一個(gè)就回來(lái)重新點(diǎn)起
        i = 0;
        u = st[i];
      }
      i = i + 1;
*/
      //隨機(jī)點(diǎn)名 產(chǎn)生0-數(shù)組長(zhǎng)度之間的數(shù)作為數(shù)組下標(biāo)
      var num = Math.floor(Math.random()*st.length);
      u = st[num];
      //更改文本框顯示的value值
      document.getElementById("div1").innerHTML = u ;
      t = setTimeout("students()", 1000);
    }
    //停止點(diǎn)名函數(shù)
    function stop()
    {
      clearTimeout(t);
    }
    </script>

4. CSS代碼：

<style type="text/css">
  body{
    background: #f5faff;
  }
  .ks{
    width: 140px;
    line-height: 55px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-shadow:2px 2px 2px #333;
    border-radius: 5px;
    margin:0 20px 20px 0;
    position: relative;
    overflow: hidden;
    background-color: limegreen;
    border:1px solid #d2a000;
    box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
  }
  #nu{
    background-color: red;
  }
  #div1 { font:40px '微軟雅黑';text-align: center; background-color: gainsboro;
    width: 60%;
    height: 60%;
    margin-bottom:20px;
  }
</style>

以上所述是小編給大家介紹的JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

在一個(gè)js文件里遠(yuǎn)程調(diào)用jquery.js會(huì)在ie8下的一個(gè)奇怪問(wèn)題
這樣的腳本你在ie8下調(diào)用，在ie8地址欄下按下回車(chē)后調(diào)用jquery的對(duì)像、方法什么的沒(méi)有問(wèn)題，但是刷新之后就有問(wèn)題。就是刷新之后無(wú)論怎樣你要在地址欄按一下回車(chē)。
2010-11-11
Javascript 靜態(tài)頁(yè)面實(shí)現(xiàn)隨機(jī)顯示廣告的辦法
最近在做私服發(fā)布站時(shí)，客戶要求實(shí)現(xiàn)廣告隨機(jī)排序，而且要求在html頁(yè)面實(shí)現(xiàn)，也就是說(shuō)必須使用javascript來(lái)完成了。
2010-11-11
JavaScript 手動(dòng)實(shí)現(xiàn)instanceof的方法
instanceof運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上，本文重點(diǎn)給大家介紹JavaScript手動(dòng)實(shí)現(xiàn)instanceof的問(wèn)題，感興趣的朋友跟隨小編一起看看吧
2021-10-10
javascript實(shí)現(xiàn)的字符串轉(zhuǎn)換成數(shù)組操作示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的字符串轉(zhuǎn)換成數(shù)組操作,涉及javascript字符串與數(shù)組相互轉(zhuǎn)換、以及數(shù)組反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
JavaScript中split()方法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中split()方法的相關(guān)資料,split()方法在js處理字符串是很常見(jiàn),也是很重要的一種方法必須熟練掌握,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
JS Canvas接口和動(dòng)畫(huà)效果大全
這篇文章主要介紹了JS Canvas接口和動(dòng)畫(huà)效果大全，對(duì)Canvas感興趣的同學(xué)，可以參考下
2021-04-04
微信小程序?qū)崿F(xiàn)加入購(gòu)物車(chē)滑動(dòng)軌跡
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)加入購(gòu)物車(chē)滑動(dòng)軌跡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
微信小程序彈窗輸入組件的實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序彈窗輸入組件的實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
JavaScript.The.Good.Parts閱讀筆記（一）假值與===運(yùn)算符
JavaScript 假值與===運(yùn)算符，學(xué)習(xí)js的朋友可以看下。
2010-11-11
javascript 加入收藏、設(shè)為首頁(yè)(IE,firefox兼容腳本之家版)
網(wǎng)上流行很多的加入收藏、設(shè)為首頁(yè)等功能代碼，但各方面不是很完善，特腳本之家編輯特為大家準(zhǔn)備了可以直接使用的代碼。
2009-11-11