js通過(guò)Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)畫(huà)效果
js通過(guò)Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)效果,具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計(jì)時(shí)動(dòng)畫(huà)</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+"時(shí)"+freeMinute+"分"+freeSecond+"秒";
}
else{
document.getElementById("nowTime").innerHTML = "已結(jié)束";
}
}
</script>
</head>
<body>
<div>
<span id="nowTime"></span>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 通過(guò)實(shí)例解析javascript Date對(duì)象屬性及方法
- JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間簡(jiǎn)單示例
- javascript中神奇的 Date對(duì)象小結(jié)
- JavaScript 中Date對(duì)象的格式化代碼方法匯總
- JavaScript日期對(duì)象(Date)基本用法示例
- JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
- javascript中Date對(duì)象的使用總結(jié)
- JavaScript中的 Date(日期)對(duì)象及使用示例
相關(guān)文章
JavaScript+html5 canvas制作的圓中圓效果實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas制作的圓中圓效果,結(jié)合完整實(shí)例形式分析了基于JavaScript與html5 canvas技術(shù)實(shí)現(xiàn)的圖形繪制與顏色隨機(jī)填充技巧,需要的朋友可以參考下2016-01-01
深入理解JavaScript系列(31):設(shè)計(jì)模式之代理模式詳解
這篇文章主要介紹了深入理解JavaScript系列(31):設(shè)計(jì)模式之代理模式詳解,代理模式使得代理對(duì)象控制具體對(duì)象的引用,代理幾乎可以是任何對(duì)象:文件,資源,內(nèi)存中的對(duì)象,或者是一些難以復(fù)制的東西,需要的朋友可以參考下2015-03-03
淺談js構(gòu)造函數(shù)的方法與原型prototype
下面小編就為大家?guī)?lái)一篇淺談js構(gòu)造函數(shù)的方法與原型prototype。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JS實(shí)現(xiàn)5秒鐘自動(dòng)封鎖div層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)5秒鐘自動(dòng)封鎖div層的方法,涉及javascript針對(duì)div層操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
基于JavaScript創(chuàng)建動(dòng)態(tài)Dom
這篇文章主要介紹了基于JavaScript創(chuàng)建動(dòng)態(tài)Dom的相關(guān)資料,需要的朋友可以參考下2015-12-12
javascript 動(dòng)態(tài)改變層的Z-INDEX的代碼style.zIndex
javascript 動(dòng)態(tài)改變層的Z-INDEX的代碼style.zIndex...2007-08-08
微信小程序中實(shí)現(xiàn)埋點(diǎn)的方法示例詳解
在小程序中實(shí)現(xiàn)埋點(diǎn)的基本思路是利用生命周期函數(shù)和事件回調(diào),插入數(shù)據(jù)上報(bào)代碼,下面將介紹如何在小程序中實(shí)現(xiàn)埋點(diǎn),并通過(guò)代碼示例進(jìn)行說(shuō)明,感興趣的朋友一起看看吧2024-04-04
使用D3.js構(gòu)建實(shí)時(shí)圖形的示例代碼
這篇文章主要介紹了使用D3.js構(gòu)建實(shí)時(shí)圖形的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
bootstrap table表格插件之服務(wù)器端分頁(yè)實(shí)例代碼
Bootstrap Table是基于Bootstrap的輕量級(jí)表格插件,只需要簡(jiǎn)單的配置就可以實(shí)現(xiàn)強(qiáng)大的支持固定表頭、單復(fù)選、排序、分頁(yè)、搜索以及自定義表頭等功能。這篇文章主要介紹了bootstrap table表格插件之服務(wù)器端分頁(yè)實(shí)例代碼,需要的朋友可以參考下2018-09-09
js獲取html頁(yè)面代碼中圖片地址的實(shí)現(xiàn)代碼
這篇文章主要介紹了js獲取html代碼中圖片地址的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03

