【web】JavaScript

奔跑的大大怪

已于 2024-04-25 16:41:51 修改

阅读量172

点赞数 1

文章标签：前端 javascript css

于 2024-04-19 22:21:26 首次发布

本文链接：https://blog.csdn.net/weixin_65583879/article/details/137979145

版权

一、完成随机点名程序

<!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;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            text-align: center;
            line-height: 100px;
        }

        .box,
        .box2 {

            width: 300px;
            height: 300px;
            background-color: blue;
            border-radius: 50%;
            /*水平位置居中 */
            margin: auto;
            margin-top: 50px;
            text-align: center;
            line-height: 300px;
        }

        .box2 {

            background-color: red;
        }

        #show {

            font-size: 30px;
            color: □white;
            font-weight: bold;
        }

        #start {
            width: 300px;
            height: 50px;
            background-color: aquamarine;
        }
    </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

    //1.名单内容
    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")
            }, 10)
        } else {
            flag = false
            start.innerHTML = "点名"
            clearInterval(timer)
            box.setAttribute("class", "box")
        }
    }
</script>

效果图：

二、使用html、css、js完成秒表计时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表计时器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }

        .stopwatch {
            text-align: center;
        }

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

        button {
            padding: 10px 20px;
            font-size: 1em;
            margin: 0 5px;
        }
    </style>
</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>
<script>
    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;
        });
    });
</script>

效果图：