<!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. OpenGL（九） 三维混色和深度缓存设置

    颜色的混合在现实世界中非常常见,例如隔着有色玻璃观看物体,此时在观察者严重呈现出来物体的颜色就是玻璃的颜色和物体的颜色的混合. OpenGL在RGBA颜色模式下使用函数glenable(GL_BLEN ...

  2. 最新用WPF为触摸屏写了一个手写程序，双格输入的

    原文:最新用WPF为触摸屏写了一个手写程序,双格输入的 双格输入可以提高手写速度,当前字写完以后可以自动识别提交,写下一个字.这样比单格手写速度提高一倍.特别适合触摸屏程序使用 界面如下: 程序如下: ...

  3. 构建自己的PHP框架（MVC）

    完整项目地址:https://github.com/Evai/Aier 规划文件夹 新建 MFFC/app 文件夹,在 app 中创建 controllers.models.views 三个文件夹,开 ...

  4. WPF MvvmLight简单实例(1) 页面导航

    原文:WPF MvvmLight简单实例(1) 页面导航 实现了那些功能,先看看截图: 操作描述: 在程序运行后,点击“Load”按钮,页面会加载PageOne,点击PageOne页面中的“Next” ...

  5. 在vs2015上使用asp.net core+ef core

    官方的文档https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html 先来看一下实现的效果

  6. .NET CORE EnvironmentVariable

    .NET CORE System variables SETIn System variablese.g1:Variable name: ASPNETCORE_ENVIRONMENTVariable ...

  7. linux系统中ls命令的用法

    普通文件: -,f目录文件: d链接文件(符号链接): L设备文件:字符设备:c块设备:b命名管道: p套接字文件: s linux文件时间戳 时间分为三种类型:创建时间,修改时间:open访问时间: ...

  8. 利用WIX制作安装包(1)

    原文 利用WIX制作安装包(1) #installation 下载最新版本的WIX toolset 并安装DOWNLOAD Wix toolset V3.5之后的版本已经可以集成到visual stu ...

  9. ELINK编程器典型场景之远程镜像

    当不想直接提供Hex/Bin等二进制程序文件给用户时,通过生成远程镜像功能将程序文件加密后,再提供给用户自行脱机下载来达到远程更新的目的. 远程镜像生成的一般步骤为由客户端提供SN码,本地依据SN码加 ...

  10. 在WPF中实现图片一边下载一边显示

    原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时: img.Source ...