欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

js教程

js随机点名效果

js教程 我的站长站 2021-06-27 共56人阅读
<!doctype html>
<title>点名器</title>
<meta charset="utf-8">
<style>
    #box{
        width:400px;
        height:200px;
        background:#ff6699;
        margin:100px auto auto auto;
        text-align:center;
        line-height:200px;
        font-size:40px;
        color:#fff;
    }
    #btn{
        margin:10px auto;
        width:200px;
        height:50px;
        background:#66ff99;
        font-size:30px;
        text-align:center;
        line-height:50px;
         
    }
</style>
<div id="box">汤俊</div>
<div id="btn">开始</div>
<script>
    /*
        1.点击按钮
          box的文字发生变化 取数组中随机名字 setInterval
        2.点击 停止 
        3.多次点击Bug问题
           
    */
    var box=document.getElementById('box');
    var btn=document.getElementById('btn');
    console.log(box);
     
    //声明姓名数组
    var arr=['珍珍','苗苗','桂芝','畅晓','李新','晓新','张磊','碧娇','倩倩','苏苌','刘伟','潘闯','翡翠','元宝','宏天','皓宇','春芳'];
    console.log(arr);
     
    //声明布尔
    var bool=true;
     
    //点击事件
    btn.onclick=function(){
        if(bool){
            //重新赋值 false
            bool=false;
            timer=setInterval(function(){
                //找 arr下标 随机数
                var index=rand(0,arr.length-1);
                console.log(index);
                 
                //box 赋值
                box.innerHTML=arr[index];
         
            },50);
             
            //开始文字重新赋值
            this.innerHTML='暂停';
        }else{
            //重新赋值
            bool=true;
            //清除定时器
            clearInterval(timer);
            //开始文字重新赋值
            this.innerHTML='开始';
        }
         
     
    }
     
    // 0 17
    function rand(m,n){
        return Math.floor(Math.random()*(n-m+1));
    }
     
</script>


标签 js随机
相关推荐
  • js随机
  • javascript制作随机样式标签云方法
    javascript制作随机样式标签云方法

    我的站长站分享一段超简单的javascript随机样式标签云方法,比网上那些长篇大论的简单好理解多了,一看就懂,效果如下。JS代码$(".tags a").each(function(){var x = 5;var y = 9;var rand = parseInt...

    js教程 75 3年前
  • js随机点名效果

    <!doctype html><title>点名器</title><meta charset="utf-8"><style> #box{ width:400px; height:200px; background:#ff6699; margin:100px auto auto auto; text-align:center; line-h...

    js教程 56 2年前
  • js随机生成指定位数+数字+字母混合字符串

    之前我的站长站分享过js随机生成的教程,但是那篇教程只能指定随机数的位数,但是不能自定义随机内容。[xxid]71,2770[/xxid]这篇教程可以指定随机的位数,还可以自定义随机的内容,比如:数字、字母、符号,或其他任何混合字符串,代码如下:function generateMixed...

    js教程 17 5个月前
  • JavaScript随机生成指定范围或指定类型的随机数

    生成指定范围随机数1、使用 random() 方法可以返回一个介于 0 ~ 1 之间的伪随机数(包括 0,不包括 1)。Math.random()下面是一个测试样例var random = Math.random();console.log(random);2,生成 [ n, m ) 范围内的随机数(大于等于n,小于m)这种最简单,因为和 ...

    js教程 11 4个月前