一、结合抽奖案例完成随机点名程序,要求如下:
1.点击点名按钮,名字界面随机显示,按钮文字由点名变为停止
2.再次点击点名按钮,显示当前被点名学生姓名,按钮文字由停止变为点名
3.样式请参考css及html自由发挥完成。
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
*{
margin-left: 0px;
margin-top: 0px;
}
.container{
width: 600px;
height: 600px;
border: 1px solid yellow;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.box,.box2{
width: 300px;
height: 300px;
background-color: pink;
margin: auto;/*水平距离的居中*/
margin-top: 50px;
line-height: 300px;
}
.box2{
background-color: aqua;
}
#show{
font-size: 30px;
color: aliceblue;
font-weight: bold;
} #start{
width: 300px;
height: 50px;
background-color:aquamarine ;
}
</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 awards=["张三","李四","王五","赵六","嘻嘻","哈哈"]
//2.获取对应dom对象
var box=document.getElementById("box")
var show=document.getElementById("show")
var start=document.getElementById("start")
//3.定义定时器
var timer
//4.点击事件触发
function change(){
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>
二、使用js及html、css完成秒表计时器,要求如下:
1.界面为一个显示计时面板和三个按钮分别为:开始,暂停,重置
2.点击开始,面板开始计时,
3.点击暂停,面板停止
4.点击重置,计时面板重新为0
提示:采用定时器及定义计数器变量完成,定时器间隔为1s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>秒表计时器</title>
<style>
#div{
width: 500px;
height: 200px;
border: 1px solid yellow;
margin-left: 600px;
margin-top: 200px;
background-color: antiquewhite;
}
.stopwatch {
text-align: center;
padding: 20px;
}
.button {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="div">
<div class="stopwatch">
<h1 id="timer">00:00:00</h1>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="reset">重置</button>
</div>
</div>
</body>
</html>
<script>
const timerElement = document.getElementById('timer');
const startButton = document.getElementById('start');
const pauseButton = document.getElementById('pause');
const resetButton = document.getElementById('reset');
let intervalId;
let seconds = 0;
let hours = 0;
let isRunning = false;
function updateTimer() {
const time = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
timerElement.innerText = time;
}
function startTimer() {
if (!isRunning) {
isRunning = true;
intervalId = setInterval(() => {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
updateTimer();
}, 1000);
}
}
function pauseTimer() {
if (isRunning) {
isRunning = false;
clearInterval(intervalId);
}
}
function resetTimer() {
isRunning = false;
clearInterval(intervalId);
seconds = 0;
minutes = 0;
hours = 0;
updateTimer();
}
startButton.addEventListener('click', startTimer);
pauseButton.addEventListener('click', pauseTimer);
resetButton.addEventListener('click', resetTimer);
</script>