快捷導(dǎo)航

js倒計(jì)時(shí)顯示實(shí)例

更新時(shí)間：2016年12月11日 14:37:47 作者：細(xì)數(shù)逝去的過往

本文分享了js倒計(jì)時(shí)顯示的實(shí)例，需要的朋友可以參考借鑒，下面就跟小編一起來看看吧

話不多說，請看實(shí)例代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js倒計(jì)時(shí)顯示-細(xì)數(shù)逝去的過往</title>
<style type="text/css">
#clock {
font: bold 24pt sans;
background-color: #f5f5f5;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.demo {
position: absolute;
margin-left: 40%;
margin-top: 40%;
}
</style>
</head>
<body>
<div class="demo">
<center>
<h1>下班倒計(jì)時(shí)顯示</h1>
</center>
<span id="clock"></span>
</div>
<script>
function displayTime() {
var elt = document.getElementById("clock");
if(leftTime < 0) {
elt.innerHTML = "Over";
} else {
var endTime = new Date("2016/11/21 18:00:00");
var now = new Date();
var leftTime = endTime.getTime() - now.getTime();
var ms = parseInt(leftTime % 1000).toString();
leftTime = parseInt(leftTime / 1000);
var o = Math.floor(leftTime / 3600);
var d = Math.floor(o / 24);
var m = Math.floor(leftTime / 60 % 60);
var s = leftTime % 60;
elt.innerHTML = o + "小時(shí):" + m + "分:" + s + "秒:" + ms.charAt(0);
setTimeout(displayTime, 100);
}
}
displayTime();
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js設(shè)計(jì)模式之代理模式及訂閱發(fā)布模式實(shí)例詳解
這篇文章主要介紹了js設(shè)計(jì)模式之代理模式及訂閱發(fā)布模式,結(jié)合實(shí)例形式詳細(xì)分析了代理模式及訂閱發(fā)布模式的概念、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-08-08
js形成頁面的一種遮罩效果實(shí)例代碼
這篇文章主要介紹了js形成頁面的一種遮罩效果實(shí)例代碼，有需要的朋友可以參考一下
2014-01-01
小程序上傳文件至云存儲的實(shí)現(xiàn)
在小程序云開發(fā)中，要實(shí)現(xiàn)上傳文件至云存儲，有兩種方案：云函數(shù)和HTTP?API，本文主要講講如何使用HTTP?API實(shí)現(xiàn)小程序外上傳文件至云存儲，感興趣的可以了解一下
2022-01-01
JS實(shí)現(xiàn)滑動插件
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解，對于大家學(xué)習(xí)javascript中的return知識有所幫助，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
js中l(wèi)ess常用的方法小結(jié)
下面小編就為大家?guī)硪黄猨s中l(wèi)ess常用的方法小結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
微信小程序?qū)崿F(xiàn)下拉篩選功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
基于JavaScript實(shí)現(xiàn)一個(gè)動態(tài)脫敏指令
數(shù)據(jù)脫敏是指在不影響數(shù)據(jù)分析結(jié)果的準(zhǔn)確性前提下,對原始數(shù)據(jù)中的敏感字段進(jìn)行處理,從而降低數(shù)據(jù)敏感度和減少個(gè)人隱私風(fēng)險(xiǎn)的技術(shù)措施,下面我們就來看看如何實(shí)現(xiàn)一個(gè)動態(tài)脫敏指令吧
2024-12-12
JavaScript字符串常用的方法
這篇文章主要介紹了JavaScript字符串常用的方法的相關(guān)資料,需要的朋友可以參考下
2016-03-03