當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
【倒计时】用JS写出京东倒计时效果
生活随笔
收集整理的這篇文章主要介紹了
【倒计时】用JS写出京东倒计时效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.倒計(jì)時(shí)效果
這是一段簡(jiǎn)單的倒計(jì)時(shí)代碼，倒計(jì)時(shí)效果將基于此代碼進(jìn)行修改
<script>function getDaojishi(time) {var date = +new Date();//返回當(dāng)前時(shí)間總毫秒數(shù)var now = +new Date(time);//返回用戶(hù)輸入時(shí)間總毫秒數(shù)var times = (now - date) / 1000;//剩余時(shí)間總秒數(shù)var t = parseInt(times / 60 / 60 / 24);//天t = t < 10 ? '0' + t : t;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;return t + '天' + h + '小時(shí)' + m + '分鐘' + s + '秒'}var shijian = getDaojishi('2022-7-1 00:00:00');console.log(shijian);var dates = new Date();console.log(dates);</script>2、京東倒計(jì)時(shí)效果
這是按照京東的倒計(jì)時(shí)效果進(jìn)行的解析，代碼可能會(huì)有點(diǎn)區(qū)別，大致原理如此：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {position: relative;margin: 100px auto;width: 240px;height: 340px;padding-top: 51px;background-color: red;text-align: center;box-sizing: border-box;}.p1 {width: 240px;height: 70px;line-height: 70px;color: aliceblue;font-size: 40px;}.p2 {width: 240px;height: 40px;line-height: 40px;color: #ccc;font-size: 23px;}.p3 {width: 240px;height: 60px;line-height: 60px;font-size: 20px;color: #fff;}.p4 {width: 240px;height: 45px;line-height: 45px;font-size: 18px;color: #fff;}.times {width: 240px;height: 74px;text-align: center;}span {display: inline-block;margin-top: 12px;width: 50px;height: 50px;background-color: #000;margin-right: 5px;font-size: 30px;color: #fff;line-height: 50px;}</style> </head><body><div class="box"><div class="'txt"><div class="p1">京東秒殺</div><div class="p2">FLASH DEALS</div><div class="p3">肖友無(wú)敵</div><div class="p4">本場(chǎng)距離結(jié)束還剩</div></div><div class="times"><span class="hours">1</span><span class="min">2</span><span class="second">3</span></div></div><script>var hours = document.querySelector('.hours')var min = document.querySelector('.min')var second = document.querySelector('.second')var now = +new Date('2022-7-1 00:00:00'); //返回用戶(hù)輸入時(shí)間總毫秒數(shù)getDaojishi(); // 我們先調(diào)用一次這個(gè)函數(shù)，防止第一次刷新頁(yè)面有空白// 開(kāi)啟定時(shí)器setInterval(getDaojishi, 1000)function getDaojishi(time) {var date = +new Date(); //返回當(dāng)前時(shí)間總毫秒數(shù)var times = (now - date) / 1000; //剩余時(shí)間總秒數(shù)var t = parseInt(times / 60 / 60 / 24); //天t = t < 10 ? '0' + t : t;var h = parseInt(times / 60 / 60 % 24); //小時(shí)h = h < 10 ? '0' + h : h;hours.innerHTML = h;var m = parseInt(times / 60 % 60); //分鐘m = m < 10 ? '0' + m : m;min.innerHTML = m;var s = parseInt(times % 60); //秒s = s < 10 ? '0' + s : s;second.innerHTML = s;// return t + '天' + h + '小時(shí)' + m + '分鐘' + s + '秒'}</script> </body></html>以上便是全部代碼，原理是基于最開(kāi)始的倒計(jì)時(shí)JS代碼，然后用HTML和CSS加以修飾和調(diào)用！
如果有錯(cuò)誤或者有能優(yōu)化的地方，歡迎提出！
總結(jié)
以上是生活随笔為你收集整理的【倒计时】用JS写出京东倒计时效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： linux进入pe系统,如何进入pe系统
- 下一篇： QAM调制原理_广播百科 QAM