前端学习之DOM编程案例：点名案例和秒表案例

点名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="container">
    </div>
    <script>
        let div0 = document.querySelector('#container')
        //最外边的大盒子
        div0.style.width = 800 +'px'
        div0.style.height = 900 +'px'
        div0.style.border = '1px dashed red'        
        div0.style.margin = 'auto'
        div0.style.textAlign = 'center'
        //抽奖显示的圆
        let cirle =  document.createElement('div')
        cirle.style.borderRadius = '50%'
        // cirle['borderRadius'] = '50%'
        // cirle['backgroundColor'] = 'red'
        cirle.style.backgroundColor = 'red'
        cirle.style.width = 300 + 'px'
        cirle.style.height = 300 + 'px'
        cirle.style.margin = 'auto'
        cirle.textContent = '点名系统'
        cirle.style.fontSize = '30px'
        cirle.style.color = 'white'
        cirle.style.marginTop = '80px'
        cirle.style.lineHeight = '300px'
        cirle.style.textAlign='center'
        div0.appendChild(cirle)
        //抽奖按钮
        let button1 = document.createElement('button')
        button1.style.width=300+'px'
        button1.style.height=40+'px'
        button1.textContent = '开始点名'
        button1.style.margin='auto'
        button1.style.marginTop = 40+'px'
        let btn_status = '开始点名'
        //奖品
        let arr = ['张三','李四','王五','周末']    
        //抽奖逻辑
        button1.onclick = function(){
            if (btn_status == '开始点名'){
            id = setInterval(start,10)
            }
            else{
                btn_status = '开始点名'
                button1.textContent = btn_status
                clearInterval(id)
            } 
        }
       
        div0.appendChild(button1)
        function start(){
            
                index = Math.ceil(Math.random()*4)
                cirle.textContent = arr[index]
                btn_status = '停止点名'
                button1.textContent = btn_status
            
            
        }
 
    </script>
</body>
</html>

结果

秒表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div0{
            background-color: aqua;
            width: 400px;
            height: 500px;
            border: 1px dashed red;
            margin: auto;
            text-align: center;
        }
        .cirle{
            border-radius: 50%;
            background-color: red;
            width: 300px;
            height: 300px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
        button{
            margin-top: 20px;
            width: 100px;
            height: 40px;
            margin: auto;
            margin-top: 40px;
        }
        #time{
            width: 70px;
            height: 70px;
            /* background-color:black; */
            /* float: left; */
            margin: auto;
            /* margin-top: 100px; */
            /* pad
            ding: 10px; */
        }
        #time{
            line-height: 40px;
            font-size: 70px;
        }
    </style>
</head>
<body>
    <!-- 最外边蓝色大边框 -->
    <div class="div0">
        <!-- 红色圆 -->
        <div class="cirle">
            <!-- 秒数 -->
            <div id="time" class="time1">0</div>
            <div id="time" class="time0">:</div>
            <div id="time" class="time2">0</div>
        </div>
        <button class="button1">开始计时</button>
        <button class="button2">停止计时</button>
        <button class="button3">重置</button>
    </div>
    <script>
        let time2= 0
        let div1 = document.querySelector('.cirle')
        let t1 = document.querySelector('.time1')
        let t2 = document.querySelector('.time2')
        time1 = 0
        let button1 = document.querySelector('.button1')
        let button2 = document.querySelector('.button2')
        let button3 = document.querySelector('.button3')
        button1.onclick = function(){
            id = setInterval(time,1000)
        }
        // 停止
        button2.onclick = function(){
            clearInterval(id)
        }
        function time(){
            time1 = time1+1
            t2.textContent = time1
            // 当秒数够一分钟，分针数加1
            if(time1%60==0){
                time2 = time2+1
                t1.textContent = time2
            }
        }
        // 重置
        button3.onclick = function(){
            time1 = 0
            time2 = 0
            t1.textContent = time2
            t2.textContent = time1
            clearInterval(id)
        }
    </script>
</body>
</html>