一、结合抽奖案例完成随机点名程序,要求如下:
1.点击点名按钮,名字界面随机显示,按钮文字由点名变为停止
2.再次点击点名按钮,显示当前被点名学生姓名,按钮文字由停止变为点名
3.样式请参考css及html自由发挥完成。
<!DOCTYPE html>
<html lang-"en"><head>
<meta charset="UTF-8">
<title>点名</title>
<style>
*{
margin-left: opx;
margin-top: 0px;
}
.container{
width:500px;
height: 500px;
border: 1px solid red;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.box,.box2{
width:200px;
height: 200px;
background-color: l red;
border-radius: 50%;
/*水平位置居中 */
margin: auto;
margin-top: 50px;
text-align: center;
line-height: 300px;
}
.box2 {
background-color:rgb(0, 255, 30);
}
#showf{
font-size: 30px;
color:□white;
font-weight: bold;
}
#start{
width: 300px;
height: 50px;
background-color:blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
</div><span id="show">姓名</span>
</div>
<button id="start" onclick="change()">点名</button>
</div>
</body>
</html>
<script>
// 标志位
var flag = false
//定义点名内容
var awards =["小刚","小丽","小李","小明"]
//获取对应dom对象
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(){
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
</html><!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: 0;
padding: 0;
}
#box {
margin: 20px auto;
width: 200px;
height: 300px;
background-color: rgb(224, 8, 44);
}
.content {
height: 200px;
text-align: center;
line-height: 120px;
font-weight: 700;
font-size: 40px;
}
.btn {
text-align: center;
}
button {
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="content">
<span id="hours">00</span>
<span id="minutes">00</span>
<span id="seconds">00</span>
</div>
<div class="btn">
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="end">重置</button>
</div>
</div>
</body>
</html>
<script>
var timer
var time = 0
function $(id) {
return document.getElementById(id)
}
var hours = $('hours'),
minutes = $('minutes'),
seconds = $('seconds'),
start = $('start'),
pause = $('pause'),
end = $('end')
//开始
start.onclick = function () {
this.disabled = true
pause.disabled = false
end.disabled = false
timer = setInterval(move, 1000)
}
//暂停
pause.onclick = function () {
this.disabled = true
start.disabled = false
end.disabled = false
clearInterval(timer)
}
//重置
end.onclick = function () {
this.disabled = true
pause.disabled = false
start.disabled = false
clearInterval(timer)
time = 0
timeShow()
}
function move() {
time++
// console.log(time)
timeShow()
}
function timeFormat(t) {
t = t >= 10 ? t : '0' + t
return t
}
function timeShow() {
seconds.innerText = timeFormat(time % 60) //0-59
minutes.innerHTML = timeFormat(parseInt(time / 60) % 60)
hours.innerHTML = timeFormat(parseInt(time / 60 / 60) % 24)
}
</script>