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 ...
随机推荐
- SQL从零到迅速精通【实用函数（1）】
语法是一个编程语言的基础,真的想玩的6得飞起还是要靠自己定义的函数和变量. 1.使用DECLARE语句创建int数据类型的名为@mycounter的局部变量,输入语句如下: DECLARE @myco ...
- 手写 Vue2 系列 之 编译器
前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习 ...
- 用两行代码实现重试功能，spring-retry真是简单而优雅
背景 最近做的一个需求,需要调用第三方接口.正常情况下,接口的响应是符合要求的,只有在网络抖动等极少数的情况下,会存在超时情况.因为是小概率事件,所以一次超时之后,进行一次重试操作应该就可以了.重试很 ...
- MySQL JDBC常用知识,封装工具类,时区问题配置,SQL注入问题
JDBC JDBC介绍 Sun公司为了简化开发人员的(对数据库的统一)操作,提供了(Java操作数据库的)规范,俗称JDBC,这些规范的由具体由具体的厂商去做 对于开发人员来说,我们只需要掌握JDBC ...
- 【bjdctf】 BJD hamburger competition
是一个游戏 静态分析和动态分析都没思路 尝试查看运行时动态链接库 其中assembly-csharp.dll可能为实现游戏功能的动态链接库 .net逆向 Dnspy反编译 关键代码如上 Getflag ...
- 记-beego项目调用Jenkins API获取job信息
type JenkinsController struct { beego.Controller } type Job struct { Name string `json:"name&qu ...
- Json有什么作用?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 它基于JavaScript(Standard ECMA-262 3rd Edition - Decemb ...
- linux设置java环境变量与开机自启
一.下载jdk并放置在指定位置 二.编辑profile文件 vim /etc/profile 或者 将/etc下的profile 文件修改好再上传覆盖源文件 修改方式即添加以下内容至文件最底部即可 ...
- C++多态例子_虚函数
#include<iostream> using namespace std; class parent { public: virtual void fun() { cout <& ...
- spring中bean的五种作用域？Spring中的bean是线程安全的吗?
spring中bean的五种作用域 当通过spring容器创建一个Bean实例时,不仅可以完成Bean实例的实例化,还可以为Bean指定特定的作用域.Spring支持如下5种作用域: singleto ...