制作二十四进制的时钟特效（JavaScript）

1. 任务要求

1）Date对象的使用；

2）document.getElementById("").innerHTML的使用；

3）setInterval()方法或setTimeout()方法的使用，注意两者的区别。

2. 实现思路

1）完成静态页面设计，标识要显示系统时间的位置，此例已完成该步骤。

2）定义函数，使用日期和时间对象，获取客户端系统时间。

3）为ID的time标签赋值。

4）使用定时函数，每隔一秒重新调用一次函数。

3. 需求说明

制作显示年、月、日、星期和二十四时制的时钟特效，如下图所示。

4. 实现代码（JS部分的代码）

1）使用getXXX方法获取时间和日期。

2）规定输出格式为“星期几”，由于getDay获取的为0~7的数组。所以需要定义一个数组week用来存储星期，用getDay方法获取星期，之后输出week[day]就可以实现输出。

3）获取时间后对小时、分钟、秒进行判断，如果小于10，在其前头加一个字符0以达到更好的时钟效果。

// JavaScript Document
function show(){var myDate=new Date();var year=myDate.getFullYear(),month=Number(myDate.getMonth()+1),days=myDate.getDate(),day=myDate.getDay();var week=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];document.getElementById('title').innerHTML="<h4>"+year+"年"+month+"月"+days+"日 "+week[day]+"</h4>";var hour=myDate.getHours();var minute=myDate.getMinutes();var second=myDate.getSeconds();if (hour<10){hour="0"+hour;}if (minute<10){minute="0"+minute;}if (second<10){second="0"+second;}document.getElementById('myclock').innerHTML="<h3><b>"+hour+":"+minute+":"+second+"</b></h3>";setTimeout("show()",1000);
}

5. 运行结果

6. 其他代码（其中的图片需要自己设置）

除JS部分的代码如下（.html）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" ></script>
<script src="js/time.js"></script>
</head>
<title>时钟特效</title><style> body{background-image: url(img/background5.jpg);//url图片需要自己设置一下}.content{width: 300px;margin: auto;color: #4CAE4C;}#title{font-size: 25px;}#myclock{margin-top: 30px;font-size: 60px;font-weight: 900;}</style>
<body onload="show()">
<div class="content"><div id="title"></div><div id="myclock"></div>
</div>
</body>
</html>

制作二十四进制的时钟特效（JavaScript）相关推荐

二十四进制加法计数器并用数码管显示
二十四进制 (BCD码)加法计数器并用数码管显示 `timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2020/1 ...
用74ls90组成二十四进制计数器_CD4017是什么？十进制计数器分频器CD4017的逻辑功能呢？...
一.CD4017功能概述 CD4017是5位Johnson十进制计数器分频器,时钟输入端的斯密特触发器具有脉冲整形功能,对输入时钟脉冲上升和下降时间无限制,CD4017 提供了16 引线多层陶瓷双列直 ...
用74ls90组成二十四进制计数器_一个厉害的芯片芯片74LS190同步计数器可以做加法也可以做减法...
74LS190是同步十进制加/减计数器(又称可逆计数器), 漂亮的主板它依靠加/减控制端的控制来实现加法计数和减法计数. CPU CO/BO:进位输出/借位输出端: CP:时钟输入端: CT:计数 ...
用74ls90组成二十四进制计数器_减法计数器的组成以及原理
异步二进制减法计数器如图1-1所示减法计数器的结构原理 1-1减法计数器的结构原理该计数器是一个3位二进制异步减法计数器,它与前面介绍过的3位二进制异步加法计数器一样,是由3个JK触发器组成,其 ...
js制作12进制的时钟特效
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
JavaScript 制作12小时进制的时钟特效
今天分享一个javaScript制作12进制时钟特效的小题. 代码如下制作12进制的时钟特效 > <!DOCTYPE html> <html> <head lan ...
二位四进制计数器_金三银四还在看JVM这一块？看完这篇万字JVM面试解析就够了...
金三银四你必备的学习笔记 Java面试核心知识点笔记+高级架构面试知识点整理+互联网Java工程师必备的1080道面试解析shimo.im Java内存区域说一下 JVM 的主要组成部分及其作用? ...
[汇编]四字，双字，字，字节以及四进制和32进制
写在最前面欢迎砍砖!共同进步- 首先是非常感谢@neoaries Comrade的提醒,我决定写一下题目中的这些问题先说一下四字.双字.字.字节我们平时看到的在计算机中二进制其中的一个0或者1称 ...
二十一、由四进制计数器制作三进制计数器
目录原理分析: 电路图: 电路图解析: 效果演示: 晶体管级数字电路设计专栏目录_LD QM的博客-CSDN博客 ------------------------------------------ ...

制作二十四进制的时钟特效（JavaScript）

制作二十四进制的时钟特效（JavaScript）相关推荐

最新文章

热门文章