前端页⾯实现倒计时效果的⼏种⽅法倒计时的效果在⽹站或其他平台剪得很多了吧，今天就让我们来看看实现它的⼏种⽅法吧！
⼀ ——15分钟倒计时
<html>
<head>
<meta charset="UTF-8">
<title>15分钟倒计时</title>
</head>
<body>
<div id="timer" ></div>
</body>
<script type="text/javascript">
var oBox= ElementById('timer');
var maxtime = 6 * 60;
function CountDown() {
if (maxtime >= 0) {
minutes = Math.floor(maxtime / 60);
seconds = Math.floor(maxtime % 60);
msg = "距离结束还有" + minutes + "分" + seconds + "秒";
oBox.innerHTML = msg;
if (maxtime == 5 * 60)alert("还剩5分钟");
--maxtime;
} else{
clearInterval(timer);
alert("时间到，结束!");
}
}
timer = setInterval("CountDown()", 1000);
</script>
</html>
⼆——距离未来时间倒计时
<html>
<head>
<meta charset="UTF-8">
<title>距离某个时间点倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = Time();
//设置截⽌时间
var str="2019/1/1 00:00:00";
var endDate = new Date(str);
var end = Time();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
//将倒计时赋值到div中
//递归每秒调⽤countTime⽅法，显⽰动态时间效果
setTimeout(countTime,1000);
}
</script>
</head >
<body onload="countTime()" >
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>
三——数码时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数码时钟</title>
<style type="text/css">
*{margin:0;padding:0;vertical-align: middle;list-style: none;box-sizing: border-box;}
body{background-color: #003;}
.main{width: 365px;height: 170px;margin:100px auto;}
h3{width: 100%;height: 45px;background:url(images/title.png) no-repeat center;margin-bottom: 40px;} </style>
</head>
<body>
<div class="main">
<h3></h3>
<div id="time1">
<div id="time1">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/year.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/month.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/seven.png">
</div>
<div id="time2">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/sign.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/sign.png">
<img src="images/0.png" class="num">
<img src="images/0.png" class="num">
<img src="images/week.png">
<img src="images/seven.png" class="week">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var aIm = ElementById('time1').getElementsByTagName('img');
var aIm1 = ElementById('time2').getElementsByTagName('img');
var week =['seven','one','two','three','four','five','six'];
function toDou(n){
if (n<10) {
return '0'+n;
}else{
return ''+n;
}
}
javascript动态效果// 获取当前时间，并转换为字符串，循环获取字符串并改变节点图⽚路径
tick();
setInterval(tick, 1000);
function tick(){
var oDate = new Date();
var num = Day();
var str1 = FullYear())+'-'+Month()+1)+'-'+Date()); for(var i = 0;i<aIm.length-1;i++){
if(str1.charAt(i) == '-'){
continue;
}
aIm[i].src = 'images/'+str1.charAt(i)+'.png';
}
var str2 = Hours())+':'+Minutes())+':'+Seconds()); //charAt()兼容性要⽐str[i]好
for(var j = 0;j<aIm1.length-2;j++){
if(str2.charAt(j) == ':'){
continue;
}
aIm1[j].src = 'images/'+str2.charAt(j)+'.png';
}
aIm1[aIm1.length-1].src = 'images/'+week[num]+'.png';
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>数码时钟</title>
</head>
<body>
<span id="spanTime">
<img src="images/0.jpg" alt="" id="hours01"> <img src="images/0.jpg" alt="" id="hours02"> :
<img src="images/0.jpg" alt="" id="minutes01"> <img src="images/0.jpg" alt="" id="minutes02"> :
<img src="images/0.jpg" alt="" id="seconds01"> <img src="images/0.jpg" alt="" id="seconds02"> </span></br/>
<input type="button" id="btn" value="显⽰时间"/> </body>
</html>
<script type="text/javascript" >
var hours = 0;
var minutes = 0;
var seconds = 0;
var timer = null;
function show(){
seconds++;
if(seconds>=60){
seconds = 0;
minutes++;
if(minutes>=60){
minutes = 0;
minutes = 0;
hours++;
}
}
}
clearInterval(timer);//清除定时器
timer = setInterval(show,1000);
var myDate = new Date();
//得到当前的时分秒
hours = Hours();
minutes = Minutes();
seconds = Seconds();
}
}
</script>
四——时间插件
数码时钟⼩例⼦下载：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论