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 ...
随机推荐
- git flow 工作流程以及常用命令
一.分支介绍 master 也是产品分支,只有一个,一般情况下不会在这个分支上进行代码操作 develop 只有一个,新特性的开发是基于 develop 开发的,但是不能直接在 develop 上进行 ...
- Django基础四之测试环境和ORM查询
Django基础四之测试环境和ORM查询 目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...
- Java 开发工具之Myeclipse快捷键
- 再议 MySQL 回表
一:回表概述 关于回表的概念网上已经有很多了,这里不过多赘述.下面我们直接放一张图可能更直观说明什么是回表. 图中 非聚集索引也叫二级索引,二级索引本质上也是 一 个 B+ 树结构,与聚集索引(也叫主 ...
- Ubuntu下使用C语言连接Mysql 8.0客户端教程
Ubuntu下如何C语言程序连接MYSQL 8.0(全教程) 1. 安装GCC(略) 2. 安装mysql(本人使用的是最新MySQL 8.0版本) sudo apt install mysql-cl ...
- JAVA视频笔记（一）
搭建pho开发环境与框架图 韩顺平 第一章: No1 关于文件以及文件夹的管理 将生成的文本文档做成详细信息的形式,显示文件修改时间以及文件大小,便于文件查看和管理,也是对于一名IT人士高效能工作的 ...
- request和response——请求响应对象
请求对象--request 获取get请求的值 一次请求,返回一个响应. 地址栏:http://127.0.0.1:8000/day3/get_request?lan=python 问号:代表请求参数 ...
- Spring Cache缓存框架
一.序言 Spring Cache是Spring体系下标准化缓存框架.Spring Cache有如下优势: 缓存品种多 支持缓存品种多,常见缓存Redis.EhCache.Caffeine均支持.它们 ...
- Servlet的response乱码问题
一.response有两种输出流(编码:UTF-8): 1.字节流:response.getOutputStream().write(date.getBytes("UTF-8")) ...
- Jinkins流水线脚本使用curl命令调用服务接口，并且使用url传参。
curl http://xxx.xx.xx.xx:xxxx/jenkins/publish?fileName=${fileName}&tag_name=${tag_name} 如图调用不符合c ...