足球游戏_中国足彩网¥体育资讯$

javascript特效实现--当前时间和倒计时效果的简单实例
来源:易贤网 阅读:939 次 日期:2016-08-01 14:00:36
温馨提示:易贤网小编为您整理了“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特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标