显示时间与倒计时

HTML

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>显示系统时间</title>

         <link rel="stylesheet" href="css/style.css">

     </head>

     <body>

         <div id="container">

             <h2>当前时间为：</h2>

             <h3 id="current">显示当前时间时间</h3>

             <h2>距离2017年1月1日还有：</h2>

             <h3 id="deadline">显示倒计时</h3>

         </div>

     <script src="js/script.js"></script>

     </body>

 </html>

CSS

 #container {

     width:300px;

     margin:50px auto;

 }

 #container h3:nth-of-type(1) {

     color:cyan;

     margin-bottom:50px;

 }

 #container h3:nth-of-type(2) {

     color:red;

     height:50px;

     line-height:50px;

     font-size:24px;

 }

JavaScript

 window.onload = function() {

     showCurrentTime();

     showEndTime();

 };

 function checkTime(i) {

     if(i < 10) {

         i = "0" + i;

     }

     return i;

 }

 function showCurrentTime() {

     var now = new Date();

     var year = now.getFullYear();

     var month = now.getMonth() + 1;

     var day = now.getDate();

     var d = now.getDay();

     var hour = now.getHours();

     var min = now.getMinutes();

     var sec = now.getSeconds();

     hour = checkTime(hour);

     min = checkTime(min);

     sec = checkTime(sec);

     var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

     var show = document.getElementById("current");

     var time = year + "年" + month + "月" + day + "日 " + weekday[d] + " " + hour + ":" + min + ":" + sec;

     show.innerHTML = time;

     //将setTimeout写在showTime内部，这是一个递归调用

     setTimeout(showCurrentTime, 1000);

 };

 //如果要将时间更新写在showTime外部，则需要setInterval方法

 // setInterval(showTime, 1000);

 function showEndTime() {

     var now = new Date();

     var deadline = new Date(2017, 0, 1);

     var left_time = parseInt((deadline.getTime() - now.getTime()) / 1000);

     var day = parseInt(left_time / (60 * 60 * 24));

     var hour = parseInt(left_time / (60 * 60) % 24);

     var min = parseInt(left_time / 60 % 60);

     var sec = parseInt(left_time & 60);

     day = checkTime(day);

     hour = checkTime(hour);

     min = checkTime(min);

     sec = checkTime(sec);

     var time = day + "天 " + hour + "时 " + min + "分 " + sec + "秒";

     var show = document.getElementById("deadline");

     if(left_time < -60*60*24) {

         show.innerHTML = "时间已过！"

     } else if(left_time < 0) {

         show.innerHTML = "就是今天！"

     } else {

         show.innerHTML = time;

     }

     setTimeout(showEndTime, 1000);

 }

此demo倒计时每4秒更新一次，也是醉了。。。

JS 显示时间与倒计时练习的更多相关文章

  1. js显示时间

    function nowTime(){ var data= new Date(); var y=data.getFullYear(); var m=parseInt(data.getMonth())+ ...

  2. js图片时间和倒计时

    图片时间原理        原理:使用定时器每秒获取时间,获取时间的时,分,秒,组成一个6位数的字符串,然后用charAt,截取出对应的字符,图片命名和数字相对应就ok拉 倒计时原理        原 ...

  3. 页面显示时间js

    //页面显示时间 <span align="left" id="OperatorTime"> </span> <script> ...

  4. js显示当前时间

    闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...

  5. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  6. 帮助更语义化的显示时间的jQuery插件 - tidyTime.js

    来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15  显示成 ...

  7. Js Jquery 时间控件显示小时 分钟 秒

    // ui.js 自带的datepicker 插件只能显示日期不能显示时分秒  使用dateTimePicker可以显示时间 效果图:     首先需要引用 js和css 注意 ui.js的顺序要在s ...

  8. 纯css+js水平时间轴

    自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...

  9. JS日期时间选择器

    本文介绍一种日期和时间选择器的使用方法.此选择器由jqueryUI实现,支持精确到毫秒的时间选择. 此选择器项目地址为http://trentrichardson.com/examples/timep ...

随机推荐

  1. C语言 结构体中的成员域偏移量

    //C语言中结构体中的成员域偏移量 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> # ...

  2. 对EBS中配置文件的初步认识

    配置文件(PROFILE)在EBS系统配置占有很重要的位置,功能顾问要对很多重要的配置文件做到非常熟悉才行.否则出现一个问题,可能在郁闷许久后,发觉只是某个不起眼的配置文件在捣乱.配置文件相当于带有权 ...

  3. Asp.net与Dojo交互：仪器仪表实现

    项目中需要用到仪器仪表的界面来显示实时的采集信息值,于是便遍地寻找,参考了fusionchart和anychart之后,发现都是收费的,破解的又没有这些功能,只好作罢.之后又找遍了JQuery的插件, ...

  4. Android View事件机制 21问21答

    原文: http://www.cnblogs.com/punkisnotdead/p/5179115.html#3358859 1.View的坐标参数 主要有哪些?分别有什么注意的要点? 答:Left ...

  5. 利用Gulp优化部署Web项目[长文慎入]

    Gulp Gulp是一款项目自动化的构建工具,与Grunt一样可以通过创建任务(Task)来帮助我们自动完成一些工作流的内容.当然,今天我们的内容并不是讨论这二者的区别,仅仅是介绍介绍如何利用Gulp ...

  6. 解决方法:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

    win7或win8 64位调试程序,出现这样的错误提示:未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序 解决方法如下: 方法一:“设置应用程序池默认属性”/“常规”/” ...

  7. 7天学会spring cloud教程

    按照官方的话说:Spring Cloud 为开发者提供了在分布式系统(如配置管理.服务发现.断路器.智能路由.微代理.控制总线.一次性 Token.全局锁.决策竞选.分布式会话和集群状态)操作的开发工 ...

  8. dom4j 使用总结

    dom4j是一个Java的XML API,类似于jdom,用来读写XML文件 dom4j的使用方法简单总结来说如下: ①可以创建一个新的xml文件 ②利用SAXReader和File对象创建一个已存在 ...

  9. 关于RESTFul初步理解

    RESTFul架构:是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网站的采用. 即:Representational State Transfer 表现 ...

  10. 24.C#LINQ TO XML(十二章12.3)

    自己也写了那么多,但还有很多不懂,有点浮躁吧,但饭还是要吃啊,说说LINQ TO XML吧. LINQ TO XML位于System.Xml.Linq程序集,并且大多数类型位于System.Xml.L ...