一.随机点名程序
1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名</title>
<style>
.container{
width: 800px;
height: 540px;
border: 1px solid black;
text-align: center;
position: absolute;
left: 50%;
margin-left: -400px;
line-height: 100px;
background-color: bisque;
}
.box,.box2{
width: 400px;
height: 400px;
background-color: rgb(176, 243, 204);
border-radius: 50%;
margin: auto;
margin-top: 50px;
line-height: 400px;
}
.box2{
background-color: rgb(124, 172, 218);
}
#start{
width: 100px;
height: 40px;
background-color: pink;
color: black;
}
#show{
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">崩铁2021班</span>
</div>
<button id="start" onclick="A()">开始</button>
</div>
</body>
</html>
<script>
var flag = false
var awards = ["镜流","卡夫卡","希儿","布洛妮娅","黑天鹅","霍霍","克拉拉","真理医生","白露","砂金","瓦瓦卡夏","知更鸟"]
var box = document.getElementById("box")
var show = document.getElementById("show")
var start = document.getElementById("start")
var timer
function A(){
if(!flag){
flag = true
start.innerHTML="停止"
timer = setInterval(function(){
let index = Math.floor(Math.random()*awards.length)
show.innerHTML = awards[index]
box.setAttribute("class","box2")
},10)
}else{
flag = false
start.innerHTML="点名"
clearInterval(timer)
box.setAttribute("class","box")
}
}
</script>二.秒表计时器
1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时
3.点击暂停，面板停止
4.点击重置，计时面板重新为0提示:采用定时器及定义计数器变量完成，定时器间隔为1s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>秒表计时器</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.timer-panel {
text-align: center;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="timer-panel">
<h1 id="timer">00:00</h1>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>
<button id="resetBtn">重置</button>
</div>
</body>
</html>
<script>
let timerId = null; // 用于存储定时器的ID
let counter = 0; // 计数器变量
let isRunning = false; // 计时器是否正在运行
const timerElement = document.getElementById('timer');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
function updateTimerDisplay() {
const minutes = Math.floor(counter / 60);
const seconds = counter % 60;
timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function startTimer() {
if (!isRunning) {
isRunning = true;
timerId = setInterval(() => {
counter++;
updateTimerDisplay();
}, 1000);
}
}
function pauseTimer() {
if (isRunning) {
isRunning = false;
clearInterval(timerId);
}
}
function resetTimer() {
counter = 0;
updateTimerDisplay();
if (isRunning) {
pauseTimer();
}
}
startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);
</script>
