超实用的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 ...
随机推荐
- sql 基础练习题
select * from Student;select * from Courseselect ;select* from Teacherselect ;select * from SC;--创建测 ...
- FZU 2218 Simple String Problem（简单字符串问题）
Description 题目描述 Recently, you have found your interest in string theory. Here is an interesting que ...
- WebSphere MQ 入门指南
WebSphere MQ 入门指南这是一篇入门指南.我们从最基本的概念说起: 基础概念 对于MQ,我们需要知道4个名词:队列管理器.队列.消息.通道:对于编程设计人员,通常更关心消息和队列,对于维护管 ...
- 进程&线程
进程与线程的区别 什么是进程(Process):普通的解释就是,进程是程序的一次执行,而什么是线程(Thread),线程可以理解为进程中的执行的一段程序片段.在一个多任务环境中下面的概念可以帮助我们理 ...
- SQLserver批量删除空表
今天需要清理一个很大的数据库,里面表有一堆,而且有很多是空表.想着把数据库弄小点,于是想到一次性删掉所有空表. 废话不多说,上代码. 首先,查处所有的空表. select distinct a.nam ...
- php三维数组变二维数组
<?php $result = Array(0 => Array(0 => Array(bid => 41,brealname => 'we教官',cid => 4 ...
- Android手机分辨率基础知识（DPI,DIP计算）三
获得屏幕分辨率和密度,尺寸的代码片段 DisplayMetrics displayMetrics = new DisplayMetrics();getWindowManager().getDefaul ...
- ajax获取城市和相应的地区
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- windows多线程框架
#include <iostream> #include <windows.h> using namespace std; HANDLE hMutex; //public : ...
- visual studio 自带单元测试demo
0) 创建类,编写方法类1) 在方法点击鼠标右键,在运行测试(T)和调试测试(D)之间会有一个 <创建单元测试>选项.有则进入2,没有则看1.01.0) 菜单栏 工具-->自定义-- ...