显示时间与倒计时

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. MVC4 WebAPI

    不管是因为什么原因,结果是在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,个人比较喜欢REST风格的WebService,感觉比SOAP要轻量级一些,而且对客户端的要 ...

  2. 网站如何启用SSL安全证书？IIS7启用新建Https:/

    网站使用SSL,通过SSL证书申请,然后导入之后.我们需要对网站进行设置才能正常使用SSL证书,具体如何操作让网站启用SSL呢,本经验以一个网站添加SSL主机头的方式为例来,网站启用SSL服务器安全证 ...

  3. JS 之高级函数

    作用域安全的构造函数 当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例.如果不使用new,直接调用的话,则this对象会映射到window对象上.所以需要判断下. eg: f ...

  4. java从0开始学——数组，一维和多维

    #,在java中,允许数组的长度为0:也就是允许      int[] zeroLenthArray = new int[0]; #,匿名的数组初始化是合法的:     int[] smallPrim ...

  5. 移动统计工具Flurry

    网址:http://www.flurry.com/ 1注册和下载对应SDK 2集成SDK 3自定义统计项 至于怎么使用,后期会更新

  6. Chrome扩展开发之一——Chrome扩展的文件结构

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  7. 小白学习mysql之索引初步

    导语 索引在数据库中的地位是及其的重要,同时要想完全的掌握索引并不是一件容易的事,需要对数据的查询原理以及计算机操作系统有深刻的认识,当然相关的算法和数据结构也是必须的.因此,这篇文章感到了一些压力, ...

  8. iOS简易柱状图(带动画)--新手入门篇

    叨逼叨 好久没更新博客了,才几个月,发生了好多事情,处理了好多事情.不变的是写代码依然在继续. 做点啥子 看看objective-c的书,学着写了个柱状图,只是练习的demo而已,iOS上的图表控件已 ...

  9. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  10. Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板）

    详情请查看http://aehyok.com/Blog/Detail/23.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...