<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>倒计时</title>

     <style>.time-item {

         width: 450px;

         height: 45px;

         margin: 0 auto;

       }

       .time-item strong {

           background: orange;

           color: #fff;

           line-height: 49px;

           font-size: 36px;

           font-family: Arial;

           padding: 0 10px;

           margin-right: 10px;

           border-radius: 5px;

           box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

       }

       .time-item > span {

           float: left;

           line-height: 49px;

           color: orange;

           font-size: 32px;

           margin: 0 10px;

           font-family: Arial, Helvetica, sans-serif;

       }

       .title {

         width: 260px;

         height: 50px;

         margin:200px auto 50px auto;

       }</style>

 </head>

 <body onload="leftTimer()">

     <h1 class="title">距离光棍节，还有</h1>

   <div class="time-item" >

     <span><span id="day"></span>天</span>

     <strong><span id="hour"></span>时</strong>

     <strong><span id="minute"></span>分</strong>

     <strong><span id="second"></span>秒</strong>

   </div>

   <script type="text/javascript">

       function leftTimer(year,month,day,hour,minute,second){

           // 参数monthIndex 是从“0”开始计算的，这就意味着一月份为“0”，十二月份为“11”

           //以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。

           var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数

           //parseInt解析一个字符串，返回整数

           var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10);

           var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10);

           var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);

           var seconds = parseInt(leftTime / 1000 % 60, 10);

           //不足10的前面加上0

           days = checkTime(days);

           hours = checkTime(hours);

           minutes = checkTime(minutes);

           seconds = checkTime(seconds);

           // 设置计时器

           setInterval("leftTimer(2019,11,11,11,11,11)",1000);

           //将时间加到文中

           document.getElementById('day').innerHTML = days;

           document.getElementById('hour').innerHTML = hours;

           document.getElementById('minute').innerHTML = minutes;

           document.getElementById('second').innerHTML = seconds;

       }

       function checkTime(i){ //将0-9的数字前面加上0

           if(i<10)

           {

               i = "0" + i;

           }

           return i;

       }

   </script>

 </body>

 </html>

JavaScript-倒计时效果的更多相关文章

  1. JavaScript倒计时效果

    实现思路: 输入的时间减去现在的时间就是剩余的时间,但是不能拿着时分秒相减,比如05分减去25分,结果会是负的. 可以用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的 ...

  2. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

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

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...

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

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

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

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  6. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. Javascript之实现页面倒计时效果

    本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...

  8. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  9. jquery网页倒计时效果，秒杀，限时抢购！

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. error C2220: 警告被视为错误 - 没有生成“object”文件

    原文:error C2220: 警告被视为错误 - 没有生成"object"文件 这种错误的原因是:原因是该文件的代码页为英文,而我们系统中的代码页为中文.   解决方案: 1. ...

  2. 基于VC面部识别软件（识别出人脸特征）

    最近在学校MFC和Opencv,毕业只是做面部识别软件,所以写一个,我觉得很简单. 第一个VC组态opencv.不用说.非常easy,网上资料非常多,然后就是设计界面啦,这个全然凭个人喜好了,我设计的 ...

  3. Python 推断素数

    a = raw_input() #输入数字 a = int(a) #铸造成int b=True #的标记 for i in range(2,a): #从2开始循环本身 if a%i==0: #除了自己 ...

  4. Vertica变化Local时间到GMT时间

    在Vertica的数据库的使用过程中碰到这么一种场景.程序从不同一时候区的集群中收集数据写入同一张表,然后我们须要把这些数据依照GMT时间来显示. 此时我们能够通过Vertica提供TIME ZONE ...

  5. WPF特效-绘图

    原文:WPF特效-绘图                  WPF玩起来还是挺炫酷的.我实现的效果:不同色块交叉,交叉部分颜色叠加显示.(叠加部分暂时用随机颜色代替).单独色块点击弹出以色块颜色为主的附 ...

  6. Vmware 占用宿主机硬盘空间只增不减

    问题: vmware 占用硬盘空间只增大不减少.即使你删除虚拟机系统里面的文件,占用宿主机的硬盘空间也不释放.用了一段时间后空间不够了. 解决办法: 方法一: 把一部分*sxxx.vmdk文件剪切到其 ...

  7. MVC WebApi的两种访问方法

    //UserInfoController using ClassLibrary; using System;using System.Collections.Generic;using System. ...

  8. php 获取今日、昨日、本周,上周、本月,上月,季度的起始时间戳和结束时间戳的方法

    php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日.上周.本月的起始 ...

  9. 微信小程序把玩（四十）animation API

    原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...

  10. 使用Advanced Installer 13.1打包发布 Windows Service服务程序

    原文: 使用Advanced Installer 13.1打包发布 Windows Service服务程序 项目中需要用到一个定时推送案件状态的需求,本人小菜一只,在同事建议下要写成一个windows ...