<!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. GlusterFS六大卷模式說明

    GlusterFS六大卷說明   第一,分佈卷 在分布式卷文件被随机地分布在整个砖的体积.使用分布式卷,你需要扩展存储,冗余是重要或提供其他硬件/软件层.(簡介:分布式卷,文件通过hash算法随机的分 ...

  2. OpenMax概述

    一.OpenMax简介 OpenMAX是一个多媒体应用程序的标准.由NVIDIA公司和Khronos™在2006年推出. 它是无授权费的.跨平台的C语言程序接口序列,这些接口对音频.视频.静态图片的常 ...

  3. Memcached下载安装、NET对Memcached进行CRUD操作（2）

    Memcached概念.作用.运行原理.特性.不足简单梳理(1) Memcached下载安装.NET对Memcached进行CRUD操作(2) Memcached存Session数据.访问安全性.使用 ...

  4. 剖析Elasticsearch集群系列之一：Elasticsearch的存储模型和读写操作

    转载:http://www.infoq.com/cn/articles/analysis-of-elasticsearch-cluster-part01 1.辨析Elasticsearch的索引与Lu ...

  5. javaAgent 参数

    -javaagent 这个JVM参数是JDK 5引进的. Java -help的帮助里面写道: -javaagent:<jarpath>[=<options>] load Ja ...

  6. Java秒杀简单设计二：数据库表和Dao层设计

    Java秒杀简单设计二:数据库表Dao层设计 上一篇中搭建springboot项目环境和设计数据库表  https://www.cnblogs.com/taiguyiba/p/9791431.html ...

  7. 无约束优化方法(梯度法-牛顿法-BFGS- L-BFGS）

    本文讲解的是无约束优化中几个常见的基于梯度的方法,主要有梯度下降与牛顿方法.BFGS 与 L-BFGS 算法. 梯度下降法是基于目标函数梯度的,算法的收敛速度是线性的,并且当问题是病态时或者问题规模较 ...

  8. Zabbix显示乱码解决办法

    Zabbix在web页面会显示乱码,如下图所示 在windows下面文件夹C:\Windows\Fonts找一个简体字文件例如simkai.ttf 复制到zabbix server的文件夹/usr/s ...

  9. JNUOJ 1180 - mod5

    首先,可以自己先一个超时的标程出来: #include<cstdio> typedef long long ll; ll n,m,cnt; int main() { int t; scan ...

  10. 解决UITableView分割线距左边有距离的办法

    首先在viewDidLoad方法中加上如下代码: if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {    ...