JS簡單實用的倒計時效果實現(xiàn)代碼

更新時間：2012年08月30日 16:33:40 作者：

沒有事研究了下倒計時的效果，因此自己練習了一下，需要的朋友可以參考下

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>倒計時</title> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> *{ margin: 0; padding: 0; } ul,li{list-style: none;} #show_time{color: #f00;font-size: 24px;font-weight: bold;} </style> </head> <body> <div   class="yojvpac"   id="show_time"> </div> <script type="text/javascript"> function countdown(){ var show_time = document.getElementById("show_time"); endtime = new Date("12/31/2012 23:59:59");//結(jié)束時間 today = new Date();//當前時間 delta_T = endtime.getTime() - today.getTime();//時間間隔 if(delta_T < 0){ clearInterval(auto); show_time.innerHTML = "倒計時已經(jīng)結(jié)束"; } window.setTimeout(countdown,1000); total_days = delta_T/(24*60*60*1000);//總天數(shù) total_show = Math.floor(total_days);//實際顯示的天數(shù) total_hours = (total_days - total_show)*24;//剩余小時 hours_show = Math.floor(total_hours);//實際顯示的小時數(shù) total_minutes = (total_hours - hours_show)*60;//剩余的分鐘數(shù) minutes_show = Math.floor(total_minutes);//實際顯示的分鐘數(shù) total_seconds = (total_minutes - minutes_show)*60;//剩余的分鐘數(shù) seconds_show = Math.floor(total_seconds);//實際顯示的秒數(shù) show_time.innerHTML = "距離結(jié)束還有:" + total_show + "天" + hours_show + "時" + minutes_show + "分" + seconds_show + "秒"; } countdown(); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

倒計時

相關(guān)文章

js本身的局限性別讓javascript做太多事
最近常有人在Q群里發(fā)問諸如"怎樣讓js操作文件"、"怎樣讓js實現(xiàn)多線程"等問題。
2010-03-03
原生JS可拖動彈窗效果實例代碼
這篇文章介紹了原生JS可拖動彈窗效果實例代碼，有需要的朋友可以參考一下
2013-11-11
彪哥1.1(智能表格)提供下載
彪哥1.1(智能表格)提供下載...
2006-09-09
JS取request值以及自動執(zhí)行使用示例
在網(wǎng)頁中JS函數(shù)自動執(zhí)行常用三種方法，下面為大家詳細介紹下JS取request值以及自動執(zhí)行使用,需要的朋友可以參考下
2014-02-02
JS快速實現(xiàn)簡單計算器
這篇文章主要為大家詳細介紹了JS快速實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-04-04
js獲取GridView中行數(shù)據(jù)的兩種方法分享
這篇文章介紹了js獲取GridView中行數(shù)據(jù)的方法，有需要的朋友可以參考一下
2013-07-07
創(chuàng)建與框架無關(guān)的JavaScript插件
這篇文章主要介紹了創(chuàng)建與框架無關(guān)的JavaScript插件，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-12-12
OpenCV.js實現(xiàn)喬丹動圖素描效果圖文教程
這篇文章主要為大家介紹了OpenCV.js實現(xiàn)喬丹動圖素描效果的圖文教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
uni-app中onBackPress()監(jiān)聽頁面返回(更新數(shù)據(jù))
這篇文章主要給大家介紹了關(guān)于uni-app中onBackPress()監(jiān)聽頁面返回(更新數(shù)據(jù))的相關(guān)資料,在UniApp中,可以通過監(jiān)聽頁面刷新的生命周期函數(shù)來監(jiān)聽頁面的返回,然后重新調(diào)用接口進行刷新,需要的朋友可以參考下
2023-10-10
layui點擊按鈕頁面會自動刷新的解決方案
今天小編就為大家分享一篇layui點擊按鈕頁面會自動刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10