本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { padding: 10px; font-size: 100px; } p { float: left; width: 300px; height: 300px; border: 1px solid #000000; color: #ffffff; background-color: #333333; text-align: center; line-height: 300px; } </style> </head> <body> <div> <p class="hour">1</p> <p class="minute">2</p> <p class="second">3</p> </div> <script> window.addEventListener('load', function() { //获取元素 var hour = document.querySelector('.hour'); //小时的黑盒子 var minute = document.querySelector('.minute'); //分钟的黑色盒子 var second = document.querySelector('.second'); //秒数的黑色盒子 var inputTime = +new Date('2021-2-6 18:00:00'); //返回的是用户输入时间总的毫秒数 countDown(); //先调用一次这个函数,防止第一次刷新页面有空白 //开启定时器 setInterval(countDown, 1000); function countDown() { var nowTime = +new Date(); //返回的是当前时间总的毫秒数 var times = (inputTime - nowTime) / 1000; //tiems是剩余时间总的毫秒数 var h = parseInt(times / 60 / 60 % 24); //时 h = h < 10 ? '0' + h : h; hour.innerHTML = h; //把剩余的小时给小时黑盒子 var m = parseInt(times / 60 % 60); //分 m = m < 10 ? '0' + m : m; minute.innerHTML = m; var s = parseInt(times % 60); //当前的秒 s = s < 10 ? '0' + s : s; second.innerHTML = s; } }) </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
idea官方推送了2020.2.4版本的更新,那么大家最关心的问题来了,之前激活idea202...
问题:我们在做flex的开发中,如果用到别人搭建好的框架,而别人的server名称往...
本文转载自微信公众号「SH的全栈笔记」,作者SH。转载本文请联系SH的全栈笔记公...
来源:DeepenStudy 漏洞文件:js.asp % Dimoblog setoblog=newclass_sys oblog.a...
本文转载自微信公众号「SQL数据库」,作者丶平凡世界 。转载本文请联系开发公众...
本文实例讲述了AJAX+Servlet实现的数据处理显示功能。分享给大家供大家参考,具...
CKeditor,以前叫FCKeditor,已经使用过好多年了,功能自然没的说。最近升级到3....
在Flash Player 10.1及以上版本中,adobe新增了全局错误处理程序UncaughtErrorEv...
前言 项目开发中不管是前台还是后台都会遇到烦人的null,数据库表中字段允许空值...
大家好,我是狂聊君。 今天来聊一聊 Mysql 缓存池原理。 提纲附上,话不多说,直...