js通過Date對象實現(xiàn)倒計時動畫效果
更新時間:2017年10月27日 10:34:25 作者:Qiy
這篇文章主要為大家詳細介紹了js通過Date對象實現(xiàn)倒計時動畫效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
js通過Date對象實現(xiàn)倒計時效果,具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時動畫</title>
<style>
div{
text-align:center;
height:100px;
line-height:100px;
}
</style>
<script>
window.onload = function(){
setInterval(FreeTime,1000);
}
function FreeTime(){
var curTime = Date.now();
var endTime = new Date("2017-10-26 16:00:00");
var allFreeSeconds = (endTime-curTime)/1000;
if(allFreeSeconds>0){
var freeDay = Math.floor(allFreeSeconds/(24*60*60));
var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
var freeMinute = Math.floor(allFreeSeconds/60 % 60);
var freeSecond = Math.floor(allFreeSeconds%60);
document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"時"+freeMinute+"分"+freeSecond+"秒";
}
else{
document.getElementById("nowTime").innerHTML = "已結(jié)束";
}
}
</script>
</head>
<body>
<div>
<span id="nowTime"></span>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript+html5 canvas制作的圓中圓效果實例
這篇文章主要介紹了JavaScript+html5 canvas制作的圓中圓效果,結(jié)合完整實例形式分析了基于JavaScript與html5 canvas技術(shù)實現(xiàn)的圖形繪制與顏色隨機填充技巧,需要的朋友可以參考下2016-01-01
深入理解JavaScript系列(31):設(shè)計模式之代理模式詳解
這篇文章主要介紹了深入理解JavaScript系列(31):設(shè)計模式之代理模式詳解,代理模式使得代理對象控制具體對象的引用,代理幾乎可以是任何對象:文件,資源,內(nèi)存中的對象,或者是一些難以復(fù)制的東西,需要的朋友可以參考下2015-03-03
淺談js構(gòu)造函數(shù)的方法與原型prototype
下面小編就為大家?guī)硪黄獪\談js構(gòu)造函數(shù)的方法與原型prototype。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
基于JavaScript創(chuàng)建動態(tài)Dom
這篇文章主要介紹了基于JavaScript創(chuàng)建動態(tài)Dom的相關(guān)資料,需要的朋友可以參考下2015-12-12
javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex
javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex...2007-08-08
bootstrap table表格插件之服務(wù)器端分頁實例代碼
Bootstrap Table是基于Bootstrap的輕量級表格插件,只需要簡單的配置就可以實現(xiàn)強大的支持固定表頭、單復(fù)選、排序、分頁、搜索以及自定義表頭等功能。這篇文章主要介紹了bootstrap table表格插件之服務(wù)器端分頁實例代碼,需要的朋友可以參考下2018-09-09

