javascript特效实现——当前时间和倒计时效果的简单实例
这个效果的实现关键是对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特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JS/jQ实现免费获取手机验证码倒计时效果
最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面
-
JavaScript实现时间倒计时跳转(推荐)
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> (function () { var tian = document.getElementsByClassName('JS-tian')[0]; var shi = document.getElementsByClassName('JS-shi')[0]; var fen = document.getElementsByClassName('JS-fen')[0]; var miao = document.getEleme
-
最全面的JS倒计时代码
第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="
-
js实现精确到毫秒的倒计时效果
本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
点击按钮出现60秒倒计时的简单js代码(推荐)
点击按钮出现60秒倒计时的简单js代码(推荐) <!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 h
-
js发送短信倒计时的简单实现方法
如下所示: <!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"> <meta charset="utf-8"> &l
-
javascript特效实现——当前时间和倒计时效果的简单实例
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func
-
使用JavaScript实现弹出层效果的简单实例
声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 <!DOCTYPE html> <html> <head> <title>Window对象</title> <meta charset="utf-8"> </head> <body> <a hr
-
Javascript实现跑马灯效果的简单实例
页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel
-
用js实现放大镜的效果的简单实例
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery
-
jquery树形菜单效果的简单实例
<!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 http-equiv="Content-
-
原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会
-
JQuery实现DIV其他动画效果的简单实例
1.toggle 切换对象的隐藏和显示,可以用来代替show和hide <!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>
-
jquery实现跳到底部，回到顶部效果的简单实例(类似锚)
实例如下: <!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 http-equiv="Co
-
js和C# 时间日期格式转换的简单实例
下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整数1335258540000实际上是一个1970 年 1 月 1 日 00:00:00至这个DateTime中间间隔的毫秒数.通过javascript用eval函数可以把这个日期字符串转换为一个带有时区的Date对象,如下 用var date = eval('new ' + eval('/Date(
-
原生js实现jquery函数animate()动画效果的简单实例
通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参