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 = "已結束"; } } </script> </head> <body> <div> <span id="nowTime"></span> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript+html5 canvas制作的圓中圓效果實例
這篇文章主要介紹了JavaScript+html5 canvas制作的圓中圓效果,結合完整實例形式分析了基于JavaScript與html5 canvas技術實現(xiàn)的圖形繪制與顏色隨機填充技巧,需要的朋友可以參考下2016-01-01深入理解JavaScript系列(31):設計模式之代理模式詳解
這篇文章主要介紹了深入理解JavaScript系列(31):設計模式之代理模式詳解,代理模式使得代理對象控制具體對象的引用,代理幾乎可以是任何對象:文件,資源,內(nèi)存中的對象,或者是一些難以復制的東西,需要的朋友可以參考下2015-03-03基于JavaScript創(chuàng)建動態(tài)Dom
這篇文章主要介紹了基于JavaScript創(chuàng)建動態(tài)Dom的相關資料,需要的朋友可以參考下2015-12-12javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex
javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex...2007-08-08bootstrap table表格插件之服務器端分頁實例代碼
Bootstrap Table是基于Bootstrap的輕量級表格插件,只需要簡單的配置就可以實現(xiàn)強大的支持固定表頭、單復選、排序、分頁、搜索以及自定義表頭等功能。這篇文章主要介紹了bootstrap table表格插件之服務器端分頁實例代碼,需要的朋友可以參考下2018-09-09