前端页面实现倒计时效果的几种方法
2021-12-04 本文已影响0人
SY
1.15分钟倒计时
<html>
<head>
<meta charset="UTF-8">
<title>15分钟倒计时</title>
</head>
<body>
<div id="timer" style="color:red"></div>
</body>
<script type="text/javascript">
var oBox= document.getElementById('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>
2.距离未来时间倒计时
<html>
<head>
<meta charset="UTF-8">
<title>距离某个时间点倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str="2019/1/1 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
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中
document.getElementById("_d").innerHTML = d+"天";
document.getElementById("_h").innerHTML = h+"时";
document.getElementById("_m").innerHTML = m+"分";
document.getElementById("_s").innerHTML = s+"秒";
//递归每秒调用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>
3.数码时钟
<!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 style="margin-bottom: 20px;" 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 = document.getElementById('time1').getElementsByTagName('img');
var aIm1 = document.getElementById('time2').getElementsByTagName('img');
var week =['seven','one','two','three','four','five','six'];
function toDou(n){
if (n<10) {
return '0'+n;
}else{
return ''+n;
}
}
// 获取当前时间，并转换为字符串，循环获取字符串并改变节点图片路径
tick();
setInterval(tick, 1000);
function tick(){
var oDate = new Date();
var num = oDate.getDay();
var str1 = toDou(oDate.getFullYear())+'-'+toDou(oDate.getMonth()+1)+'-'+toDou(oDate.getDate());
for(var i = 0;i<aIm.length-1;i++){
if(str1.charAt(i) == '-'){
continue;
}
aIm[i].src = 'images/'+str1.charAt(i)+'.png';
}
var str2 = toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
//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" >
window.onload = function(){
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;
hours++;
}
}
document.getElementById("seconds02").src = "images/"+seconds%10+".jpg";//0-9之间的值，得到余数
document.getElementById("seconds01").src = "images/"+parseInt(seconds/10)+".jpg";//得到十位
document.getElementById("minutes02").src = "images/"+minutes%10+".jpg";
document.getElementById("minutes01").src = "images/"+parseInt(minutes/10)+".jpg";
document.getElementById("hours02").src = "images/"+hours%10+".jpg";
document.getElementById("hours01").src = "images/"+parseInt(hours/10)+".jpg";
}
document.getElementById("btn").onclick = function(){//点击按钮获取当前时间
clearInterval(timer);//清除定时器
timer = setInterval(show,1000);
var myDate = new Date();
//得到当前的时分秒
hours = myDate.getHours();
minutes = myDate.getMinutes();
seconds = myDate.getSeconds();
}
}
</script>
4.时间插件倒计时：
https://www.jq22.com/search?seo=%E5%80%92%E8%AE%A1%E6%97%B6
