web第四次

最新推荐文章于 2024-08-15 18:19:19 发布

劫鲸

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量221

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2302_76907945/article/details/138215393

版权

一、结合抽奖案例完成随机点名程序，要求如下:
1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名

<!DOCTYPE html>
<html>
<head>
    <title>点名系统</title>
    <script>

        var students = ["学生1", "学生2", "学生3", "学生4", "学生5"];
        var intervalId; // 用于存储定时器的ID

        function startRandomName() {
            var button = document.getElementById("randomButton");
            if (button.innerHTML === "点名") {
                button.innerHTML = "停止";
                intervalId = setInterval(randomName, 1000); // 每隔1秒调用randomName函数
            } else {
                button.innerHTML = "点名";
                clearInterval(intervalId); // 停止定时器
            }
        }

        function randomName() {
            var nameDisplay = document.getElementById("nameDisplay");
            var randomIndex = Math.floor(Math.random() * students.length); // 随机生成一个索引
            nameDisplay.innerHTML = students[randomIndex]; // 显示随机选择的学生姓名
        }
    </script>
</head>
<body>
    <h1>点名系统</h1>
    <button id="randomButton" onclick="startRandomName()">点名</button>
    <p id="nameDisplay"></p>
</body>
</html>

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

（1）HTML部分

<div id="timer">00:00:00</div>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>
<button id="resetBtn">重置</button>

(2)CSS部分

#timer {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

button {
  margin-right: 10px;
}

(3)JS部分

var timerInterval;
var hours = 0, minutes = 0, seconds = 0;

function startTimer() {
  timerInterval = setInterval(updateTimer, 1000);
}

function pauseTimer() {
  clearInterval(timerInterval);
}

function resetTimer() {
  clearInterval(timerInterval);
  hours = 0;
  minutes = 0;
  seconds = 0;
  updateTimer();
}

function updateTimer() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }
  
  var timeString = padNumber(hours) + ":" + padNumber(minutes) + ":" + padNumber(seconds);
  document.getElementById("timer").textContent = timeString;
}

function padNumber(number) {
  return number.toString().padStart(2, "0");
}

document.getElementById("startBtn").addEventListener("click", startTimer);
document.getElementById("pauseBtn").addEventListener("click", pauseTimer);
document.getElementById("resetBtn").addEventListener("click", resetTimer);

劫鲸

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web第四次

2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名。1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置。1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止。4.点击重置，计时面板重新为0。2.点击开始，面板开始计时，3.点击暂停，面板停止。
复制链接

扫一扫