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="開始點(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本文給大家分享了幾個(gè)javascript中常用的方法，十分的實(shí)用，也很簡(jiǎn)單，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因?yàn)閕e11取消了很多低版本的判斷，很多js都需要修改了，這里簡(jiǎn)單介紹下需要的朋友可以參考下2015-12-12
這篇文章主要給大家介紹了關(guān)于JS中常見的8種繼承方法,在js中所有的引用類型都繼承了Object,而繼承也是通過(guò)原型鏈實(shí)現(xiàn)的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
hash特點(diǎn)、hashchange事件介紹及其常見應(yīng)用場(chǎng)景
淺析hash特點(diǎn)、hashchange事件介紹及其常見應(yīng)用場(chǎng)景（不同hash對(duì)應(yīng)不同事件處理、移動(dòng)端大圖展示狀態(tài)后退頁(yè)面問題、原生輕應(yīng)用頭部后退問題、移動(dòng)端自帶返回按鈕二次確認(rèn)問題）,hashchange和popstate事件觸發(fā)條件2023-11-11
JavaScript仿小米官網(wǎng)注冊(cè)登錄功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)JavaScript實(shí)現(xiàn)仿小米官網(wǎng)登錄注冊(cè)完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
在微信小程序中使用 Flexbox 布局時(shí),如果遇到 flex-grow 屬性無(wú)效的情況,可能是由幾個(gè)不同的原因?qū)е碌?以下是一些可能的原因和解決方案,感興趣的朋友一起看看吧2024-08-08
這篇文章主要介紹了JS中的三個(gè)循環(huán)小結(jié),需要的朋友可以參考下2017-06-06
Nick Justice是GitHub開發(fā)者計(jì)劃的一員。早在ES6語(yǔ)言標(biāo)準(zhǔn)發(fā)布之前，他就借助像Babel這樣的轉(zhuǎn)譯器以及最新版本的瀏覽器在自己的項(xiàng)目中使用ES6特性。他認(rèn)為，ES6的新特性將極大地改變JavaScript的編寫方式2016-03-03
iframe的onload在Chrome/Opera中執(zhí)行兩次Bug的解決方法
創(chuàng)建iframe對(duì)象，添加load事件， 再將iframe添加到body中。Chrome/Opera中會(huì)造成load事件的handler執(zhí)行兩次。2011-03-03
JS中強(qiáng)制類型轉(zhuǎn)換的實(shí)現(xiàn)
JavaScript中有幾種強(qiáng)制類型轉(zhuǎn)換的方法，可以將一個(gè)數(shù)據(jù)類型轉(zhuǎn)換為另一個(gè)數(shù)據(jù)類型，具有一定的參考價(jià)值，感興趣的可以了解一下2023-05-05