js實作計時功能

原文連結：https://blog.csdn.net/qq_37936542/article/details/78912786

一：計時器功能

[javascript] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
#box{width:400px;height:400px;margin:40px auto;}
#box div{width:200px;height:40px;border:1px #F3C solid;text-align:center;float:left;font-size:26px;}
#box button{float:left;margin-top:10px;margin-left:20px;}
#box span{float:left;width:200px;height:100px;overflow-y:auto;display:block;border:1px #C9C solid;margin-top:10px;}
</style>
</head>
<body>
<div id="box">
<div id="timer"></div>
<button onClick="btTime()">開始服務</button>
</div>
<script type="text/javascript">
var timer=document.getElementById("timer");
var butt=document.getElementsByTagName("button");
var hour=\'00\'; //時
var minus=\'00\';//分
var seconds=\'00\';//秒
timer.innerHTML=hour+":"+minus+":"+seconds;
var x=0,y=0,f=0,a=0,b=0,t1,t2;
var flag=0;
function btTime(){
/*ajax:*/
switch (flag){
case 0 :
flag=1;
w=1;
t1=setInterval(beginS,1000);
butt[0].innerHTML=\'結束服務\';break;
case 1 :
flag=2;
clearInterval(t1);
butt[0].innerHTML=\'服務已結束\';break;
}
}
function beginS(){//計算秒
x ++;
if(x<10){
seconds = \'0\' + x;
}else if(x>=10&&x<=59){
seconds = x;
}else if(x>59){
seconds = \'00\';
x = 0;
a++;
}
if(a<10){
minus = \'0\' + a;
}else if(a>=10&&a<=59){
minus = a;
}else if(a>59){
minus = \'00\';
a = 0;
b++;
}
if(b<10){
hour = \'0\' + b;
}else if(b>=10&&b<=59){
hour = b;
}
timer.innerHTML=hour+":"+minus+":"+seconds;
}
</script>
</body>
</html><strong>
</strong>

二：彈框倒數計時消失功能

[javascript] view plain copy

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<style>
.container {
width: 100%;
overflow: hidden;
}
.photo_left {
float: left;
width: 40%;
text-align: center;
}
.photo_left img {
width: 5rem;
height: 5rem;
margin-top: 1.2rem;
}
.tips_right {
float: left;
width: 60%;
}
.tips_right p:first-child {
color: #25812a;
font-size: 1.5rem;
}
</style>
<title>注冊成功頁面</title>
</head>
<body>
<div class="container">
<div class="photo_left">
<img src="img/smile.png" />
</div>
<div class="tips_right">
<p> 注冊成功</p>
<p>将在 <span id="mes">3</span> 秒鐘後傳回首頁！</p>
</div>
</div>
</body>
<script language="javascript" type="text/javascript">
var i = 3;
var intervalid;
intervalid = setInterval("fun()", 1000);
function fun() {
if(i == 0) {
window.location.href = "index.html";
clearInterval(intervalid);
}
document.getElementById("mes").innerHTML = i;
i--;
}
</script>
</html>

福利一：前端，Java，産品經理，微信小程式，Python等10G資源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程式入門與實戰全套詳細視訊教程

【領取方法】

關注【程式設計微刊】微信公衆号：

回複【小程式demo】一鍵領取130個微信小程式源碼demo資源。

回複【領取資源】一鍵領取前端，Java，産品經理，微信小程式，Python等資源合集10G資源大放送。

原文作者：祈澈姑娘

原文連結：https://www.jianshu.com/u/05f416aefbe1

創作不易，轉載請告知

90後前端妹子，愛程式設計，愛營運，愛折騰。

堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探讨交流。