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需再刷新一下页面才能执行]

您可能感兴趣的文章:

倒计时

ES6新增的数组知识实例小结
这篇文章主要介绍了ES6新增的数组知识,结合实例形式分析了ES6的数组新增知识点、使用技巧与相关注意事项,需要的朋友可以参考下
2020-05-05
JS获取字符串型数组下标的数组长度的代码
JS获取字符串型数组下标的数组长度的代码，需要的朋友可以参考下
2013-03-03
Javascript模块模式分析
javascritp模式讲解全局变量是魔鬼。在YUI中，我们仅用两个全局变量：YAHOO和YAHOO_config。YUI的一切都是使用YAHOO对象级的成员或这个成员作用域内的变量。我们建议在你的应用程序也使用类似的规则。
2008-05-05
使用 UniApp 实现小程序的微信登录功能
这篇文章主要介绍了使用 UniApp 实现小程序的微信登录功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
javascript每日必学之多态
javascript每日必学之多态，介绍了有关多态的相关内容，感兴趣的小伙伴们可以参考一下
2016-02-02
新手快速入门微信小程序组件库 iView Weapp
这篇文章主要介绍了新手快速入门微信小程序组件库 iView Weapp，iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库,需要的朋友可以参考下
2019-06-06
input 输入框内的输入事件详细分析
input 输入框内的输入事件详细分析,需要的朋友可以参考下。
2010-03-03
JavaScript改变HTML元素的样式改变CSS及元素属性
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下
2013-11-11
JS使用cookie设置样式的方法
这篇文章主要介绍了JS使用cookie设置样式的方法,涉及javascript样式的设置与cookie的读写相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
JS实现AES加密并与PHP互通的方法分析
这篇文章主要介绍了JS实现AES加密并与PHP互通的方法,结合实例形式分析了javascript与php的加密、解密算法相关操作技巧,需要的朋友可以参考下
2017-04-04