jQuery实现数字时钟
运行效果：
源代码：
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>电子时钟</title>
6 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
7 <style type="text/css">
8 body {
9 background: #202020;
10 font: bold 12px Arial, Helvetica, sans-serif;
11 margin: 0;
12 padding: 0;
13 min-width: 960px;
14 color: #bbbbbb;
15 }
16
17 a {
18 text-decoration: none;
19 color: #00c6ff;
20 }
21
22 h1 {
23 font: 4em normal Arial, Helvetica, sans-serif;
24 padding: 20px;
25 margin: 0;
26 text-align: center;
27 }
28
29 h1 small {
30 font: 0.2em normal Arial, Helvetica, sans-serif;
31 text-transform: uppercase;
32 letter-spacing: 0.2em;
33 line-height: 5em;
34 display: block;
35 }
36
37 h2 {
38 font-weight: 700;
39 color: #bbb;
40 font-size: 20px;
41 }
42
43 h2, p {
44 margin-bottom: 10px;
45 }
46
47 @font-face {
48 font-family: 'BebasNeueRegular';
49
50 font-weight: normal;
51 font-style: normal;
52 }
53
54 .container {
55 width: 960px;
56 margin: 0 auto;
57 overflow: hidden;
58 }
59
60 .clock {
61 width: 800px;
62 margin: 0 auto;
63 padding: 30px;
64 border: 1px solid #333;
65 color: #fff;
66 }
67
68 #Date {
69 font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
70 font-size: 36px;
71 text-align: center;
72 text-shadow: 0 0 5px #00c6ff;
73 }
74
75 ul {
76 width: 800px;
77 margin: 0 auto;
78 padding: 0px;
79 list-style: none;
80 text-align: center;
81 }
82
83 ul li {
84 display: inline;
85 font-size: 10em;
86 text-align: center;
87 font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
88 text-shadow: 0 0 5px #00c6ff;
89 }
90
91 .symbol {
92 position: relative;
93 -moz-animation: mymove 1s ease infinite;
94 -webkit-animation: mymove 1s ease infinite;
95 padding-left: 10px;
96 padding-right: 10px;
97 }
98
99 @-webkit-keyframes mymove {
100 0% {
101 opacity: 1.0;
102 text-shadow: 0 0 20px #00c6ff;
103 }
104 50% {
105 opacity: 0;
106 text-shadow: none;
107 }
108 100% {
109 opacity: 1.0;
110 text-shadow: 0 0 20px #00c6ff;
111 }
112 }
113
114 @-moz-keyframes mymove {
115 0% {
116 opacity: 1.0;
117 text-shadow: 0 0 20px #00c6ff;
118 }
119 50% {
120 opacity: 0;
121 text-shadow: none;
122 }
123 100% {
124 opacity: 1.0;
125 text-shadow: 0 0 20px #00c6ff;
126 }
127 }
128 </style>
129 </head>
130
131 <body>
132 <div class="clock">
133 <div id="Date"></div>
134
135 <ul>
136 <li id="hours">88</li>
137 <li class="symbol">:</li>
138 <li id="min">88</li>
139 <li class="symbol">:</li>
140 <li id="sec">88</li>
141 </ul>
142 </div>
143
144 <script type="text/javascript">
145 $(function () {
146 var monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
147 var dayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
148 var newDate = new Date();
149
150 newDate.setDate(newDate.getDate());
151
152 $('#Date').html(newDate.getFullYear() + "年" + monthNames[newDate.getMonth()] + newDate.getDate() + "日 " + dayNames[newDate.getDay()]);
153
154 setInterval(function () {
155 var seconds = new Date().getSeconds();
156 $("#sec").html((seconds < 10 ? "0" : "") + seconds);
157 }, 1000);
158
159 setInterval(function () {
160 var minutes = new Date().getMinutes();
161 $("#min").html((minutes < 10 ? "0" : "") + minutes);
162 }, 1000);
163
164 setInterval(function () {
165 var hours = new Date().getHours();
166 $("#hours").html((hours < 10 ? "0" : "") + hours);
167 }, 1000);
168 });
169 </script>
170 </body>
171 </html>
jQuery实现数字时钟的更多相关文章
- 使用jQuery和CSS3实现一个数字时钟
点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- jQuery ClockPicker 圆形时钟
ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线. 在线实例 实例预览 jQuery ClockPicker 圆形时钟 使用方法 <div class=&qu ...
- jquery模拟LCD 时钟
查看效果网址:http://keleyi.com/keleyi/phtml/jqtexiao/24.htm 以下是HTML文件源代码: <!DOCTYPE html PUBLIC "- ...
- jQuery用户数字评分效果
效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 模拟时钟(AnalogClock)和数字时钟(DigitalClock)
Demo2\clock_demo\src\main\res\layout\activity_main.xml <LinearLayout xmlns:android="http://s ...
- C#开发漂亮的数字时钟
今天用C#做了一个漂亮的数字时钟.界面如下. 实现技术:主要是通过Graphics类的DrawImage方法来绘制数字时钟中所有的数字,这些数字是从网上找的一些图片文件.时钟使用DateTime中No ...
- Qt仿Android带特效的数字时钟源码分析（滑动，翻页，旋转效果）
这个数字时钟的源码可以在Qt Demo中找到,风格是仿Android的,不过该Demo中含有三种动画效果(鉴于本人未曾用过Android的系统,因此不知道Android的数字时钟是否也含有这三种效果) ...
- 数字时钟DigClock
首先建立数字显示类: using System; using System.Drawing; namespace CsDev { class SevenSegmentDispay { Graphics ...
随机推荐
- ssl 证书配置
方式1: 1:找见域名列表 2: 主机记录 *,@,www 2:证书申请并下载 3: 4:宝塔网站ssl 参考博客: https://developer.aliyun.com/article/7714 ...
- yum 安装时报错 Existing lock /var/run/yum.pid: another copy is running as pid 3192.
yum 安装时报错 由于yum的时候意外退出造成的,虽然也给出提示当前占用进行的id,但是执行kill -9 强制杀死进程后,情况没能改变. 解决方法:rm -f /var/run/yum.pid然 ...
- OSPF协议原理及配置5-LSA分析
OSPF协议原理及配置5-LSA分析 前面,已经介绍了邻接关系的建立和LSDB的同步.通过同步过程的介绍,我们可以了解LSDB的同步是通过交互LSA实现的. 不同角色的路由器发出的LSA的内容是不 ...
- Git 常见错误 之 error:error: src refspec main does not match any/ error: failed to push some refs to 简单解决
错误产生的原因:Github 工程默认名为了 main 由于受到"Black Lives Matter"运动的影响,GitHub 从今年 10 月 1 日起,在该平台上创建的所有新 ...
- 【UML】统一建模语言及工具
共四个 Chapter,持续输出中. 参考资料: UML软件建模技术-基于IBM RSA工具(清华大学出版社) UML2.0基础与RSA建模实例教程(人民邮电) 面向对象葵花宝典(李运华)(电子工业出 ...
- CF1483F口胡
<线 性 做 法> 首先我们对所有串建立 ACAM,不难发现对于一个 \(i\),可能的 \(j\) 一定是 \(i\) 所有后缀节点在 fail 树上第一个被打标记的祖先. 但是这些祖先 ...
- LGP5591题解
题意很明确,不说了. 前置芝士:单位根反演 也就是: \[[n|a]=\frac 1 n \sum_{i=0}^{n-1}w_n^{ai} \] 看到题目给的柿子: \[\sum_{i=0}^n\bi ...
- 4月18日 python学习总结 异常处理、网络编程
一. 异常 1.什么是异常 异常是错误发生的信号,程序一旦出错,如果程序中还没有相应的处理机制 那么该错误就会产生一个异常抛出来,程序的运行也随之终止 2.一个异常分为三部分: 1.异常的追踪信息 2 ...
- metinfo 6.0 任意文件读取漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．点击新建项目按钮,弹出对画框中选择(C:\ ...
- 第3 章 802.11 MAC
一 前言 802.11 规格的关键在于MAC(介质访问控制层),属于数据链路层,它定义了数据帧怎样在介质上进行传输.MAC 位于各种物理层之上,控制数据的传输.不同的物理层可以提供不同的传输速度,不过 ...