當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 倒计时动态效果（附带小天使）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 倒计时动态效果（附带小天使）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
倒計時動態效果
<!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>倒計時</title><style>div {margin: 200px;text-align: center;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}.maohao {background-color: white;color: black;width: 5px;}div h1 {text-align: center;}img {position: absolute;}</style> </head> <script>window.onload = function () {var hour = document.querySelector('.h');var minute = document.querySelector('.m');var second = document.querySelector('.s');var inputTime = +new Date('2021-5-12 20:00:00'); //獲取當前輸入的時間總毫秒countDown();// 一直調用（定時器）setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); //獲取當前時間的總毫秒// var inputTime = +new Date(time); //獲取當前輸入的時間總毫秒var times = (inputTime - nowTime) / 1000; //獲取剩余時間秒數// var d = parseInt(times / 60 / 60 / 24); //獲取天數// d = d < 10 ? '0' + d : d;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 d + '天' + h + '時' + m + '分' + s + '秒';hour.innerHTML = h;minute.innerHTML = m;second.innerHTML = s;};// 天使var photo = document.querySelector('img');document.addEventListener('mousemove', function (e) {var x = e.pageX;var y = e.pageY;photo.style.left = x - 30 + 'px';photo.style.top = y - 50 + 'px';});} </script><body><div><h1>倒計時</h1><span class="h"></span><span class="maohao">：</span><span class="m"></span><span class="maohao">：</span><span class="s"></span></div><img src="/photo/angel.gif" alt="">//小天使路徑 </body></html>路徑記得改改
總結
以上是生活随笔為你收集整理的JavaScript 倒计时动态效果（附带小天使）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LibreELEC（kodi）IPTV台
- 下一篇： JS 实现一个倒计时