當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【倒计时】用JS写出京东倒计时效果
生活随笔
收集整理的這篇文章主要介紹了
【倒计时】用JS写出京东倒计时效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.倒計時效果
這是一段簡單的倒計時代碼，倒計時效果將基于此代碼進行修改
<script>function getDaojishi(time) {var date = +new Date();//返回當前時間總毫秒數var now = +new Date(time);//返回用戶輸入時間總毫秒數var times = (now - date) / 1000;//剩余時間總秒數var t = parseInt(times / 60 / 60 / 24);//天t = t < 10 ? '0' + t : t;var h = parseInt(times / 60 / 60 % 24);//小時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 + '小時' + m + '分鐘' + s + '秒'}var shijian = getDaojishi('2022-7-1 00:00:00');console.log(shijian);var dates = new Date();console.log(dates);</script>2、京東倒計時效果
這是按照京東的倒計時效果進行的解析，代碼可能會有點區別，大致原理如此：
<!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">肖友無敵</div><div class="p4">本場距離結束還剩</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'); //返回用戶輸入時間總毫秒數getDaojishi(); // 我們先調用一次這個函數，防止第一次刷新頁面有空白// 開啟定時器setInterval(getDaojishi, 1000)function getDaojishi(time) {var date = +new Date(); //返回當前時間總毫秒數var times = (now - date) / 1000; //剩余時間總秒數var t = parseInt(times / 60 / 60 / 24); //天t = t < 10 ? '0' + t : t;var h = parseInt(times / 60 / 60 % 24); //小時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 + '小時' + m + '分鐘' + s + '秒'}</script> </body></html>以上便是全部代碼，原理是基于最開始的倒計時JS代碼，然后用HTML和CSS加以修飾和調用！
如果有錯誤或者有能優化的地方，歡迎提出！
總結
以上是生活随笔為你收集整理的【倒计时】用JS写出京东倒计时效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux进入pe系统,如何进入pe系统
- 下一篇： 玩转 SSH（六）：SpringMVC