js實(shí)現(xiàn)有趣的倒計(jì)時(shí)效果
js有趣的倒計(jì)時(shí)小案例,供大家參考,具體內(nèi)容如下

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
overflow: hidden;
width: 500px;
height: 500px;
background-color: #eeeeee;
margin: 0 auto;
}
h2 {
margin-top: 20px;
text-align: center;
color: #fff;
}
input {
width: 70px;
}
.ipt {
text-align: center;
margin-top: 50px;
}
.run {
width: 100px;
height: 100px;
background-color: #000;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 30px;
border-radius: 50%;
margin: 30px auto 0;
}
.juli {
text-align: center;
margin-top: 30px;
}
.sytime {
text-align: center;
margin-top: 60px;
font-size: 25px;
color: #fff;
}
.sytime span {
font-size: 30px;
color: red;
}
.juli span {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<h2>倒計(jì)時(shí)</h2>
<!-- 表單 -->
<div class="ipt">
請(qǐng)輸入: <input type="text">年<input type="text">月<input type="text">日
</div>
<!-- 開始按鈕 -->
<div class="run">開始</div>
<!-- 距離時(shí)間 -->
<p class="juli">現(xiàn)在距離-<span class="julitime">0000</span>-還剩:</p>
<!-- 剩余時(shí)間 -->
<div class="sytime">
<span>00</span>天
<span>00</span>小時(shí)
<span>00</span>分
<span>00</span>秒
</div>
</div>
<script>
// 獲取元素
// 表單
var ipt = document.getElementsByTagName('input');
// 按鈕
var btn = document.getElementsByClassName('run')[0];
// 距離年份
var julitime = document.getElementsByClassName('julitime')[0];
// 倒計(jì)時(shí)
var sytime = document.getElementsByClassName('sytime')[0];
var time = sytime.getElementsByTagName('span');
console.log(ipt, btn, julitime, time);
var timerId = null;
// 點(diǎn)擊事件
btn.onclick = function() {
if (ipt[1].value > 12 || ipt[2].value > 30) {
alert('月份要小于12且日要小于30');
return;
} else if (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') {
alert('內(nèi)容不能為空');
return;
}
timerId = setInterval(countTime, 1000);
}
function countTime() {
// 獲取輸入年份
var ipty = ipt[0].value;
// 獲取輸入月份
var iptm = ipt[1].value;
// 獲取輸入日份
var iptd = ipt[2].value;
// console.log(ipty, iptm, iptd);
var str = ipty + '-' + iptm + '-' + iptd;
// console.log(str);
// 賦值給距離時(shí)間
julitime.innerHTML = str;
// 當(dāng)前距離1970,1,1毫秒數(shù)
var nowDate = +new Date();
// 輸入時(shí)間距離1970,1,1毫秒數(shù)
var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd)
// 未來減去現(xiàn)在 秒數(shù)
var times = (inputFr - nowDate) / 1000;
var d = parseInt(times / 60 / 60 / 24) //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24) //時(shí)
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); //秒
s = s < 10 ? '0' + s : s;
// console.log(d, h, m, s);
time[0].innerHTML = d;
time[1].innerHTML = h;
time[2].innerHTML = m;
time[3].innerHTML = s;
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS 倒計(jì)時(shí)實(shí)現(xiàn)代碼(時(shí)、分,秒)
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- 簡(jiǎn)單易用的倒計(jì)時(shí)js代碼
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- 2種簡(jiǎn)單的js倒計(jì)時(shí)方式
- 原生JS實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)功能示例
- js幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)示例
- 一個(gè)不錯(cuò)的js html頁(yè)面倒計(jì)時(shí)可精確到秒
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
相關(guān)文章
JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器示例
這篇文章主要介紹了JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器,涉及javascript事件響應(yīng)及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04
Javascript動(dòng)手實(shí)現(xiàn)call,bind,apply的代碼詳解
這篇文章主要為大家詳細(xì)介紹了Javascript動(dòng)手實(shí)現(xiàn)call,bind,apply的代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果完整實(shí)例【測(cè)試可用】
這篇文章主要介紹了JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果,結(jié)合完整實(shí)例形式分析了javascript上傳圖片本地預(yù)覽的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
一文詳解JavaScript中的事件循環(huán)(event?loop)機(jī)制
JavaScript中的事件循環(huán)(Event?Loop)是一種重要的機(jī)制,用于管理異步代碼的執(zhí)行,它確保?JavaScript?單線程環(huán)境中的任務(wù)按照正確的順序執(zhí)行,同時(shí)允許異步操作如定時(shí)器、網(wǎng)絡(luò)請(qǐng)求和事件處理,本將給大家詳細(xì)的介紹一下JavaScript事件循環(huán)機(jī)制,感興趣的朋友可以參考下2023-12-12
詳解Bootstrap的aria-label和aria-labelledby應(yīng)用
這篇文章主要介紹了詳解Bootstrap的aria-label和aria-labelledby應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-01-01

