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