JS實現(xiàn)課堂隨機點名和順序點名
更新時間：2017年03月09日 08:47:08 作者：北斗星先森
這篇文章主要介紹了基于JS實現(xiàn)課堂隨機點名和順序點名的相關資料，非常不錯，具有參考借鑒價值，需要的朋友參考下
1. 效果：
2. Html代碼：
<body>
<form>
<div align="center">
<input type="button" value="開始點名" onclick="students()" class="ks"/>
<input type="button" value="停止點名" onclick="stop()" class="ks" id="nu"/>
<hr color="blue">
<br>
<div id="div1" align="center">隨機點名區(qū)域</div>
</div>
</form>
</body>
3. JavaScript代碼：
<script type="text/javascript">
var i = 0;
//t用來接收setTimeOut()的返回值
var t;
var st = ['張三','李四', '老王','旺財','鐵柱', '王八','來福','小明','小紅','狗蛋','SB.Child'];
var u;
//點名函數(shù)
function students()
{
//順序點名
/* if (i < st.length)
{
u = st[i];
}
else
{
//點到最后一個就回來重新點起
i = 0;
u = st[i];
}
i = i + 1;
*/
//隨機點名 產(chǎn)生0-數(shù)組長度之間的數(shù)作為數(shù)組下標
var num = Math.floor(Math.random()*st.length);
u = st[num];
//更改文本框顯示的value值
document.getElementById("div1").innerHTML = u ;
t = setTimeout("students()", 1000);
}
//停止點名函數(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實現(xiàn)課堂隨機點名和順序點名，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本文給大家分享了幾個javascript中常用的方法，十分的實用，也很簡單，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因為ie11取消了很多低版本的判斷，很多js都需要修改了，這里簡單介紹下需要的朋友可以參考下2015-12-12
這篇文章主要給大家介紹了關于JS中常見的8種繼承方法,在js中所有的引用類型都繼承了Object,而繼承也是通過原型鏈實現(xiàn)的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
淺析hash特點、hashchange事件介紹及其常見應用場景（不同hash對應不同事件處理、移動端大圖展示狀態(tài)后退頁面問題、原生輕應用頭部后退問題、移動端自帶返回按鈕二次確認問題）,hashchange和popstate事件觸發(fā)條件2023-11-11
JavaScript仿小米官網(wǎng)注冊登錄功能的實現(xiàn)
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)仿小米官網(wǎng)登錄注冊完整功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在微信小程序中使用 Flexbox 布局時,如果遇到 flex-grow 屬性無效的情況,可能是由幾個不同的原因導致的,以下是一些可能的原因和解決方案,感興趣的朋友一起看看吧2024-08-08
這篇文章主要介紹了JS中的三個循環(huán)小結,需要的朋友可以參考下2017-06-06
Nick Justice是GitHub開發(fā)者計劃的一員。早在ES6語言標準發(fā)布之前，他就借助像Babel這樣的轉譯器以及最新版本的瀏覽器在自己的項目中使用ES6特性。他認為，ES6的新特性將極大地改變JavaScript的編寫方式2016-03-03
iframe的onload在Chrome/Opera中執(zhí)行兩次Bug的解決方法
創(chuàng)建iframe對象，添加load事件， 再將iframe添加到body中。Chrome/Opera中會造成load事件的handler執(zhí)行兩次。2011-03-03
JavaScript中有幾種強制類型轉換的方法，可以將一個數(shù)據(jù)類型轉換為另一個數(shù)據(jù)類型，具有一定的參考價值，感興趣的可以了解一下2023-05-05