显示时间与倒计时

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. ls -F一种非常有用的ls格式

    ls -F一种非常有用的ls格式  tz/y/yupeng > ls -F#q#           News/         doc/          images/       mbox ...

  2. Ubuntu Navicat正版永久使用方法

    最近技安不再带自己的mac book来公司工作了,公司多出来一个台式机,配置还挺高.于是乎就拿过来用了. 装上了Ubuntu14.04 LTS版,正常的开发工具如vagrant,vitualbox,s ...

  3. 说说C#中IList与List区别

    首先IList 泛型接口是 ICollection 泛型接口的子代,并且是所有泛型列表的基接口. 它仅仅是所有泛型类型的接口,并没有太多方法可以方便实用,如果仅仅是作为集合数据的承载体,确实,ILis ...

  4. iOS技巧，宏定义

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAPCCAYAAADvRHWgAAAAAXNSR0IArs4c6QAAAZ1pVFh0WE1MOm

  5. 20145222黄亚奇《Java程序设计》第9周学习总结

    20145222第九周<Java学习笔记>学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC(Ja ...

  6. 第四章 一切从IL开始

    从这一部分开始,就开始讲.net的本质了,这第四章就是讲有关IL(中间语言)的内容,主要利用工具,看看VS到底编译出来的是什么东西,从中我们可以看到实现的方式和过程.有助于我们更好的了解.net的本质 ...

  7. Unity Networking API文档翻译（一）：Networking概述

    写在翻译前的话:      我使用过Photon,研究过Ulink这些Unity提供的多人在线游戏服务器组件,这些商业组件虽然很好很强大.但是对于一个独立开发者来说,4000多软妹币还是点多.总想找一 ...

  8. [BZOJ1211][HNOI2004]树的计数（Prufer序列）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1211 分析: 关于无根树的组合数学问题肯定想到Prufer序列,类似bzoj1005那 ...

  9. Linq之求和，平均值，最大值，最小值

    写在前面 最近一直在弄统计的内容,和统计相关的操作,就需要用到了,而有些在数据库中操作起来非常不方便,没办法就用c#中的linq来实现了. 代码 一个例子 using System; using Sy ...

  10. 第四课：seajs的模块编译_compile过程

    最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 1 ...