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 ...
随机推荐
- php 手动创建分页
- 用python生成你想要的任意大小文件
在测试的日常工作中,我们经常会需要测试上传文件的边界值.今天分享一段30行的简单代码,可以生成任意大小的文件,方便测试. file_size=input("请输入想要生成文件的大小:(单位M ...
- sqlserver 中，如何将getdate()时间的时分秒固定为00：00：00或者忽略不要
在使用getdate()时,时间会实时刷新,那么我们就要再查询的时候就需要精确到毫秒后三位,非常难受,那么为了解决这个问题我们可以通过以下几种方法进行固定或者去掉毫秒 1.将毫秒固定为00:00:00 ...
- ElasticSearch7.3 学习之定制分词器（Analyzer）
1.默认的分词器 关于分词器,前面的博客已经有介绍了,链接:ElasticSearch7.3 学习之倒排索引揭秘及初识分词器(Analyzer).这里就只介绍默认的分词器standard analyz ...
- Linux下编译安装配置MariaDB数据库
说明:操作系统:CentOS 6.6 64位MariaDB版本:mariadb-5.5.33aMariaDB数据库存放目录:/data/mysql准备:一.配置防火墙,开启3306端口vi /etc ...
- Flask 之路由系统
Flask中的路由系统其实我们并不陌生了,从一开始到现在都一直在应用 @app.route("/",methods=["GET","POST" ...
- FusionCube 9000 虚拟化之数据库场景（虚拟化超融合基础设施）
1.本场景为fusioncube9000虚拟化场景,带两台dbn节点. 配置清单: 1台cna节点 2台dbn节点,部署数据库操作系统,一般安装oracle数据双机. 2台mcna节点,作为管理节点, ...
- 动态JDK代理方式-实现类增强
需求描述: 抽取dao层开启和提交事物交由代理类一并执行 分析: 假如UserDao接口中有很多方法,例如addUser().deleteUser().updateUser()等等,需要频繁的和数据库 ...
- 使用redis作为django缓存数据库
1.Redis的Windows版本.打开https://github.com/MSOpenTech/redis/releases下载msi安装包.该版本是64位.安装msi过程中,有个选项是否加入系统 ...
- String类有哪些常用的方法
String类常用方法 1.String类长度:String没有length的属性,有length()这个方法,可以获取字符串的长度. 可以求得字符串s的长度,但是该长度会包含空格. 2.indexO ...