当前时间和倒计时效果

这个效果的实现关键是对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>
时间: 2024-10-10 02:45:54

当前时间和倒计时效果的相关文章

javascript特效实现(4)——当前时间和倒计时效果

这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func

ecshop促销时间倒计时效果

ecshop促销时间倒计时效果的实现如下: 1.首先修改程序部分 打开includes/lib_goods.php 找到get_promote_goods()函数部分 在 $goods[$idx]['url'] = build_uri('goods', array('gid' => $row['goods_id']), $row['goods_name']); 下面增加代码 $time = gmtime(); if ($time >= $row['promote_start_date'] &a

Andorid实现点击获取验证码倒计时效果

这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现. 1.先进行倒计时工具类的封装 1 public class CountDownTimerUtils extends CountDownTimer { 2 private TextView mTextView; 3 4 /** 5 * @param

网页上的倒计时效果

<!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><title>jquery数字倒计时代码</title&

js实现倒计时效果

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>倒计时效果</title><link rel="stylesheet" href="css/demo.css" /></head> <body&g

Android倒计时效果

借用聚美优品的广告词来开始今天的文章之旅: 从未年轻过的人,一定无法体会这个世界 的偏见.我们被世俗拆散,也要为爱情勇 往直前:我们被房价羞辱,也要让简陋的 现实变的温暖:我们被权威漠视,也要为 自己的天分保持骄傲:我们被平庸折磨, 也要开始说走就走的冒险.所谓的光辉岁 月,并不是后来闪耀的日子,而是无人问 津时,你对梦想的偏执,你是否有勇气, 对自己忠诚到底,我是Bruce常,我为自己加油. 平常开发中,在做倒计时效果的时候,经常需要用到定时器,今天看到一篇文章,专门写 定时器的,我就仔细阅读

倒计时效果

倒计时效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时效果</title> </head> <body> <div>倒计时:<span id="show"></span></div> <scri

超实用的JavaScript代码段 Item1 --倒计时效果

现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="

Android -- 自定义view实现keep欢迎页倒计时效果

1,最近打开keep的app的时候,发现它的欢迎页面的倒计时效果还不错,所以打算自己来写写,然后就有了这篇文章. 2,还是老规矩,先看一下我们今天实现的效果 相较于我们常见的倒计时,这次实现的效果是多了外面圆环的不断减少,这也是我们这次自定义view的有意思的一点. 知道了效果我们先来效果分析一波,首先是一个倒计时效果,计时的时候上面的圆弧不断的减少,里面的文字也不断的变化,在视觉上的改变就大致为这两部分,但是实际上我们的ui是由三部分来构成的:里面的实心圆.外面的圆弧.里面的文字.知道了我们u