前端页面中几种倒计时效果的实现方式_DATE对象

最新推荐文章于 2024-06-12 11:55:25 发布

xiahuaxuanlan1113

最新推荐文章于 2024-06-12 11:55:25 发布

阅读量1.4w

点赞数 10

分类专栏： javascript原生文章标签：前端倒计时效果原生js

本文链接：https://blog.csdn.net/chenwei1113/article/details/79383830

版权

javascript原生专栏收录该内容

8 篇文章 0 订阅

订阅专栏

倒计时的效果在页面中是很常见的，尤其是在电商网站上，比如：距离双11还有多少天；登录到某个网站后，多少秒后跳转到首页；秒表的倒计时；时钟的效果等等……其核心是通过DATE对象来实现的。现在我们一起来看看吧！

一、距离双11还有多少天

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
</head>
<body>
    <span id="spanTime"></span>
</body>
</html>
<script type="text/javascript">
var timer = null;
window.onload = function(){
	//开启定时器
	timer = setInterval(show,100);
	//回调函数
	function show(){
		var d1 = new Date();//获取到当前的时间
		var d1Ms = d1.getTime();
		var d2 = new Date("11 11,2018");
		var d2Ms = d2.getTime();
		var differMs = d2Ms-d1Ms;//相差的毫秒数
		var date = parseInt(differMs/(3600*24*1000));//天
		var hours = parseInt((differMs%(3600*24*1000))/(3600*1000));//1小时=3600s
		var minutes =parseInt((differMs%(3600*1000))/(60*1000));//分钟
		var seconds = parseInt((differMs%(60*1000))/1000);//秒
		var ms = differMs%1000;//毫秒
		//当前分秒为个位数字时，对其进行的处理
		hours = hours<10?"0"+hours:hours;
		minutes = minutes<10?"0"+minutes:minutes;
		seconds = seconds<10?"0"+seconds:seconds;
		document.getElementById("spanTime").innerHTML = date+"天"+hours+"小时"+ minutes+"分"+ seconds+"秒"+ ms;
	}	
}
</script>

二、5秒后跳转到首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>5秒后返回首页</title>
    <style type="text/css">
        .changeFont {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <span id="spanTime"></span>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    //1.首先声明seconds
    var seconds = 5;
    //2.声明定时器
    var timer = null;
    //3.开启定时器
    timer = setInterval(show,1000);
    //开启定时器后要执行的函数
    function show(){
        if(seconds==0){
            clearInterval(timer);//清除定时器
            window.location.href = "http://www.baidu.com";//跳转到百度首页
            return;
        }
        //将不断变化的秒数显示在页面上
        document.getElementById('spanTime').innerHTML = '<span class="changeFont">'+seconds+'</span>' + "秒后返回首页！"; //这里添加的class仅仅是为了改变 变化的秒数的样式
        seconds--; 
    } 
};
</script>

三、秒表倒计时

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
</head>
<body>
    <span id="spanTime"></span>
</body>
</html>
<script type="text/javascript" >
var timer = null;
window.onload = function(){
	//定义倒计时的时间(倒计时1分钟10秒)
	var minutes = 1;
	var seconds = 10;
	function show(){
		//判断时间到了没
		if(seconds==0&&minutes==0){
			clearInterval(timer);//清除定时器
			alert("时间到");
			return;
		}
		seconds--;
		if(seconds<0){
			seconds = 59;
			minutes--;
		}
		minutes = (minutes+"").length==1?"0"+minutes:minutes;//(minutes+"")是将其数据类型转换成字符串类型
		seconds = (seconds+"").length==1?"0"+seconds:seconds;
		document.getElementById("spanTime").innerHTML = minutes+":"+seconds;
	}
	//开启定时器
	timer = setInterval(show,1000);
}
</script>

四、数码时钟

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</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>

你学会了吗？赶紧试试吧！

xiahuaxuanlan1113

关注

10
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
前端页面中几种倒计时效果的实现方式_DATE对象

倒计时的效果在页面中是很常见的，尤其是在电商网站上，比如：距离双11还有多少天；登录到某个网站后，多少秒后跳转到首页；秒表的倒计时；时钟的效果等等……其核心是通过DATE对象来实现的。现在我们一起来看看吧！一、距离双11还有多少天&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8...
复制链接

扫一扫