<!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. 使用Struts2的iterator标签遍历复杂Map种类

    1.建一个Webproject.加入Struts2支持. 2.创建两个实体类: a). Mother(母亲)的Java类. package struts.map.entity; import java ...

  2. x:Static , StaticResource 和DynamicResource等XAML 扩展用法

    原文:x:Static , StaticResource 和DynamicResource等XAML 扩展用法 前提: <system:String x:Key="{Component ...

  3. python_简单的DB统计

    import numpy as npimport pylab as pldates=['20170314','20170315','20170316','20170317','20170318','2 ...

  4. C 语言main 函数终极探秘（&& 的含义是：如果 && 前面的程序正常退出，则继续执行 && 后面的程序，否则不执行）

           所有的C程序必须定义一个称之为main的外部函数,这个函数是程序的入口,也就是当程序启动时所执行的第一个函数,当这个函数返回时,程序也将终止,并且这个函数的返回值被看成是程序成功或失败的 ...

  5. WPF 4 DataGrid 控件（进阶篇一）

    原文:WPF 4 DataGrid 控件(进阶篇一)      上一篇<WPF 4 DataGrid 控件(自定义样式篇)>中,我们掌握了DataGrid 列表头.行表头.行.单元格相关的 ...

  6. 【推荐网站】下载国外网盘+强大的离线下载站—offcloud.com

    博主在网上浏览时看到一篇帖子,推荐了一个离线下载网站–offcloud.com,支持上传种子文件.磁力链和几十家网盘的直连下载,厉害了我的哥,这是个啥网站这么666.即使之前咱们写了几篇文章来自建下载 ...

  7. WPF值转换器的使用

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  8. Selenium-基础操作

    一.测试代码 @Test public void test() { WebDriver driver = new FirefoxDriver(); // 打开当前包中的index页面 driver.g ...

  9. WinForm 清空界面控件值的小技巧

    原文:WinForm 清空界面控件值的小技巧 在WinForm里面有时候需要清空自己输入内容或是选择的选项,以便重新操作流程,那么一般你是怎么清空界面各个控件值的呢?如果窗体里面控件,尤其是TextB ...

  10. Windows Phone SplashScreen初始屏幕示例

    protected override void OnLaunched(LaunchActivatedEventArgs args) { if (args.PreviousExecutionState ...