web前端（四）

晚风替我看朝夕

于 2024-04-25 20:57:33 发布

阅读量183

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2301_78305580/article/details/138199426

版权

一、结合抽奖案例完成随机点名程序

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .box {
            position: relative;
            box-sizing: border-box;
            margin: 50px auto;
            border: 2px solid #ccc;
            padding: 20px;
            width: 500px;
            height: 200px;
            text-align: center;
        }
 
        .box h3 {
            line-height: 75px;
        }
 
        .box button {
            position: absolute;
            bottom: 30px;
            width: 60px;
            height: 30px;
        }
 
        .box .start {
            left: 130px;
        }
 
        .box .over {
            right: 130px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <h2>随机点名</h2>
        <h3>姓名：旭旭宝宝</h3>
        <button class="start">开始</button>
        <button class="over">结束</button>
    </div>
    <script>
        const arr = ['旭旭宝宝', '一阵雨', '大硕', '银雪', '泣雨', '张佳乐', '  B叔']
 
        const h3 = document.querySelector('.box h3')
        const start = document.querySelector('.start')
        const over = document.querySelector('.over')
 
        let timer
 
        let rand
 
        start.addEventListener('click', () => {
            start.disabled = 1
            over.disabled = 0
            timer = setInterval(() => {
                rand = Math.floor(Math.random() * arr.length)
                h3.innerHTML = `姓名：${arr[rand]}`
            }, 100);
        })
 
        over.addEventListener('click', () => {
            start.disabled = 0
            over.disabled = 1
            clearInterval(timer)
            //数组长度为 1 时，禁用按钮
            if (arr.length === 1)
                start.disabled = over.disabled = 1
            else
                arr.splice(rand, 1)
        })
 
    </script>
</body>
 
</html>

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

<!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;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .container {
        text-align: center;
    }
    #timerDisplay {
        font-size: 36px;
        margin-bottom: 20px;
    }
    .clock {
        width: 200px;
        height: 200px;
        border: 8px solid #007bff;
        border-radius: 50%;
        position: relative;
        margin-bottom: 20px;
    }
    .hand {
        width: 2px;
        background-color: #007bff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: bottom center;
    }
    .hour-hand {
        height: 50px;
    }
    .minute-hand {
        height: 70px;
    }
    .second-hand {
        height: 80px;
        background-color: red;
    }
    .center-dot {
        width: 8px;
        height: 8px;
        background-color: #007bff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .buttons {
        display: flex;
        justify-content: center;
    }
    .button {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        margin-right: 10px;
    }
</style>
</head>
<body>
 
<div class="container">
    <div id="timerDisplay">00:00:00</div>
    <div class="clock">
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
        <div class="center-dot"></div>
    </div>
    <div class="buttons">
        <button id="startButton" class="button">开始</button>
        <button id="pauseButton" class="button">暂停</button>
        <button id="resetButton" class="button">重置</button>
    </div>
</div>
 
<script>
var timer;
var hours = 0;
var minutes = 0;
var seconds = 0;
 
function startTimer() {
    timer = setInterval(updateTimer, 1000);
}
 
function pauseTimer() {
    clearInterval(timer);
}
 
function resetTimer() {
    clearInterval(timer);
    hours = 0;
    minutes = 0;
    seconds = 0;
    updateDisplay();
}
 
function updateTimer() {
    seconds++;
    if (seconds == 60) {
        seconds = 0;
        minutes++;
    }
    if (minutes == 60) {
        minutes = 0;
        hours++;
    }
    updateDisplay();
    updateClock();
}
 
function updateDisplay() {
    var displayHours = (hours < 10) ? "0" + hours : hours;
    var displayMinutes = (minutes < 10) ? "0" + minutes : minutes;
    var displaySeconds = (seconds < 10) ? "0" + seconds : seconds;
    document.getElementById("timerDisplay").innerText = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}
 
function updateClock() {
    var hourHand = document.querySelector(".hour-hand");
    var minuteHand = document.querySelector(".minute-hand");
    var secondHand = document.querySelector(".second-hand");
 
    var hourRotation = (hours % 12) * 30 + minutes * 0.5;
    var minuteRotation = minutes * 6 + seconds * 0.1;
    var secondRotation = seconds * 6;
 
    hourHand.style.transform = `translate(-1px, -100%) rotate(${hourRotation}deg)`;
    minuteHand.style.transform = `translate(-1px, -100%) rotate(${minuteRotation}deg)`;
    secondHand.style.transform = `translate(-1px, -100%) rotate(${secondRotation}deg)`;
}
 
document.getElementById("startButton").addEventListener("click", startTimer);
document.getElementById("pauseButton").addEventListener("click", pauseTimer);
document.getElementById("resetButton").addEventListener("click", resetTimer);
</script>
 
</body>
</html>