美文网首页
Js写一个点名程序

Js写一个点名程序

作者: 芮某人食用方法 | 来源:发表于2019-08-27 15:52 被阅读0次

Html

<button id="start">开始点名</button>
<button id="end">结束点名</button>
<div id="name"></div>

CSS

#name{
      width: 135px;
      text-align: center;
      padding-top:10px;
    }

JS

#name{
     window.onload = function () {
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    var name = document.getElementById('name');

    var nameArr = ['Leon','Allen','Ella','Lee','Howard'];

    var timer = null;

    // 开始点名
    start.onclick = function () {

      // 清除定时器
      clearInterval(timer);

      // 设置定时器
      timer = setInterval(function () {

        // 设置随机数
        var s_index = parseInt(Math.random()*nameArr.length);
        var s_name = nameArr[s_index];
        console.log(s_name);
        name.innerText = s_name;

      },20)
    };

    // 结束点名
    end.onclick = function () {
      clearInterval(timer);
    }
  }
    }

相关文章

  • Js写一个点名程序

    Html CSS JS

  • shadertoy 移植到本地(1):具体实现

    程序架构 html + js使用typescript 工程构建 js 步骤一 写一个空的 html 程序 步骤二 ...

  • 点名程序

    我们平常看到的点名程序有两种,第一种如下图: 这种点名程序,从页面中看不到具体有多少姓名,。html结构代码如下:...

  • golang调用javascript

    最近写一个程序,接口返回的数据是js格式的,需要通过golang来解析js,so 找到了一个好用的库otto h...

  • NodeJs基础学习--模块(3)

    在node环境中,可以直接使用 node hello.js 运行一个js文件,在程序开发中,代码会越来越长,越写越...

  • 最简单的微信小程序瀑布流布局方法

    最近写一个小程序的瀑布流布局,发现网上别人写的都是css加js的方法,页面分两列,加载数据通过JS分别载入到两列中...

  • 利用apidoc在注释里写API文档

    本文基于node.js的代码注释编写。 程序员都不喜欢写文档,但是程序员习惯写注释。所以今天给大家安利一个注释文档...

  • javascript 笔记

    第一个js 程序 JS 使用示范 外部引入 :