JavaScript随机点名程序与计时器程序

最新推荐文章于 2024-08-30 20:29:15 发布

怎么都跑不快

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量125

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/yfy0308/article/details/138220667

版权

本文介绍了使用HTML、CSS和JavaScript编写的两个实用小功能：随机点名程序和秒表计时器。随机点名通过生成随机数组索引来选择人员，而计时器则实现了开始、暂停和重置功能。

摘要由CSDN通过智能技术生成

一，随机点名程序

效果展示：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        * {
            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(236, 236, 243);
            border-radius: 50%;
            /*水平位置居中 */
            margin: auto;
            margin-top: 50px;
            text-align: center;
            line-height: 300px;
        }
 
        .box2 {
 
            background-color: rgb(230, 241, 187);
        }
 
        #show {
 
            font-size: 30px;
            color: □white;
            font-weight: bold;
        }
 
        #start {
            width: 300px;
            height: 50px;
            background-color: rgb(108, 234, 99);
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="box" id="box">
            <span id="show">随机点名</span>
        </div>
        <button id="start" onclick="change()">点名</button>
    </div>
</body>
 
</html>
<script>
    var flag = false
    var awards = ["张三","李四","王五","马六","吴七", "赵八","郑九"]
    var box = document.getElementById("box")
    var show = document.getElementById("show")
    var start = document.getElementById("start")
    var timer
    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")
            }, 10)
        } else {
            flag = false
            start.innerHTML = "点名"
            clearInterval(timer)
            box.setAttribute("class", "box")
        }
    }
</script>

二，计时器程序

效果展示：

代码实现：

html:


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表计时器</title>
    
<link rel="stylesheet" href="秒表计时器.css">
<script src="秒表计时器.js"></script>

      
</head>
 
<body>
 
    <div class="stopwatch">
        <h1 id="timer">00:00:00</h1>
        <button id="startBtn">开始</button>
        <button id="pauseBtn" disabled>暂停</button>
        <button id="resetBtn">重置</button>
    </div>
 
</body>
 
</html>

css:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #111010df;
}

.stopwatch {
    text-align: center;
    color: #dad9d9;
}

#timer {
    font-size: 3em;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1em;
    margin: 0 5px;
}


    document.addEventListener("DOMContentLoaded", function () {
        let timerDisplay = document.getElementById('timer');
        let startButton = document.getElementById('startBtn');
        let pauseButton = document.getElementById('pauseBtn');
        let resetButton = document.getElementById('resetBtn');
        let timer;
        let seconds = 0;
        let minutes = 0;
        let hours = 0;
 
        function pad(num) {
            return num < 10 ? "0" + num : num;
        }
 
        function updateTimer() {
            seconds++;
            if (seconds / 60 === 1) {
                seconds = 0;
                minutes++;
                if (minutes / 60 === 1) {
                    minutes = 0;
                    hours++;
                }
            }
            timerDisplay.textContent = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
        }
 
        startButton.addEventListener('click', function () {
            if (!timer) {
                timer = setInterval(updateTimer, 1000);
                startButton.disabled = true;
                pauseButton.disabled = false;
            }
        });
 
        pauseButton.addEventListener('click', function () {
            if (timer) {
                clearInterval(timer);
                timer = null;
                startButton.disabled = false;
            }
        });
 
        resetButton.addEventListener('click', function () {
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            seconds = 0;
            minutes = 0;
            hours = 0;
            timerDisplay.textContent = "00:00:00";
            startButton.disabled = false;
            pauseButton.disabled = true;
        });
    })