JavaScript - 随机点名器实例(带倒计时效果)

180it 2021-02-26 PM 98℃ 0条
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
</head>
<style>
    .k{
        margin:0px auto;
        width: 500px;
        height: 500px;
/*        background: red;*/
    }
    .name{
        width: 500px;
        height: 500px;
        /*background: #55CBEA;*/
        border:20px solid;
        border-radius:25px;
        font-size: 80px;
        text-align: center;
        line-height: 500px;
        font-family: 微软雅黑;
        font-weight: bold;
        text-shadow: 10px 10px 10px #C4CBCB;
        box-shadow: 10px 10px 10px #C4CBCB;
    }
    .kai{
        width: 550px;
        height: 150px;
        font-size: 30px;
        background: #fff;
        font-weight: bold;
        position: relative;
        top: 50px;
        border:20px solid;
        border-radius:25px;
        box-shadow: 10px 10px 10px #C4CBCB;
    }
    .xuanze{
        width: 500px;
        height: 30px;
        text-align: center;
        font-family: 微软雅黑;
        font-family: 40px;
        font-weight: bold;
        text-shadow: 10px 10px 10px #C4CBCB;
    }
</style>
<body>
    <div class="k">
        <div class="xuanze" id="xuanze">
            <label><input type="radio" id="suiji" name="1" checked/>
            随机式</label>
            
            <label><input type="radio" id="daojishi" name="1" /> 
            倒计时式</label>
        </div>
        

        <div class="name" id="m">准备点名</div>
        <button class="kai" onmouseup="ok()" id="kai">开始</button>
    </div>
</body>
<script>

    var member = new Array('帅逼风影','屌逼风影','强者风影','王者风影','至尊风影','宇宙风影','绝地风影'); //创建数据数组
    var color = new Array('red','green','pink','blue','#f5f','#000','#D55');
    var m = document.getElementById('m'); //准备点名那个对象
    var kai = document.getElementById('kai'); //按钮对象
    var suiji = document.getElementById('suiji');
    var daojishi = document.getElementById('daojishi');
    function ok(){
        if (suiji.checked==true) { //判断随机模式

        if (kai.innerHTML == '开始') { //判断是否点击了开始
         timmer = setInterval(function(){
            shu = Math.floor(Math.random()*(parseInt(member.length)));  //随机数最大值,转成整数型
            colorshu = Math.floor(Math.random()*(parseInt(color.length)));  //颜色数组个数
            m.innerHTML=member[shu];
            m.style.color=color[colorshu];
            
        },50)
         kai.innerHTML = '停止';
        }else{
            clearInterval(timmer);
            kai.innerHTML = '开始';
        }

        }else{
            if (kai.innerHTML == '开始') { //判断是否点击了开始
             timmer = setInterval(function(){
                shu = Math.floor(Math.random()*(parseInt(member.length)));  //随机数最大值,转成整数型
                colorshu = Math.floor(Math.random()*(parseInt(color.length)));  //颜色数组个数
                m.innerHTML=member[shu];
                m.style.color=color[colorshu];
            },50)
             
             num = 5;//默认5秒
             kai.disabled=true;
             kai.innerHTML = '开始(倒计时:'+num+'秒)'; //直接先显示要不然有1秒的空档期
             timmer1 = setInterval(function(){
                 num--;
                 kai.innerHTML = '开始(倒计时:'+num+'秒)';
                 
                 if (num<=0) {
                     kai.disabled=false;
                     clearInterval(timmer1);
                     clearInterval(timmer);
                     kai.innerHTML = '开始'

                 }
             },1000)
            }
        }
    }

    window.onkeydown = function(){
            if (event.keyCode==32) {
                ok();
            }
        }
</script>

<script>
    function changeColor(){
    var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
    color=color.split("|");
    document.getElementById("xuanze").style.color=color[parseInt(Math.random() * color.length)];
    }
    setInterval(changeColor,100);
</script>
</html>

来源:https://blog.kieng.cn/167.html

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章或资源对您有帮助,欢迎打赏作者。一路走来,感谢有您!

标签: none

JavaScript - 随机点名器实例(带倒计时效果)