javascript 学习笔记（四）倒计时程序

首先看全部完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>countDown test</title><script type="text/javascript">function countDown(endDate) {var now = new Date();var deadtime = document.getElementById(endDate);var deadline = new Date(deadtime.value);//本地时间与格林威治标准时间 (GMT) 的分钟差var timeDiff = now.getTimezoneOffset();//此处有些不解，如果把分钟差转化成毫秒应该是timeDiff*60*1000，但是这样返回的数据不正确！var leave = Math.abs(deadline.getTime() - now.getTime() + timeDiff*60);var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var countDay = Math.floor(leave/day);//var countHour = Math.floor((leave - day*countDay)/hour);   两种计算思路var countHour = Math.floor(leave/hour - countDay*24);var countMinute = Math.floor(leave/minute) - countDay*24*60 - countHour*60;var countSecond = Math.floor(leave/1000) - countDay*24*60*60 - countHour*60*60 - countMinute*60;var outStr = "";if(deadline < now) {outStr = "距离"+deadtime.value+"已有"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒";} else {outStr = "距离"+deadtime.value+"还差"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒";}var showTime = document.getElementById("showTime");showTime.innerHTML = outStr;}
</script>
</head><body>
<p><label for="deadline">截止日期</label><input type="text" value="2011-06-11" id="deadline" /><input type="button" value="开始倒计时" οnclick="window.setInterval('countDown(\'deadline\')', 1000)" /></p>
<p id="showTime"></p>
</body>
</html>

html部分代码：

可在文本框中输入倒计时的时间，如果当前时间小于截止时间，则正常返回，反之，则返回距离截止日期到现在的时间

<p><label for="deadline">截止日期</label><input type="text" value="2011-06-11" id="deadline" /><input type="button" value="开始倒计时" οnclick="window.setInterval('countDown(\'deadline\')', 1000)" />
</p>
<p id="showTime"></p>

javascript部分代码：

 function countDown(endDate) {var now = new Date();var deadtime = document.getElementById(endDate);var deadline = new Date(deadtime.value);//本地时间与格林威治标准时间 (GMT) 的分钟差var timeDiff = now.getTimezoneOffset();//此处有些不解，如果把分钟差转化成毫秒应该是timeDiff*60*1000，但是这样返回的数据不正确！var leave = Math.abs(deadline.getTime() - now.getTime() + timeDiff*60);var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var countDay = Math.floor(leave/day);//var countHour = Math.floor((leave - day*countDay)/hour);   两种计算思路var countHour = Math.floor(leave/hour - countDay*24);var countMinute = Math.floor(leave/minute) - countDay*24*60 - countHour*60;var countSecond = Math.floor(leave/1000) - countDay*24*60*60 - countHour*60*60 - countMinute*60;var outStr = "";if(deadline < now) {outStr = "距离"+deadtime.value+"已有"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒";} else {outStr = "距离"+deadtime.value+"还差"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒";}var showTime = document.getElementById("showTime");showTime.innerHTML = outStr;}

转载于:https://www.cnblogs.com/webw3c/archive/2011/04/05/2006089.html

javascript 学习笔记（四）倒计时程序相关推荐

JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
JavaScript学习笔记--【黑马程序员】
目录一.编程语言 1.1 编程 1.2 计算机语言 1.3 编程语言 1.4 翻译器 1.5 编程语言和标记语言区别总结二.计算机基础 2.1 计算机组成 2.2.数据存储 2.3 数据存储单位 ...
JavaScript学习笔记(四十四) 装饰器
装饰器模式(Decorator) 在装饰器模式中,可以在运行时给一个对象动态的添加额外的功能.当和静态类打交道的时候(static classes),这可能是一个挑战.但在JavaScript中,对象 ...
蓝牙学习笔记(四)——AC692x程序烧录
程序烧录下载连接工具使用双端公对公USB线连接配套的强制下载工具,烧录时需要按下强制工具开关等到蓝灯灭,只有红灯亮的时候可以开始进行程序烧录(此时写入口供电). 加入密钥在提供的SDK中 ...
JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
JavaScript学习笔记（第二部分）总共四部分
JavaScript学习笔记(第二部分)总共四部分 4 对象(Object) 字符串String.数值Number.布尔值Boolean.空值Null.未定义Undefined是基本的数据类型,这些数 ...
JavaScript学习笔记（四）---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...
JavaScript学习笔记（第四部分）总共四部分(完结)
JavaScript学习笔记(第四部分)总共四部分 9 事件 9.1 事件对象当响应函数被调用时,浏览器每次都会将一个事件对象作为实参传递进响应函数中,这个事件对象中封装了当前事件的相关信息,比如: ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

javascript 学习笔记（四）倒计时程序

javascript 学习笔记（四）倒计时程序相关推荐

最新文章

热门文章

javascript 学习笔记（四） 倒计时程序

javascript 学习笔记（四） 倒计时程序相关推荐

最新文章

热门文章

javascript 学习笔记（四）倒计时程序

javascript 学习笔记（四）倒计时程序相关推荐