1.多次定时
- setInterval()
- clearInterval()
2.单次定时
-
setTimeout()
-
clearTimeout()
<script> //多次定时 setInterval(function(){ alert("OK"); },1000 ) //单次定时 setTimeout(function(){ alert("OK"); }, 1000) </script>
3.多次定时-电子表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子表</title>
<style>
body{
text-align: center;
}
#iwatch{
display:inline-block;
padding:20px;
font-size:60px;
border:5px solid #333;
background:#abcdef;
}
</style>
</head>
<body>
<div id="iwatch"></div>
<script>
function runTime(){
//创建 date对象
var date = new Date();
//分别获取时分秒
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
//使用三元运算符 处理时间格式
h = (h > 9) ? h : "0" + h;
m = (m > 9) ? m : "0" + m;
s = (s > 9) ? s : "0" + s;
//拼接 时间字符串
var dateStr = h+":"+m+":"+s;
//赋值html
document.getElementById("iwatch").innerHTML = dateStr;
}
runTime();
//定时
setInterval(runTime, 1000)
</script>
</body>
</html>
4.多次定时-点名器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名 点过的排除</title>
<style>
.container{
800px;
height:600px;
background:#0AF648;
margin:0px auto;
border-radius: 30px;
text-align:center;
display: flex;
flex-wrap:wrap;
justify-content:center;
align-content:center;
}
#nameBox{
display: block;
70%;
height:150px;
line-height:150px;
font-size:40px;
color:#fff;
background-color:pink;
border-radius:30px;
}
button{
display:inline-block;
outline:0;
margin-top:40px;
40%;
height:60px;
font-size:30px;
color:#fff;
border-radius:30px;
background-color:lightblue;
}
#res{
margin-top:50px;
display: inline-block;
70%;
border-radius:30px;
height:200px;
line-height:50px;
font-size:25px;
color:#fff;
background-color:orange;
}
</style>
</head>
<body>
<div class="container">
<div id="nameBox">开始点名？</div>
<button onclick="start(this)">Begin</button>
<div id="res">被点到的人:<br></div>
</div>
<script>
var index=0;
var nameList = [ "诸葛亮", "丽丽", "翠翠", "艳艳", "司马懿"];
var timer = null;//全局变量
//开始点名
function start(ele){
//判断 按钮的转换控制
if (ele.innerHTML === "Begin") {
ele.innerHTML = "Stop";
timer = setInterval(randName, 100);//全局变量timer赋值为定时器，以便后面结束定时。
} else {
ele.innerHTML = "Begin";
clearInterval(timer);//结束定时，注意参数timer,为全局变量，否则无法获取
//判断数组是否为空
if(nameList.length>0){
document.getElementById("res").innerHTML+=nameList[index]+",";
nameList.splice(index,1);
}
}
if(nameList.length===0){
document.getElementById("nameBox").innerHTML = "点名结束!";
clearInterval(timer);
}
}
//随机函数
function randName(){
//求随机数
index = Math.floor(Math.random() * nameList.length);
var name=nameList[index];
document.getElementById("nameBox").innerHTML = nameList[index];
}
</script>
</body>
</html>
5.定时-倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
#box{
text-align:center;
font-size:100px;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- 方法一、使用setInterval定时 -->
<script>
var m = 10;
//定时函数
function run(){
document.getElementById("box").innerHTML = m --;
if (m < 0) {
clearInterval(timer);//结束多次定时，否则将会有负值
}
}
var timer = setInterval(run, 300);
</script>
<!-- 方法二、使用setTimeout定时 -->
<script>
var m = 10;
function run(){
document.getElementById("box").innerHTML = m --;
if (m >= 0) {
setTimeout(run, 500);//满足条件就定时一次
}
}
run();
</script>
</body>
</html>
6.钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钟表</title>
<style>
.iwatch{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
600px;
height: 600px;
background:url(images/1.jpg);
}
.pointer{
position:absolute;
left:50%;
margin-left:-15px;
30px;
height:600px;
}
#hourPointer{
background:url("./images/2.png");
}
#minutePointer{
background:url("./images/3.png");
}
#secondPointer{
background:url("./images/4.png");
}
</style>
</head>
<body>
<div class="iwatch">
<div class="pointer" id="hourPointer"></div>
<div class="pointer" id="minutePointer"></div>
<div class="pointer" id="secondPointer"></div>
</div>
<audio src="images/clock.mp3" id="myAudio"></audio>
<script>
//获取元素
var hourPointer=document.getElementById("hourPointer");
var minutePointer=document.getElementById("minutePointer");
var secondPointer=document.getElementById("secondPointer");
var myAudio=document.getElementById("myAudio");
//调用函数
runTime();
function runTime(){
//获取当前时间
var date=new Date();
//计算单个时间
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
//注意时间需要加上小数部分
var h=date.getHours()+m/60;
//设置旋转
secondPointer.style.transform="rotate("+(s/60*360)+"deg)";
minutePointer.style.transform="rotate("+(m/60*360)+"deg)";
hourPointer.style.transform="rotate("+(h/12*360)+"deg)";
//设置钟声
myAudio.play();
//定时（一次定时）
setTimeout(runTime,1000);
}
//定时（多次定时）
// setInterval(runTime,1000);
</script>
</body>
</html>