欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

JavaScript 倒计时动态效果（附带小天使）

发布时间：2024/1/1 javascript 46 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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 倒计时动态效果（附带小天使）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。