javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用。
一共有三个例子，HTML结构如下，就不添加CSS样式了。
<body>
当前时间：<p id="p1"></p>
高考倒计时：<p id="p2"></p>
限时抢购：<p id="p3"></p>
</body>
主要体会javascript的实现
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
p3=document.getElementById("p3");
showtime1();
showtime2();
showtime3();
}
1.简单的实现当前时间的显示
function showtime1() {
var nowdate=new Date();//创建Date对象nowdate,以获取当前时间
var year=nowdate.getFullYear(),//获取年份
month=nowdate.getMonth()+1,//获取月份，getMonth()得到的是0-11，需要加1
date=nowdate.getDate(),//获取日份
day=nowdate.getDay(),//获取一周中的某一天，getDay()得到的是0-6
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
h=nowdate.getHours(),
m=nowdate.getMinutes(),
s=nowdate.getSeconds(),
h=checkTime(h),//函数checkTime用于格式化时，分，秒
m=checkTime(m),
s=checkTime(s);
p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
setTimeout(showtime1, 1000);//反复执行函数本身
}
其中的checkTime函数如下：
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
因为平时看到的时间格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09这样的格式。所以在从9变成10的过程中，有一位数，变成两位数，同样在充59秒变为0秒或者59分变为0分或者23时变为0时。
比如 23:59:59 再下一秒 应该变为00:00:00；若未使用checkTime函数进行处理，则会变为0:0:0，这样格式上就有点不统一，而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了！！！)
2.高考倒计时效果实现
function showTime2() {
var nowtime=new Date(),//获取当前时间
endtime=new Date("2017/6/6");//定义结束时间
var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数
leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数
lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数
leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数
lefts=Math.floor(lefttime/1000%60);//计算秒数
p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
setTimeout(showTime2, 1000);
}
其中比较重要的几点：
① 定义结束的时间endtime=new Date("2017/6/6")是通过new一个带有参数的Date对象，直接 new Date()则是直接获取到当前的时间；
② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。
③天数，小时数，分钟数和秒数的计算，%（取模运算）。得到距离结束时间的毫秒数（剩余毫秒数），除以1000得到剩余秒数，再除以60得到剩余分钟数，再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数，剩余分钟数 lefttime/(1000*60) 模60得到分钟数，剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。
3.限时抢购倒计时效果
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),//设置结束时间
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
setTimeout(showtime3, 1000);
}
其实和第二个例子大同小异，区别是结束时间的设置 new Date("2020/1/1,00:00:00")
下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时效果</title>
<script type="text/javascript">
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
window.onload=function () { var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
showtime1();
showtime2();
showtime3();
}
function showtime1() {
var nowdate=new Date();
var year=nowdate.getFullYear(),//年份
month=nowdate.getMonth()+1,//月份
date=nowdate.getDate(),//日
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
day=nowdate.getDay(),//getDay获取0-6
h=nowdate.getHours(),
h=checkTime(h),
m=nowdate.getMinutes(),
m=checkTime(m),
s=nowdate.getSeconds(),
s=checkTime(s);
p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
setTimeout(showtime1, 1000);
}
function showtime2() {
var nowtime=new Date(),
endtime=new Date("2017/6/6");
var lefttime=endtime.getTime()-nowtime.getTime(),
leftd=Math.floor(lefttime/(1000*60*60*24)),
lefth=Math.floor(lefttime/(1000*60*60)%24),
leftm=Math.floor(lefttime/(1000*60)%60),
lefts=Math.floor(lefttime/1000%60);
p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
setTimeout(showtime2, 1000);
}
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
setTimeout(showtime3, 1000);
}
</script>
</head>
<body>
当前时间：<p id="p1"></p>
高考倒计时：<p id="p2"></p>
限时抢购：<p id="p3"></p>
</body>
</html>
#行者杰客#
为者常成，行者常至。婴非有异与人也，常为而不置，常行而不休者
javascript特效实现(4)——当前时间和倒计时效果的更多相关文章
- javascript 特效实现(1)——展开选项和收起效果
知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...
- Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
- 二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
- JavaScript特效（调试笔记）
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- JS 显示时间与倒计时练习
显示时间与倒计时 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- 超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- 【JavaScript】在同一个网页中实现多个JavaScript特效
在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...
- Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
随机推荐
- html图片上下翻滚展示代码
<marquee behavior="alternate" scrolldelay="1" direction="up" width= ...
- 用c#写的一个局域网聊天客户端 类似小飞鸽
用c#写的一个局域网聊天客户端 类似小飞鸽 摘自: http://www.cnblogs.com/yyl8781697/archive/2012/12/07/csharp-socket-udp.htm ...
- 重新想象 Windows 8 Store Apps (60) - 通信: 获取网络信息, 序列化和反序列化
[源码下载] 重新想象 Windows 8 Store Apps (60) - 通信: 获取网络信息, 序列化和反序列化 作者:webabcd 介绍重新想象 Windows 8 Store Apps ...
- Liunx目录结构
/bin: bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot:这里存放的是启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件. /dev :dev是Device ...
- 关于领域驱动设计（DDD）仓储的思考
为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计一个类似DAL层的东东 ...
- Web网站数据”实时”更新设计
请注意这个实时打上了双引号,没有绝对的实时,只是时间的颗粒不一样罢了(1ms,1s,1m). 服务器数据有更新可以快速通知客户端.Web 基于取得模式,而服务器建立大量的和客户端连接来提供数据实时更新 ...
- sublimeCodeIntel 的配置
在项目的根目录目录下建立.codeintel/config 但是在windows 需要进入dos 环境下建立.以点开头的文件夹和文件.资源管理器不允许创建点开头的文件或文件夹,但在命令提示符下是可以的 ...
- ServiceStack.Text反序列化lowercase_underscore_names格式的JSON
代码: [Test] public void Test() { JsConfig.PropertyConvention = JsonPropertyConvention.Lenient; var js ...
- JS写返回上一级
应产品需求,自己的网站上要有返回上一级的需求,几经周折,做个小总结. (1): $("XX").on("click",function(){ wind ...
- Microsoft SQL Server，附加数据库 错误:Error 916解决方法
错误信息:错误提示:标题: Microsoft SQL Server Management Studio Express —————————— 无法为此请求检索数据. (Microsoft.SqlS ...