zoukankan      html  css  js  c++  java
  • 随机点名

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>随机抽奖</title>
    <style>
    *{margin:0;padding: 0;}
    #wrap{
    31.25rem;
    height: 18.75rem;
    border:0.0625rem solid red;
    border-radius: 5%;
    margin:0 auto;
    }
    #titi{
    200px;
    height: 3.125rem;
    background: green;
    margin:0 auto;
    margin-top: 5.0rem;

    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    }
    #btn{
    80px;
    height: 30px;
    display: block;
    margin:0 auto;
    margin-top: 10px;

    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="titi">随机点名</div>
    <button id="btn">开始</button>
    </div>
    <script>
    var Btn=document.getElementById('btn');
    var Tit=document.getElementById('titi');
    // 定义变量接收定时器的标志
    var T=0;
    // 定义标志位 标志开始还是结束
    var Bz= false;
    var arr=['张三','李四','王五','张伟','李明','萌萌','赵四'];
    // 绑定单击事件
    Btn.onclick=function(){
    if(Bz==false){
    Btn.innerHTML='停止';
    T=setInterval(function(){
    // 调用随机函数
    var index=rund(0,arr.length-1);
    Tit.innerHTML=arr[index];
    },50);
    Bz= true;

    }else{
    Btn.innerHTML='开始';
    // 清除定时器
    clearInterval(T);
    Bz=false;
    }
    }

    // 封装随机值的函数
    function rund(m,n){
    return Math.floor(Math.random()*(n-m+1))+m;
    }

    </script>

    </body>
    </html>

  • 相关阅读:
    java fastJson
    动态 商品属性
    添加营业时间
    ivew 表格中的input数据改变就会失去焦点
    小程序-setData
    小程序 css3走马灯效果
    iview 表单验证
    vue iview tree checked改变 不渲染的问题
    pl/sql中文乱码
    sql-plus无法连接解决
  • 原文地址:https://www.cnblogs.com/lyxdw/p/8877814.html
Copyright © 2011-2022 走看看