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 相关文章推荐
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue实现图片懒加载的方法分析
Feb 05 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Vue.js用法详解
2017/11/13 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Python读取图片属性信息的实现方法
2016/09/11 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python urllib2运行过程原理解析
2020/06/04 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
一道Delphi面试题
2016/10/28 面试题
九年级物理教学反思
2014/01/29 职场文书
校园文明标语
2014/06/13 职场文书
镇创先争优活动总结
2014/08/28 职场文书
婚宴邀请函
2015/01/30 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
戒赌保证书
2015/05/11 职场文书
煤矿隐患排查制度
2015/08/05 职场文书