您的位置：首页 > Web前端

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

2018-02-27 09:47 597 查看
    倒计时的效果在页面中是很常见的，尤其是在电商网站上，比如：距离双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>
你学会了吗？赶紧试试吧！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端 倒计时效果 原生js
相关文章推荐
新的分享
章节导航