html 随机点名和计时系统

最新推荐文章于 2024-04-22 23:06:24 发布

山茶花.

最新推荐文章于 2024-04-22 23:06:24 发布

阅读量537

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2302_77037573/article/details/138078673

版权

本文介绍了如何使用JavaScript、HTML和CSS创建一个随机点名系统，通过随机数和取整功能实现学生名字的动态显示，并结合计时器功能实现秒表计时器，包括开始、暂停和重置操作。

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

1.学生随机点名系统

.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名

先构造点名系统初步构造，调用函数完成随机点名，要使用到随机数和取整

<!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-top: 0px;
            margin-left: 0px;
        }
        .container{
            width: 800px;
            height: 600px;
            border: 1px solid black;
            text-align: center;
            position: absolute;
            margin-left: 25%;
            line-height: 300px;
          
        }
        .box,.box2{
           
            height: 300px;
            width: 300px;
            border-radius: 50%;
            background-color: aqua;
            margin: auto;
            margin-top: 10%;

        }
        .box2{
            background-color: beige;
        }
        #show{
            font-size: 25px;
            
        }
        #start{
            font-size: 20px;
            text-align: center;
            width: 100px;
            height: 50px;
            background-color: antiquewhite;
        }
    </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 students = ["张三","李四","王五","高六","丹尼","李明","珍妮"]
    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(){
                var index = Math.floor(Math.random()*students.length)
                show.innerHTML = students[index]
                box.setAttribute("class","box2")
            },10)
        }else{
            flag = false
            start.innerHTML = "开始点名"
            clearInterval(timer)
            box.setAttribute("class","box")
        }
    }
</script>

2. 使用js及html、css完成秒表计时器，要求如下:
1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>秒表计时器</title>  
<style>  
    #stopwatch {  
        font-size: 2em;  
        margin-bottom: 20px;  
    }  
    button {  
        padding: 10px 20px;  
        margin-right: 10px;  
    }  
</style>  
</head>  
<body>  
  
<div id="stopwatch">00:00:00</div>  
  
<button id="start">开始</button>  
<button id="pause">暂停</button>  
<button id="reset">重置</button>  
  
<script>  
let timerId = null;  
let startTime = null;  
let elapsedTime = 0;  
  
function formatTime(time) {  
    const totalSeconds = Math.floor(time / 1000);  
    const minutes = Math.floor(totalSeconds / 60);  
    const seconds = totalSeconds % 60;  
    const milliseconds = time % 1000;  
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;  
}  
  
function updateStopwatch() {  
    if (startTime) {  
        const currentTime = Date.now();  
        elapsedTime += currentTime - startTime;  
        startTime = currentTime;  
        document.getElementById('stopwatch').textContent = formatTime(elapsedTime);  
    }  
}  
  
function startStopwatch() {  
    if (!timerId) {  
        startTime = Date.now();  
        timerId = setInterval(updateStopwatch, 10);  
    }  
}  
  
function pauseStopwatch() {  
    if (timerId) {  
        clearInterval(timerId);  
        timerId = null;  
    }  
}  
  
function resetStopwatch() {  
    clearInterval(timerId);  
    startTime = null;  
    elapsedTime = 0;  
    document.getElementById('stopwatch').textContent = formatTime(0);  
    timerId = null;  
}  
  
document.getElementById('start').addEventListener('click', startStopwatch);  
document.getElementById('pause').addEventListener('click', pauseStopwatch);  
document.getElementById('reset').addEventListener('click', resetStopwatch);  
</script>  
  
</body>  
</html>