刷新不重置，开始结束时间可修改倒计时_前端晚上12点定时重置时间组件为当天的时间资源-CSDN文库

共2个文件

html：1个

js：1个

需积分: 50 19 浏览量 2017-12-06 11:12:18 上传评论 1 收藏 34KB ZIP 举报

在IT领域，倒计时是一种常见的功能，广泛应用于各种应用程序和网页中，如在线考试、活动倒计时、定时任务等。"刷新不重置，开始结束时间可修改倒计时"这一标题揭示了该技术的核心特点：在页面刷新后，倒计时不会重新开始，而是继续从上次离开的时间点继续计数；同时，用户可以调整开始和结束时间，以适应不同的场景需求。让我们深入了解倒计时的实现原理。通常，倒计时是基于JavaScript或者服务器端语言（如Python、Java、PHP等）实现的。在客户端，JavaScript可以用来监听页面的刷新事件，并在页面加载完成后恢复倒计时的状态。这需要用到本地存储（如Web Storage或IndexedDB）来保存倒计时的剩余时间，在页面刷新后读取这些数据并重新启动倒计时。对于"刷新不重置"的功能，具体步骤如下： 1. 当倒计时开始时，将开始时间、结束时间和当前时间存入本地存储。 2. 页面刷新时，检测本地存储中的倒计时信息。 3. 计算当前时间与开始时间的差值，得到已过去的时间。 4. 将这个差值从结束时间中减去，得到新的剩余时间，并开始新的倒计时。接下来，我们讨论如何允许用户修改开始和结束时间。这通常涉及日期和时间选择器的集成，让用户能方便地选择自定义的开始和结束时间。日期和时间的选择可以通过HTML5的`<input type="datetime-local">`标签或者自定义的日期选择组件实现。一旦用户选择了新的时间，应用需要更新本地存储中的开始和结束时间，并根据新的时间重新计算倒计时。此外，倒计时的显示格式也是重要的用户体验因素。"可改成天时分秒，也可以是时分秒形式的"表明系统应具备灵活性，允许用户选择他们偏好的计时单位。例如，倒计时可以以天数为主单位，辅以小时、分钟和秒，或者直接以小时、分钟和秒展示。这需要在前端代码中添加相应的逻辑，根据用户的偏好动态切换显示样式。实现"刷新不重置，开始结束时间可修改倒计时"的技术涉及到以下几个关键点： 1. 使用本地存储机制保存倒计时状态。 2. 监听页面刷新事件，恢复倒计时。 3. 设计友好的用户界面，允许用户选择和修改开始及结束时间。 4. 提供灵活的计时单位显示，以提升用户体验。在压缩包文件"刷新不重置倒计时"中，可能包含了实现这些功能的源代码、示例或者文档，可以作为开发类似功能的参考。通过深入研究和理解这些资源，开发者能够更好地掌握倒计时的实现技巧，并在自己的项目中运用。

资源推荐

资源详情

资源评论

收起资源包目录

刷新不重置倒计时.zip （2个子文件）

刷新不重置倒计时

aa.html 2KB

jquery-1.11.2.min.js 94KB

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> </head> <div id="times_wrap" class="time_num"> 距离现在时间： <div class="time_w"> <span id="now_time" class="time"> </span > <span id="tellTime" class="time"> </span > </div> </div> <script type="text/javascript"> function showTime(){ var timeStr = '2017-12-05 14:20:00'; //获得的时间字符串. var timeStr = '2017-12-05 14:20:00'; //获得的时间字符串. if(timeStr==null || timeStr==''){ return; } //var end_str = (timeStr).replace(/-/g,"/"); var class_time = new Date(timeStr); //将时间字符串转换为时间. var now_time = new Date(); $("#now_time").html(class_time); var totalSecs=(class_time-now_time)/1000; //获得两个时间的总毫秒数. 靠前的就调换再减。 var days=Math.floor(totalSecs/3600/24); var hours=Math.floor((totalSecs-days*24*3600)/3600); var mins=Math.floor((totalSecs-days*24*3600-hours*3600)/60); var secs=Math.floor((totalSecs-days*24*3600-hours*3600-mins*60)); if (days != 0 ) { $("#tellTime").html("还有"+days+"天"+hours+"小时"+mins+"分钟"+secs+"秒"); }else if (hours == 0 && mins == 0) { $("#tellTime").html("还有"+secs+"秒"); }else if (hours == 0 && mins != 0) { $("#tellTime").html("还有"+mins+"分钟"+secs+"秒"); }else if (hours != 0) { $("#tellTime").html("还有"+hours+"小时"+mins+"分钟"+secs+"秒"); } } var clock; window.onload=function(){ clock=self.setInterval("showTime()", 500); } </script> </script> </html>

评论收藏

内容反馈