<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: hotpink;
}
.box{
width: 1000px;
height: 240px;
margin: 0 auto;
margin-top: 100px;
clear: both;
}
#btn{
width: 100px;
height: 30px;
margin-left: 600px;
margin-top: 50px;
}
.name{
width: 100px;
height: 30px;
float: left;
background-color: antiquewhite;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 30px;
}
#span{
float: right;
position: relative;
top: 55px;
right: 185px;
}
h1{
text-align: center;
}
</style> </head>
<body>
<h1>随机点名系统</h1>
<span id="span"></span>
<div class="box" id="box"></div>
<input type="button" id="btn" value="点名"/>
<script type="text/javascript">
//创造虚拟后台数据
var arrs = ["崔雪莉","郭雪芙","嘉歆","阿芳","雪灵","老王","刘疙瘩","许大妈",
"韩晁","静涵","允儿","查灿灿","靓影","杨幂","李静","邓超","李伟","蓝老师"
,"金枝","静恬","允儿","杨幂","晶灵","林志玲","嘉懿","流行","邓超","郭琦"
,"允儿","许大妈","林妹妹","杨幂","佳思","吉玉","张焕","张赛","师傅","菊月"
,"王晶","吉玟","王飞","林志玲","曾艳","王翠青","JaydenLD"];
//获取父元素
var boxNode = document.getElementById("box");
for (var i = 0; i < arrs.length; i++) {
//创建新元素
var divNode = document.createElement("div");
divNode.innerHTML=arrs[i];
divNode.className="name";
boxNode.appendChild(divNode);
}
//点名
var btn= document.getElementById("btn");
btn.onclick = function () {
if(this.value==="点名"){
//定时
timeId=setInterval(function () {
//清空所有颜色
for (var j = 0; j < arrs.length; j++) {
boxNode.children[j].style.background="";
}
//留下当前颜色
var random = parseInt(Math.random()*arrs.length);
boxNode.children[random].style.background="red";
},100);
this.value="停止";
}else{
//清除计时器
clearInterval(timeId);
this.value="点名";
}
}
var spanNode = document.getElementById("span");
//调用时间
getTime();
setInterval(getTime , 1000);
function getTime() {
var day = new Date();
var year = day.getFullYear();
var month = day.getMonth()+1;
var dat = day.getDay();
var hours = day.getHours();
var minitues = day.getMinutes();
var second = day.getSeconds();
spanNode.innerHTML =year+"-"+month+"-"+dat+" "+hours+":"+minitues+":"+second;
}
</script>
</body>
</html>

js随机点名系统的更多相关文章

  1. 原生js实现简单的随机点名系统

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. js随机点名

    定时器案例. <!-- Author: XiaoWen Create a file: 2016-12-08 12:27:32 Last modified: 2016-12-08 12:51:59 ...

  3. Java低配版简单的随机点名系统

    import java.util.*; public class Dome{ public static void addSname(String[] students){ Scanner sc = ...

  4. JS: 随机点名程序与万年历

    随机点名程序 document.write(Math.random()); var stu = ["张三", "王五", "张二", &qu ...

  5. js 随机点名

    1.对象构造函数 设置节点与人名 constructor({ printElement, startElement, stopElement , person }) { this.list = per ...

  6. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  7. js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  8. 利用JS模拟排队系统

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天给大家分享的是js模拟排队系统,刚开始有排队序列,序列里有vip用户和普通用户,vip用户永远位于普通用户的前面,只有当当前vip用户都办理 ...

  9. javascript随机点名--案例

    主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. LeetCode 18 4Sum (4个数字之和等于target)

    题目链接 https://leetcode.com/problems/4sum/?tab=Description 找到数组中满足 a+b+c+d=0的所有组合,要求不重复. Basic idea is ...

  2. sencha touch Carousel 自动切换

    代码是在网上找的,忘记原出处了 /** * 跑马灯自动切换 */ Ext.define('ux.RotatingCarousel', { extend: 'Ext.carousel.Carousel' ...

  3. 安装Windows Server 2012 R2提示"unable to create a new system partition or locate an existing system partition"解决方法

    重新安装Windows Server 2012 R2,把原来SSD分区全部格式化重建,用U盘启动安装时提示如下: "Setup was unable to create a new syst ...

  4. App.config使用ASP.NET Web Project的Transformation

    1.创建对应configuration的App.config文件,比如:App.Debug.config.App.Release.config. 2.编辑项目文件,将App.*.config文件的Bu ...

  5. 深入浅出WPF之Binding的使用(一)

    在WPF中Binding可以比作数据的桥梁,桥梁的两端分别是Binding的源(Source)和目标(Target).一般情况下,Binding源是逻辑层对象,Binding目标是UI层的控件对象:这 ...

  6. 23种设计模式之享元模式(FlyWeight)

    享元模式是一种对象结构型模式,通过运用共享技术,有效地支持大量细粒度的对象.系统只使用少量的对象,而这些对象都很相似,状态变化很小,对象使用次数增多.享元对象能做到共享的关键是区分内部状态和外部状态. ...

  7. jquery实践

    转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践   好像是feedly订阅里看到的文章,读完后觉得非常 ...

  8. vim上下左右键输出A B

    (转)vim上下左右键不能用 把下面这段话存到~/.vimrc就可以了. " An example for a vimrc file. " " Maintainer: B ...

  9. 如何使QLineEdit禁止编辑

    在写程序的时候喜欢使用QLineEdit,用来显示打开文件的路径.但是很不喜欢被编辑.那么要怎么设置不可编辑呢. (1)调用lineEdit->setEnabled(False) #不可编辑了 ...

  10. 2-sat入门(tarjan)hdu(3062)

    hdu3062 Party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...