WEB Js作业

1.名单点名

   

   

    Document

   

        *{

            margin-left: 0px;

            margin-top: 0px;

        }

        .container{

            width:800px;

            height: 600px;

            position: absolute;

            left: 50%;

            margin-left: -400px;

            text-align: center;

            line-height: 100px;

        }

        .box,.box2{

            width:300px;

            height: 300px;

            background-color:  rgb(35, 227, 112);

            border-radius: 50%;

            /*水平位置居中 */

            margin: auto;

            margin-top: 50px;

            text-align: center;

            line-height: 300px;

        }

        .box2{

            background-color: rgb(193, 235, 68);

        }

        #show{

            font-size: 30px;

            color:□white;

            font-weight: bold;

        }

        #start{

            width: 300px;

            height: 50px;

            border-radius: 30px;

            background-color: aqua;

        }

 

   

   

       

            名单

       

        点名

   

        //标志位

        var flag=false

        //定义名单内容

        var awards=["张三","李四","王五","赵六","刘七"]

        //2.获取对应dom对象

        var box=document.getElementById("box")

        var show=document.getElementById("show")

        var start=document.getElementById("start")

        //3.定义定时器---姓名切换

        var timer

        //4.点击事件触发

        function change(){

            if(!flag){

                flag=true

                start.innerHTML="停止点名"

                timer=setInterval(function(){

                    //获取匹配名单数组的索引随机数

                    let index=Math.floor(Math.random()*awards.length)

                    show.innerHTML=awards[index]

                    box.setAttribute("class","box2")

                },150)

        }

        else{

            flag=false

            start.innerHTML="开始点名"

            clearInterval(timer)

            box.setAttribute("class","box")

        }

    }

效果图：

2.秒表计时器

   

    Title

   

        .a{

            background-image: url(../../01.html/04.图片音频视频标签/幸运星.png);

            width: 900px;

            height: 550px;

            position:absolute;

            left: 50%;

           margin-left: -400px;

            text-align: center;

            line-height: 100px;

            background-size: 900px 550px;

            border-radius: 100px;

        }

        #showTime

        {

            margin-top: 250px;

            margin-left: 550px;

            color: rgb(1, 7, 12);

            text-align: center;

            width: 300px;

            height: 60px;

            font-size: 60px;

        }

        #startBn{

            margin-top: 60px;

            margin-left: 450px;

            width: 60px;

            height: 30px;

        }

        #restBn{

            width: 60px;

            height: 30px;        

        }

   

   

        00:00:00

        启动

        复位

   

    //——————

    var time,showTime,startBn,restBn,pauseDate;

    //布尔开关

    var bool=false;

    //暂停的累计时间

    var pauseTime=0;

    init();

    function init() {

        showTime=document.getElementById("showTime");

        startBn=document.getElementById("startBn");

        restBn=document.getElementById("restBn");

        startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮

        restBn.addEventListener("click",clickHandler);//复位按钮

        setInterval(animation,16);

    }

    //转化时间函数

    function animation() {

        if(!bool) return;

        //前时间减去上次开启时间减去暂停累计时间

        var times=new Date().getTime()-time-pauseTime;

        var minutes=Math.floor(times/60000);//毫秒转化为分钟

        var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟

        // 将time减去分钟 除去1000得出 秒

        var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//

        showTime.innerHTML=

            (minutes

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。