<!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. Qt5官方demo分析集10——Qt Quick Particles Examples - Emitters

    此系列的所有文章都可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 前段时间去听了Qt在北京的开发人员大会,感觉QML ...

  2. CefSharp中ChromiumWebBrowser打开新页面处理（_blank）

    原文:CefSharp中ChromiumWebBrowser打开新页面处理(_blank) 版权声明:欢迎转载,但是请保留出处说明 https://blog.csdn.net/lanwilliam/a ...

  3. html5中 table数据导出到excel文件

    JS代码: /** * table数据导出到excel * 形参 table : tableId ; * sheetName : 工作薄名 * fileName : 文件名 * linkId :隐藏的 ...

  4. 配置 Visual Studio Tools for Apache Cordova

    原文:配置 Visual Studio Tools for Apache Cordova 1.连接地址 https://msdn.microsoft.com/zh-cn/library/vs/alm/ ...

  5. Ubuntu服务器搭建

    Ubuntu16 搭建Git 服务器 - 濮成林 - 博客园 https://www.cnblogs.com/charliePU/p/7528226.html Ubuntu 搭建 GitLab 笔记 ...

  6. delphi 程序强制结束自身（两种方法都暴力）

    procedure KillSelf;begin  Sleep(1000);  if not TerminateProcess(GetCurrentProcessId, 0) then  WinExe ...

  7. 【必须知道】Enum_Flags

    [Flags] enum AnyThings{ A=1, B=2, C=4, D=8 } 枚举赋值必须是2^n才可以,目的是实现他们的二进制表示中的 1 ,不要重叠,如 1=0001   2=0010 ...

  8. Linux下C/C++帮助手册安装方法

    1.  安装C的帮助手册 如果你使用的Linux发行版, 默认没有安装C语言的库函数MAN手册, 使用下面的方法解决: # sudo apt-get install manpages # sudo a ...

  9. Delphi中Menu设置Images属性后快捷按键下划线被隐藏解决方法

    现象:MainMenu设置Images属性后,看不到快捷按键的下划线,如:新建(&N) 分析:VCL中Menus.pas单元的代码,看到如下语句procedure TMenuItem.Adva ...

  10. WebP 极限压缩及ios实现

      WebP 极限压缩及ios实现 Levi.duan 会议提纲 概念以及定义 什么是Webp ? WebP (发音 weppy ),是一种同时提供了有损压缩与无损压缩的图片文件格式,是Google新 ...