JS 显示时间与倒计时练习

JS 显示时间与倒计时练习

显示时间与倒计时

 

HTML

JS 显示时间与倒计时练习
JS 显示时间与倒计时练习

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>显示系统时间</title>
 6         <link rel="stylesheet" href="css/style.css">
 7     </head>
 8 
 9     <body>
10         <div id="container">
11             <h2>当前时间为:</h2>
12             <h3 id="current">显示当前时间时间</h3>
13             <h2>距离2017年1月1日还有:</h2>
14             <h3 id="deadline">显示倒计时</h3>
15         </div>
16     <script src="js/script.js"></script>
17     </body>
18 </html>

View Code

 

CSS

JS 显示时间与倒计时练习
JS 显示时间与倒计时练习

 1 #container {
 2     width:300px;
 3     margin:50px auto;
 4 }
 5 
 6 #container h3:nth-of-type(1) {
 7     color:cyan;
 8     margin-bottom:50px;
 9 }
10 
11 
12 #container h3:nth-of-type(2) {
13     color:red;
14     height:50px;
15     line-height:50px;
16     font-size:24px;
17 } 

View Code

 

JavaScript

 

JS 显示时间与倒计时练习
JS 显示时间与倒计时练习

 1 window.onload = function() {
 2     showCurrentTime();
 3     showEndTime();
 4 };
 5 
 6 function checkTime(i) {
 7     if(i < 10) {
 8         i = "0" + i;
 9     }
10     return i;
11 }
12 
13 function showCurrentTime() {
14     var now = new Date();
15     var year = now.getFullYear();
16     var month = now.getMonth() + 1;
17     var day = now.getDate();
18     var d = now.getDay();
19     var hour = now.getHours();
20     var min = now.getMinutes();
21     var sec = now.getSeconds();
22 
23     hour = checkTime(hour);
24     min = checkTime(min);
25     sec = checkTime(sec);
26 
27     var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
28 
29     var show = document.getElementById("current");
30     var time = year + "年" + month + "月" + day + "日 " + weekday[d] + " " + hour + ":" + min + ":" + sec;
31     show.innerHTML = time;
32     //将setTimeout写在showTime内部,这是一个递归调用
33     setTimeout(showCurrentTime, 1000);
34 };
35 
36 //如果要将时间更新写在showTime外部,则需要setInterval方法
37 // setInterval(showTime, 1000);
38 
39 function showEndTime() {
40     var now = new Date();
41     var deadline = new Date(2017, 0, 1);
42     var left_time = parseInt((deadline.getTime() - now.getTime()) / 1000);
43     var day = parseInt(left_time / (60 * 60 * 24));
44     var hour = parseInt(left_time / (60 * 60) % 24);
45     var min = parseInt(left_time / 60 % 60);
46     var sec = parseInt(left_time & 60);
47 
48     day = checkTime(day);
49     hour = checkTime(hour);
50     min = checkTime(min);
51     sec = checkTime(sec);
52 
53     var time = day + "天 " + hour + "时 " + min + "分 " + sec + "秒";
54     var show = document.getElementById("deadline");
55 
56     if(left_time < -60*60*24) {
57         show.innerHTML = "时间已过!"
58     } else if(left_time < 0) {
59         show.innerHTML = "就是今天!"
60     } else {
61         show.innerHTML = time;
62     }
63     setTimeout(showEndTime, 1000);
64 }

View Code

 

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

转载于:https://www.cnblogs.com/cc156676/p/5766193.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108908.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 操作系统中常用的进程调度算法有_调度算法有哪些

    操作系统中常用的进程调度算法有_调度算法有哪些1、先来先服务调度算法先来先服务(FCFS)调度算法是一种最简单的调度算法,该算法既可用于作业调度,也可用于进程调度。当在作业调度中采用该算法时,每次调度都是从后备作业队列中选择一个或多个最先进入该队列的作业,将它们调入内存,为它们分配资源、创建进程,然后放入就绪队列。在进程调度中采用FCFS算法时,则每次调度是从就绪队列中选择一个最先进入该队列的进程,为之分配处理机,使之投入运行。该进程一直

  • vue的安装和使用_路由器怎么安装图解

    vue的安装和使用_路由器怎么安装图解前言Vue(读音/vjuː/,类似于view)是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页很简单,并且技术生态环境完善

  • scrollIntoView动画效果

    scrollIntoView动画效果经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分。对于这样的需求,很容易想到使用锚点实现。但有一个问题:滚动,太过生硬了,体验极差。我还是比较喜欢平滑滚动。HTML5中提供了CSS属性 scroll-behavior 并且修改了一系列滚动函数的可接受参数用于支持平滑滚动特性。scroll-behavior这个CSS属性就只接受两个自定义值:auto 和 smo…

  • 文本挖掘工具的介绍[通俗易懂]

    文本挖掘工具的介绍[通俗易懂]1、商业文本挖掘的工具2、开源的数据挖掘工具ROSTCM确实是一个很好用的工具。主要用于写论文,真的很好用。LingPipe主要用于自然语言的处理:主题分类(TopClassification)命名实体识别(NamedEntityRecognition)词性标注(Part-ofSpeechTagging)句题检测(Sen

  • Linux文件误删除恢复操作「建议收藏」

    Linux文件误删除恢复操作「建议收藏」本文参考http://write.blog.csdn.net/postedit?ticket=ST-491405-OGjDDusZeyMgVQ7bHW7f-passport.csdn.net前言作为一个多用户、多任务的操作系统,Linux下的文件一旦被删除,是难以恢复的。尽管删除命令只是在文件节点中作删除标记,并不真正清除文件内容,但是其他用户和一些有写盘动作的进程会很快覆盖这些数据。不过……

  • dirsearch使用教程_search过去式

    dirsearch使用教程_search过去式1、首先下载出来并进入dirsearch目录3、查询使用的命令如下4、开始扫描

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号