<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>点人名</title>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<style>

    h2{

        font-size: 5em;

        text-align: center;

        margin-top: 50px;

        height: 250px;

        width: 350px;

        margin: 50px auto;

        border: 1px solid #ccc;

        box-shadow:   5px #;

        line-height: 250px;

    }

    .btn{

        text-align:center;

    }

    .btn input{

        padding:10px 20px;

        margin:10px 30px;

        color:#;

    }

    .texrt{

        text-shadow: 1px 2px 4px red;

    }

</style>

</head>

<body>

    <h2 id="num">

        开始点人

    </h2>

    <div class="btn">

        <input type="button" value="开始" id="start"/>

        <input type="button" value="结束" id="stop"/>

    </div>

    <script>

        var arry = ['张武','赵欣','赵瑛','赵子怡','菲菲','雷囧','马季','小辣椒','龙卷风','名阿凡','秒速','艾莉婕','奥拉基'];

        var num = document.getElementById('num');

        var start = document.getElementById('start');

        var stop = document.getElementById('stop');

        var time = null;

        start.onclick=function(){

            num.className  = 'texrt';

            this.disabled=true;

            time = setInterval(function(){

                    var n = Math.round(Math.random()*(arry.length-));    //随机产生 0 - arry.length 之间的数字

                    num.innerHTML = arry[n];

                },);

        };

        stop.onclick=function(){

            start.disabled=false;

            clearInterval(time);

        };

    </script>

</body>

</html>

js 点名的更多相关文章

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

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

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

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

  3. js随机点名

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

  4. js随机点名系统

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

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

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

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

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

  7. js 随机点名

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

  8. 原生JS实现随机点名项目

    核心思想 随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 ...

  9. 走进vue.js(一)

    走进vue.js(一) vue.js作为目前最具前景的前端框架之一,既然如此,博主贯彻以往的作风,肯定要捣鼓一番,经过为期半个多月的研究,算是对vue有了深刻的理解与认识,下面分三个章节解开vue.j ...

随机推荐

  1. SPJ 讨论

    设有一个SPJ数据库,包括S,P,J,SPJ四个关系模式: S( SNO,SNAME,STATUS,CITY): P(PNO,PNAME,COLOR,WEIGHT): J(JNO,JNAME,CITY ...

  2. redis合库

    玩家数据全部保存在redis,对合服来绝对是个坑.因为一直都是做开发,合库这事还是第一次操作. 首先,合服要做哪些事情,当然不同的游戏肯定不一样.合服的目的是为了增加同个服务器上活跃玩家的数量.合服有 ...

  3. 嵌入式C语言优化小技巧

    嵌入式C语言优化小技巧 1 概述 嵌入式系统是指完成一种或几种特定功能的计算机系统,具有自动化程度高,响应速度快等优点,目前已广泛应用于消费电子,工业控制等领域.嵌入式系统受其使用的硬件以及运行环境的 ...

  4. dubbo源码分析二：服务发布

    本文将深入分析dubbo的服务发布涉及到的流程及主要类的代码.首先,我们先从类的关系图来看一下dubbo发布服务涉及到的相关类. 1.类图 上图展示了部分服务发布过程中需要使用到的类和接口,其中: s ...

  5. [连载]JavaScript讲义（03）--- JavaScript面向对象编程

  6. OpenCV LDA(Linnear Discriminant analysis)类的使用---OpenCV LDA演示样例

    1.OpenCV中LDA类的声明 //contrib.hpp class CV_EXPORTS LDA { public: // Initializes a LDA with num_componen ...

  7. （五）带属性值的ng-app指令，实现自己定义模块的自己主动载入

    如今我们看下怎样使用带属性值的ng-app命令,让ng-app自己主动载入我们自己定义的模块作为根模块. <!DOCTYPE html> <html> <head> ...

  8. Java基础知识强化之IO流笔记15：递归之删除带内容的目录案例

    1. 需求:递归删除带内容的目录 分析:   (1)封装目录   (2)获取该目录下的所有文件或者文件夹的File数组   (3)遍历该File数组,得到每一个File对象   (4)判断该File对 ...

  9. Linux磁盘管理：lvcreate 常用命令

    查看当前LV及PV信息: [root@rusky ~]# hostnamectl Static hostname: localhost.localdomain Transient hostname: ...

  10. 2015 UESTC Training for Search Algorithm & String - M - Palindromic String【Manacher回文串】

    O(n)的复杂度求回文串:Manacher算法 定义一个回文值,字符串S是K重回文串,当且仅当S是回文串,且其长度为⌊N/2⌋的前缀和长度为⌊N/2⌋的后缀是K−1重回文串 现在给一个2*10^6长度 ...