JS简单实用的倒计时效果实现代码

更新时间：2012年08月30日 16:33:40 作者：

没有事研究了下倒计时的效果，因此自己练习了一下，需要的朋友可以参考下

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>倒计时</title> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> *{ margin: 0; padding: 0; } ul,li{list-style: none;} #show_time{color: #f00;font-size: 24px;font-weight: bold;} </style> </head> <body> <div id="show_time"> </div> <script type="text/javascript"> function countdown(){ var show_time = document.getElementById("show_time"); endtime = new Date("12/31/2012 23:59:59");//结束时间 today = new Date();//当前时间 delta_T = endtime.getTime() - today.getTime();//时间间隔 if(delta_T < 0){ clearInterval(auto); show_time.innerHTML = "倒计时已经结束"; } window.setTimeout(countdown,1000); total_days = delta_T/(24*60*60*1000);//总天数 total_show = Math.floor(total_days);//实际显示的天数 total_hours = (total_days - total_show)*24;//剩余小时 hours_show = Math.floor(total_hours);//实际显示的小时数 total_minutes = (total_hours - hours_show)*60;//剩余的分钟数 minutes_show = Math.floor(total_minutes);//实际显示的分钟数 total_seconds = (total_minutes - minutes_show)*60;//剩余的分钟数 seconds_show = Math.floor(total_seconds);//实际显示的秒数 show_time.innerHTML = "距离结束还有:" + total_show + "天" + hours_show + "时" + minutes_show + "分" + seconds_show + "秒"; } countdown(); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

倒计时

js本身的局限性别让javascript做太多事
最近常有人在Q群里发问诸如"怎样让js操作文件"、"怎样让js实现多线程"等问题。
2010-03-03
原生JS可拖动弹窗效果实例代码
这篇文章介绍了原生JS可拖动弹窗效果实例代码，有需要的朋友可以参考一下
2013-11-11
彪哥1.1(智能表格)提供下载
彪哥1.1(智能表格)提供下载...
2006-09-09
JS取request值以及自动执行使用示例
在网页中JS函数自动执行常用三种方法，下面为大家详细介绍下JS取request值以及自动执行使用,需要的朋友可以参考下
2014-02-02
JS快速实现简单计算器
这篇文章主要为大家详细介绍了JS快速实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-04-04
js获取GridView中行数据的两种方法分享
这篇文章介绍了js获取GridView中行数据的方法，有需要的朋友可以参考一下
2013-07-07
创建与框架无关的JavaScript插件
这篇文章主要介绍了创建与框架无关的JavaScript插件，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-12-12
OpenCV.js实现乔丹动图素描效果图文教程
这篇文章主要为大家介绍了OpenCV.js实现乔丹动图素描效果的图文教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
uni-app中onBackPress()监听页面返回(更新数据)
这篇文章主要给大家介绍了关于uni-app中onBackPress()监听页面返回(更新数据)的相关资料,在UniApp中,可以通过监听页面刷新的生命周期函数来监听页面的返回,然后重新调用接口进行刷新,需要的朋友可以参考下
2023-10-10
layui点击按钮页面会自动刷新的解决方案
今天小编就为大家分享一篇layui点击按钮页面会自动刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10

JS简单实用的倒计时效果实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具