web前端-homework js随机点名&秒表计时器

一、结合抽奖案例完成随机点名程序,要求如下:

1.点击点名按钮,名字界面随机显示,按钮文字由点名变为停止

2.再次点击点名按钮,显示当前被点名学生姓名,按钮文字由停止变为点名

3.样式请参考css及html自由发挥完成。

html源码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        .container{
            width: 500px;
            height: 300px;
            border: 1px dashed #333;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding-top: 50px;
        }
        .name-display {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 100px;
        }
        #start-stop-btn {
            width: 150px;
            height: 50px;
            background-color: #3498db;
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="name-display" id="nameDisplay">点击开始点名</div>
        <button id="start-stop-btn">开始点名</button>
    </div>

    <script>
        var students = ["张三", "李四", "王五"];
        var nameDisplay = document.getElementById("nameDisplay");
        var startStopBtn = document.getElementById("start-stop-btn");
        var flag = false;
        var timer;

        startStopBtn.onclick = function() {
            if (!flag) {
                // 将标志变量置为true,表示进入点名状态
                flag = true;
                startStopBtn.innerHTML = "停止点名";
                // 启动定时器,每100ms随机选取一个名字显示
                timer = setInterval(pickRandomName, 100);
            } else {
                // 将标志变量置为false,表示停止点名
                flag = false;
                startStopBtn.innerHTML = "开始点名";
                // 清除定时器,停止随机选取名字
                clearInterval(timer);
            }
        };
        
        // 随机选取名字的函数
        function pickRandomName() {
            var randomIndex = Math.floor(Math.random() * students.length);
            var randomName = students[randomIndex];
            nameDisplay.textContent = randomName;
        }
    </script>
</body>
</html>

效果:

二、使用js及html、css完成秒表计时器,要求如下:

1.界面为一个显示计时面板和三个按钮分别为:开始,暂停,重置

2.点击开始,面板开始计时,

3.点击暂停,面板停止

4.点击重置,计时面板重新为0

提示:采用定时器及定义计数器变量完成,定时器间隔为1s

html源码:

js 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表计时器</title>
    <style>
        .container{
            width: 600px;
            height: 300px;
            border: 1px dashed #333;
            position: absolute;
            left: 50%;
            top: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
            line-height: 100px;
        }
        #display {
            font-size: 36px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        button {
            width: 80px;
            height: 40px;
            margin: 5px;
            font-size: 16px;
            background-color: #3498db;
            border: none;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="display">00:00:00</div>
        <button id="start">开始</button>
        <button id="pause">暂停</button>
        <button id="reset">重置</button>
    </div>

    <script>
        var timer;
        var isRunning = false;
        var seconds = 0, minutes = 0, hours = 0;

        function startTimer() {
            isRunning = true;
             // 每秒更新一次时间
            timer = setInterval(updateTime, 1000);
        }
        
        // 暂停计时器
        function pauseTimer() {
            isRunning = false;
            clearInterval(timer);
        }
        
        // 重置时间
        function resetTimer() {
            isRunning = false;
            clearInterval(timer);
            seconds = 0;
            minutes = 0;
            hours = 0;
            updateDisplay();
        }
        
        // 更新时间
        function updateTime() {
            seconds++;
            if (seconds === 60) {
                seconds = 0;
                minutes++;
                if (minutes === 60) {
                    minutes = 0;
                    hours++;
                }
            }
            updateDisplay();
        }

        // 更新显示时间
        function updateDisplay() {
            var display = document.getElementById('display');
            // 设置显示内容
            display.textContent = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
        }

        function pad(val) {
            // 如果val大于9,返回val,否则返回'0' + val
            return val > 9 ? val : '0' + val;
        }

        document.getElementById('start').addEventListener('click', function() {
            if (!isRunning) {
                startTimer();
            }
        });

        document.getElementById('pause').addEventListener('click', function() {
            if (isRunning) {
                pauseTimer();
            }
        });

        document.getElementById('reset').addEventListener('click', function() {
            resetTimer();
        });
    </script>
</body>
</html>

效果:

相关推荐
龙仔CLL1 天前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李1 天前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 天前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 天前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 天前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张1 天前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350231 天前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛1 天前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼1 天前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔1 天前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js