原生js实现随机点名小demo

实现一个随机点名功能,用到的有随机数、定时器、点击事件、数组,闲言

少叙直接上代码。

布局:

       

点名

       

       

   

样式:

#box{

            width: 300px;

            height: 300px;

            text-align: center;

            border: 1px solid;

            margin: 0 auto;

        }

逻辑代码:

// 获取开始

    var oStart = document.getElementsByTagName('button')[0];

    // 获取结束

    var oStop = document.getElementsByTagName('button')[1];

    // 获取p标签

    var oP = document.getElementsByTagName('p')[0];

    // 定义一个数组

    var arr = ['欧阳菁','李达康','韩美珍','郑伯鸿','孙大妞','王满堂','吴刚','

岳秀清','蔡英豪','邱莹','李维民','段凯文','何建国','李佳佳'];

    // 声明定时器

    var timer;

    // 开始点击事件

    oStart.onclick = function(){

        // 关闭定时器

        clearInterval(timer);

        // 声明定时器

        timer = setInterval(f,500);

        // 定时器函数

        function f(){

            // 随机

            var str = parseInt(Math.random()*arr.length);

            // p的值

            oP.innerHTML = arr[str];

        }

    }

    // 结束点击事件

    oStop.onclick = function(){

        // 关闭定时器

        clearInterval(timer);

    }

你可能感兴趣的:(原生js实现随机点名小demo)