超实用的JavaScript代码段 --倒计时效果
现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果。
1、简单时间显示
讲解日期对象Date,并通过该对象获取时、分、秒等，让你自由提取所需时间内容。
<!DOCTYPE html>
<html>
<head>
<title>获取时间</title>
<script type="text/javascript">
window.onload = function(){
showTime();
}
function showTime(){
var myDate = new Date();
var year = myDate.getFullYear();//年
var month = myDate.getMonth() + 1;//月要+1
var date = myDate.getDate();//天是getDate(),不是getDay()
var dateArr = ["日","一",'二','三','四','五','六'];
var day = myDate.getDay();//getDay()是星期的第几天，0为日。
var hours = myDate.getHours();
var minutes = formatTime(myDate.getMinutes());
var seconds = formatTime(myDate.getSeconds());
var systemTime = document.getElementById("time");
systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
setTimeout("showTime()",500);
}
//格式化时间：分秒。
function formatTime (i){
if(i < 10){
i = "0" + i;
}
return i;
}
</script>
</head>
<body>
<div id ='time'></div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
显示结果：
2、倒计时时差
讲解gettime()等方法，及计算时间的方法，学会时间相差的天数。
<!DOCTYPE html>
<html>
<head>
<title>获取时间</title>
<script type="text/javascript">
window.onload = function(){
deadTime();
}
function deadTime(){
var nowTime = new Date();
var finalTime = new Date("2015-11-11");
var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
var date = Math.ceil(lefttime);
document.getElementById("time").innerHTML = date;
}
</script>
</head>
<body>
<div >距离双十一还有：<span id ='time'></span>天</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
显示效果：
3、 限时抢购
如何运用日期对象及方法，计算相差的天、时、分、秒的方法。
<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>
</head>
<body>
<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
var endtime=new Date("2015/11/11,12:20:12");//结束时间
var nowtime = new Date();//当前时间
var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
d=parseInt(lefttime/3600/24);
h=parseInt((lefttime/3600)%24);
m=parseInt((lefttime/60)%60);
s=parseInt(lefttime%60);
document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
if(lefttime<=0){
document.getElementById("LeftTime").innerHTML="团购已结束";
clearInterval(sh);
}
}
FreshTime();
var sh;
sh=setInterval(FreshTime,1000);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
知识点：
1.学会使用日期对象Date和方法。
2.学会不同时间内容的获取。
3.学会计算时差的方法。
本实例通过慕课网相关课程整理：慕课网—–倒计时效果。
转载：http://blog.csdn.net/i10630226/article/details/49530617
超实用的JavaScript代码段 --倒计时效果的更多相关文章
- 前端福利！10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
- 推荐10 个短小却超实用的 JavaScript 代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
- 超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- 《超实用的JavaScript代码段》—— 读后总结
这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- 超实用的JavaScript代码段 Item5 --图片滑动效果实现
先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...
- 超实用的JavaScript代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
- 超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...
- 超实用的JavaScript代码段 Item2 --伸缩菜单栏
伸缩菜单栏 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en&quo ...
随机推荐
- [Java解惑]应用
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Protractor AngularJS测试框架教程
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架.Protractor全自动化真实的模拟用户在真正的浏览 ...
- scala中如何编写自定义的流程控制结构
scala是一种函数式编程风格的语言,除了常见的if......else ,for ,while等传统的流程控制结构,也可以自定义流程控制的控制结构. 再了解scala如何实现编写新的流程结构,我们 ...
- SAP接口编程 之 JCo3.0系列(04) : 会话管理
在SAP接口编程之 NCo3.0系列(06) : 会话管理 这篇文章中,对会话管理的相关知识点已经说得很详细了,请参考.现在用JCo3.0来实现. 1. JCoContext 如果SAP中多个函数需要 ...
- Myeclipse 主题下载
Myeclipse 主题下载 下载网址: 1. 编辑区背景主题:http://www.eclipsecolorthemes.org 2. 框架主题:https://marketplace.eclips ...
- [转载] Linux下高并发socket最大连接数所受的各种限制
原文: http://mp.weixin.qq.com/s?__biz=MzAwNjMxNjQzNA==&mid=207772333&idx=1&sn=cfc8aadb422f ...
- Linux内核态用户态相关知识
http://www.cnblogs.com/bakari/p/5520860.html http://www.cnblogs.com/Anker/p/3269106.html
- 【转载】高性能IO设计 & Java NIO & 同步/异步 阻塞/非阻塞 Reactor/Proactor
开始准备看Java NIO的,这篇文章:http://xly1981.iteye.com/blog/1735862 里面提到了这篇文章 http://xmuzyq.iteye.com/blog/783 ...
- 简单RTOS学习(一) uc/os-II 工程模板建立
随着工业需求以及单片机性能越来越高,单个芯片能够且需要处理的任务也越来越多,使用传统前后台任务模式已经很难满足设计的需求,嵌入式实时操作系统正是在这种背景下发展起来,目前流行的有rt-thread,f ...
- gdufs 1237 最优分解问题
题目链接:http://cstfs.gdufs.edu.cn:8080/JudgeOnline/problem.jsp?id=1237 (好像是内网的0.0) 简单来说,这道题目就是把一个数分解为若干 ...