显示时间与倒计时

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. Java 8新特性——default方法（defender方法）介绍

    我们都知道在Java语言的接口中只能定义方法名,而不能包含方法的具体实现代码.接口中定义的方法必须在接口的非抽象子类中实现.下面就是关于接口的一个例子: 1 2 3 4 5 6 7 8 9 10 11 ...

  2. &10 基本数据结构——指针和对象的实现，有根树的表示

    #1,指针和对象的实现 如果所用的语言或者环境不支持指针和对象,那我们该怎么用数组来将其转化呢?实质上可以将这个问题的本质转化为数组和链表这两种数据结构的转换,准确来说,是将链表表示的数据用数组表示. ...

  3. scrapy 爬取 useragent

    useragentstring.com 网站几乎廊括了所有的User-Agent,刚学了scrapy,打算那它练手,把上面的 user-agent 爬取下来. 本文只爬取常见的 FireFox, Ch ...

  4. C#脚本引擎 CS-Script 之（二）——性能评测

    以下以一个简单的HelloWord程序为例,来分析csscript脚本引擎的性能. class HelloWorld { public void SayHello() { Console.WriteL ...

  5. [CareerCup] 13.2 Compare Hash Table and STL Map 比较哈希表和Map

    13.2 Compare and contrast a hash table and an STL map. How is a hash table implemented? If the numbe ...

  6. Win7下手动卸载oracle 11G

    由于安装过程中遇到的之前提到的那个问题,http://www.cnblogs.com/shenliang123/p/3141886.html  知道解决方法后,也只能将oracle重新卸载后再进行安装 ...

  7. <实训|第二天>掌握linux6.7中安装vmware、vmware安装linux发行版本以及遇到的问题最后libreoffice的安装

    期待已久的linux运维.oracle"培训班"终于开班了,我从已经开始长期四个半月的linux运维.oracle培训,每天白天我会好好学习,晚上回来我会努力更新教程,包括今天学到 ...

  8. 云计算之路-阿里云上：2014年6月11日17点遇到的CPU 100%状况

    今天下午17:00-17:05之间,在请求量没有明显变化的情况下,SLB中的1台云服务器的CPU突然串到100%(当时SLB中一共有3台云服务器),见下图: 造成的直接后果是请求执行时间变得超长,最长 ...

  9. 如何引用XML文件生成C#类

    目录 XSD File Generate Class File Simply. 1 Why use XSD file to create C# classes?... 2 How to convert ...

  10. （练习）rational rose进行用例图设计

    用例图: