下面小编就为大家带来一篇 javascript 特效实现——当前时间和倒计时效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这个效果的实现关键是对 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) $),
- //计算小时数
- leftm = Math.floor(lefttime / (1000 * 60)`),
- //计算分钟数
- lefts = Math.floor(lefttime / 1000`); //计算秒数
- 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)$),
- m=Math.floor(lefttime/60`),
- s=Math.floor(lefttime`);
- 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) $),
- leftm = Math.floor(lefttime / (1000 * 60)`),
- lefts = Math.floor(lefttime / 1000`);
- 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) $),
- m = Math.floor(lefttime / 60`),
- s = Math.floor(lefttime`);
- 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 特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0306/264191.html