javascript特效实现——当前时间和倒计时效果的简单实例


Posted in Javascript onJuly 20, 2016

这个效果的实现关键是对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特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
js 概率计算(简单版)
Sep 12 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
javascript中数组和字符串的方法对比
Jul 20 #Javascript
js简单实现图片延迟加载的方法
Jul 19 #Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 #Javascript
JavaScript新增样式规则(推荐)
Jul 19 #Javascript
JavaScript动态添加css样式和script标签
Jul 19 #Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 #Javascript
js基于cookie记录来宾姓名的方法
Jul 19 #Javascript
You might like
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
使用Python发现隐藏的wifi
2020/03/04 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
暑期研修感言
2014/02/17 职场文书
计算机专业自荐信
2014/05/24 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2014年导购员工作总结
2014/11/18 职场文书
转让协议书
2015/01/27 职场文书
三方协议书
2015/01/27 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
OpenCV实现普通阈值
2021/11/17 Java/Android