<!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. 初次使用glog

    一.安装配置 1.简单介绍 google 出的一个C++轻量级日志库,支持下面功能: ◆ 參数设置,以命令行參数的方式设置标志參数来控制日志记录行为: ◆ 严重性分级,依据日志严重性分级记录日志: ◆ ...

  2. 专访黄勇：Java在未来的很长一段时间仍是主流（把老板当情人，把同事当小孩，把客户当病人）

    url:http://www.csdn.net/article/2015-09-06/2825621 2015-09-06 13:18 摘要:本文采访了现任阿里巴巴公司系统架构师黄勇,从事近十年的Ja ...

  3. DataGridTemplateColumn

    DataGridTemplateColumn自定义单元格样式 <DataGrid Grid.Row="0" Name="BasicRuleDataGrid" ...

  4. 自定义函数Function

    定义 对于SQL Server来讲,我们声明一个变量的方式是用@变量名,而且相对于编程来讲,SQL Server声明的方式跟我们开了个玩笑,是先变量后面才是类型.对于需要传参跟不需要传参的方式,其实跟 ...

  5. SICP 1.11-1.13

    1.11 递归版本 (define (f n) (cond ((< n ) n) ()) (* (f (- n )) ) (* (f (- n )) ))))) 迭代版本 (define (f ...

  6. Boost的某些库还是需要生成二进制的库的，必须安装才行，以及使用库的方法

    头文件就是库使用者最常问的问题就是“我该怎么安装Boost”,这个也是我一开始最关心的问题,Boost这点做的很好,将大部分实现都封装在头文件里,所以对于一些基本的Boost库,其实是不需要安装的,只 ...

  7. axure跨inframe传递参数

    在global variable添加loginuser变量 在link to and external url or file添加如下:[[Item.action]]#loginuser=[[logi ...

  8. 用JavaScriptSerializer解析JSON

    引用System.Web.Extensions using System.Web.Script.Serialization; var serializer = new JavaScriptSerial ...

  9. Android 开发中,as或者idea对gradle的使用

    原文:Android 开发中,as或者idea对gradle的使用 本文属于转载收藏,侵删,出处:私人博客 ---------------------------------------------- ...

  10. 【Windows10 IoT开发系列】开发人员模式设置

    原文:[Windows10 IoT开发系列]开发人员模式设置  声明:本文转自微软Windows 开发人员中心(https://msdn.microsoft.com/library/windows/ ...