期末随堂考

最新推荐文章于 2024-07-17 18:42:40 发布

夏目.488

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量25

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_70660527/article/details/134990924

版权

红绿灯

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

<head>
    <meta charset="UTF-8">
    <title>红绿灯</title>
    <style>
        .container {
            display: flex;
            align-items: center;
        }

        .traffic-light {
            width: 320px;
            height: 100px;
            border: 1px solid #000;
            border-radius: 40px;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #000;
        }

        .light {
            margin: auto;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: gray;
        }

        .red.active {
            background-color: red;
            box-shadow: 0 0 20px #f35f5f, 0 0 40px #f35f5f, 0 0 60px #f35f5f;
        }

        .red:not(.active) {
            background-color: gray;
        }

        .yellow.active {
            background-color: yellow;
            box-shadow: 0 0 20px #eded59, 0 0 40px #eded59, 0 0 60px #eded59;
        }

        .yellow:not(.active) {
            background-color: gray;
        }

        .green.active {
            background-color: rgb(111, 242, 111);
            box-shadow: 0 0 20px #65e265, 0 0 40px #65e265, 0 0 60px #65e265;
        }

        .green:not(.active) {
            background-color: gray;
        }

        #timer {
            margin-left: 30px;
            color: red;
            font-size: 35px;
            animation: glow 0.5s infinite alternate;
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
            }

            to {
                text-shadow: 0 0 20px #f35f5f, 0 0 40px #f35f5f, 0 0 60px #f35f5f;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="traffic-light">
            <div class="light red"></div>
            <div class="light yellow"></div>
            <div class="light green"></div>
        </div>
        <div id="timer">--</div>
    </div>

    <script>
        function changeLights() {
            const lights = document.querySelectorAll('.light');
            const timerDisplay = document.getElementById('timer');
            let currentLight = 0;

            function switchLights() {
                for (let i = 0; i < lights.length; i++) {
                    lights[i].classList.remove('active');
                }

                lights[currentLight].classList.add('active');

                if (currentLight === 0) {
                    timerDisplay.textContent = "10";
                    countdown(10, () => {
                        currentLight = 1;
                        switchLights();
                    });
                } else if (currentLight === 1) {
                    timerDisplay.textContent = "3";
                    countdown(3, () => {
                        currentLight = 2;
                        switchLights();
                    });
                } else {
                    timerDisplay.textContent = "8";
                    countdown(8, () => {
                        currentLight = 0;
                        switchLights();
                    });
                }
            }

            function countdown(seconds, callback) {
                let count = seconds;
                const interval = setInterval(() => {
                    count--;
                    if (count >= 0) {
                        timerDisplay.textContent = `${count}`;
                    } else {
                        clearInterval(interval);
                        callback();
                    }
                }, 1000);
            }

            switchLights();
        }

        changeLights();
    </script>

</body>

</html>

实时计时器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时计时器</title>
</head>
<style>
    .t-body {
        margin-top: 200px;
        width: 100%;
    }

    .big-box {
        width: 180px;
        height: 155px;
        margin: auto;
        background-color: pink;
        border: 1px solid pink;
        border-radius: 20px;
        box-shadow: 0 0 10px 6px #a4a4a5;
    }

    .t-box{
        margin-left: 10px;
    }

    h1 {
        color: #fff;
        font-family: STXingkai;
        cursor: pointer;
    }

    span {
        color: #fff;
        margin-left: 13px;
        font-family: STXingkai;
        cursor: pointer;
        text-shadow: 0 0 20px #582b8c, 0 0 40px #582b8c, 0 0 60px #582b8c;
    }

    span:hover {
        color: aqua;
    }

    button {
        color: #582b8c;
        width: 50px;
        background-color: aqua;
        border: 1px solid aqua;
        border-radius: 15px;
        font-family: STXingkai;
        cursor: pointer;
        text-shadow: 0 0 20px aqua, 0 0 40px aqua, 0 0 60px aqua;
    }

    button:hover {
        color: #fff;
        transform: scale(1.1);
    }
</style>

<body>
    <div class="t-body">
        <div class="big-box">
            <div class="t-box">
                <h1>实时计时器</h1>
                <div class="timer-box">
                    <p>
                        <span id="hour">00</span>
                        <span>:</span>
                        <span id="minute">00</span>
                        <span>:</span>
                        <span id="second">00</span>
                    </p>
                </div>
                <button id="start">开始</button>
                <button id="pause">暂停</button>
                <button id="stop">停止</button>
            </div>
        </div>
    </div>
    <script>
        var hour = 0;
        var minute = 0;
        var second = 0;
        // 计时器ID
        var intervalId;
        // 简化获取DOM元素操作
        function getElementById(id) {
            return document.getElementById(id);
        }
        // 补零函数，满足显示效果
        function addZero(num) {
            return num >= 10 ? num : '0' + num;
        }
        //将时分秒设置到页面上
        function setTimeOnDOM() {
            getElementById('hour').innerText = addZero(hour);
            getElementById('minute').innerText = addZero(minute);
            getElementById('second').innerText = addZero(second);
        }
        getElementById('start').onclick = function () {
            //如果计时器存在，直接返回，避免重新创建计时器
            if (intervalId) {
                return;
            }
            // 开启计时器
            intervalId = setInterval(function () {
                second++;
                if (second >= 60) {
                    second = 0;
                    minute++;
                }
                if (minute >= 60) {
                    minute = 0;
                    hour++;
                }
                // 如果到了24小时，则清除计时器
                if (hour >= 24) {
                    clearInterval(intervalId);
                }
                // 将时间设置到页面上
                setTimeOnDOM();
            }, 1000);
        }
        getElementById('pause').onclick = function () {
            // 清除计时器
            clearInterval(intervalId);
            intervalId = null;
        }
        getElementById('stop').onclick = function () {
            // 清除计时器
            clearInterval(intervalId);
            intervalId = null;
            // 将时分秒初始值设置为0
            hour = 0;
            minute = 0;
            second = 0;
            // 将时间设置到页面上
            setTimeOnDOM();
        }
    </script>
</body>

</html>

filter

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

<head>
    <meta charset="UTF-8">
    <title>Filter</title>
</head>

<body>
    <!-- 实现一个类似数组方法filter()的函数，支持传入一个数组和回调函数，然后筛选出大于0的结果并返回一个新数组。例如：
    filter([-2,-1,0,1,2,3]),function(value){...}运行结果为[1,2,3]。 -->
    <script>
        function customFilter(array, callback) {
            const filteredArray = [];

            for (let i = 0; i < array.length; i++) {
                const currentValue = array[i];
                if (callback(currentValue)) {
                    filteredArray.push(currentValue);
                }
            }

            return filteredArray;
        }

        // 示例用法
        const inputArray = [-2, -1, 0, 1, 2, 3];
        const filteredResult = customFilter(inputArray, function (value) {
            return value > 0;
        });

        console.log(filteredResult); // 输出 [1, 2, 3]

    </script>
</body>

</html>