JavaScript實現前端倒計時效果
更新時間：2021年02月09日 09:43:42 作者：L在前方
這篇文章主要為大家詳細介紹了JavaScript實現前端倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現前端倒計時效果的具體代碼，供大家參考，具體內容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
padding: 10px;
font-size: 100px;
}
p {
float: left;
width: 300px;
height: 300px;
border: 1px solid #000000;
color: #ffffff;
background-color: #333333;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div>
<p class="hour">1</p>
<p class="minute">2</p>
<p class="second">3</p>
</div>
<script>
window.addEventListener('load', function() {
//獲取元素
var hour = document.querySelector('.hour'); //小時的黑盒子
var minute = document.querySelector('.minute'); //分鐘的黑色盒子
var second = document.querySelector('.second'); //秒數的黑色盒子
var inputTime = +new Date('2021-2-6 18:00:00'); //返回的是用戶輸入時間總的毫秒數
countDown(); //先調用一次這個函數，防止第一次刷新頁面有空白
//開啟定時器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //返回的是當前時間總的毫秒數
var times = (inputTime - nowTime) / 1000; //tiems是剩余時間總的毫秒數
var h = parseInt(times / 60 / 60 % 24); //時
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; //把剩余的小時給小時黑盒子
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); //當前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
})
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript判斷變量是對象還是數組的方法,本文分別使用instanceof和typeof實現,需要的朋友可以參考下2014-08-08
為了解決VSCode擴展i18nAlly在不同項目中無法正確找到翻譯文件路徑的問題,推薦在項目根目錄下的.vscode目錄中編輯settings.json文件進行配置,需要的朋友可以參考下2024-11-11
本篇文章通過實例給大家分享了layui實現動態(tài)和靜態(tài)分頁的詳細方法，以及效果展示，有需要的朋友可以跟著參考學習下。2018-04-04
javascript中數組（Array)對象和字符串（String)對象的常用方法總結
這篇文章主要介紹了javascript中數組（Array)對象和字符串（String)對象的常用方法,結合實例形式總結分析了javascript中關于數組和字符串的常用函數與使用技巧,需要的朋友可以參考下2016-12-12
js控制文本框只能輸入中文、英文、數字與指定特殊符號的實現代碼
下面小編就為大家?guī)硪黄猨s控制文本框只能輸入中文、英文、數字與指定特殊符號的實現代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問題,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了javascript+canvas制作九宮格小程序，效果非常棒，這里推薦給有需要的小伙伴們2014-12-12
使用Asp.net+Javascript控制的日期控件，需要的朋友可以參考下。2010-05-05
本文主要介紹了Chrome瀏覽器的alert彈窗禁止再次彈出后恢復的方法。具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07