最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS实现课堂随机点名和顺序点名
时间:2017-06-12 编辑:简简单单 来源:一聚教程网
1. 效果:
2. Html代码:
代码如下 | 复制代码 |
3. JavaScript代码:
代码如下 | 复制代码 |
vari = 0; //t用来接收setTimeOut()的返回值 vart; varst = ['张三','李四','老王','旺财','铁柱','王八','来福','小明','小红','狗蛋','SB.Child']; varu; //点名函数 functionstudents() { //顺序点名 /* if (i < st.length) { u = st[i]; } else { //点到最后一个就回来重新点起 i = 0; u = st[i]; } i = i + 1; */ //随机点名 产生0-数组长度之间的数作为数组下标 varnum = Math.floor(Math.random()*st.length); u = st[num]; //更改文本框显示的value值 document.getElementById("div1").innerHTML = u ; t = setTimeout("students()", 1000); } //停止点名函数 functionstop() { clearTimeout(t); }
|
4. 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; } |
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28