html中设置一个秒表,CSS3制作秒表

最新推荐文章于 2023-05-20 10:52:34 发布
最新推荐文章于 2023-05-20 10:52:34 发布
阅读量287 收藏
点赞数
文章标签： html中设置一个秒表

CSS3制作秒表效果，以前想都不敢想，但thecodeplayer.com却完美的使用了CSS3中的animation属性制作了一个纯CSS3的秒表计时器的效果，让我们想都不敢想象，曾经需要javaScript的效果，如今使用CSS3的几个属性就完成了。在这个效果中主要是控制时间数字的显示，本例中每个数定的宽度和高度都定死了，其动画实现主要逻辑是通过对数字进行绝对定位，依靠改变数字的“top”属性值来实现时间数字的变更，当关还需要大家计算好他们之间转换的速率。所以说这个例子绝对是一个练习CSS3的animation属性的好例子，你要是掌握了这个例子，我想你对animation会有一个质的认识，希望大家喜欢(^_^)。

HTML CODE

0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
:
0 1 2 3 4 5 6
0 1 2 3 4 5 6 7 8 9
:
0 1 2 3 4 5 6
0 1 2 3 4 5 6 7 8 9
:
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9

Start

Stop

Reset

CSS CODE

body{

background: url('wood_pattern.png') repeat;

}

.container {

padding: 50px;

text-align: center;

}

.timer {

padding: 10px;

background: -webkit-linear-gradient(top, #222, #444);

background: -moz-linear-gradient(top, #222, #444);

background: -ms-linear-gradient(top, #222, #444);

background: -o-linear-gradient(top, #222, #444);

background: linear-gradient(top, #222, #444);

overflow: hidden;

display: inline-block;

border: 7px solid #efefef;

border-radius: 5px;

position: relative;

box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);

}

.cell {

/*只显示一位数字. 高度 = 数字的行高，宽度 = 数字的宽度*/

width: 0.60em;

height: 40px;

font-size: 50px;

overflow: hidden;

position: relative;

float: left;

}

.numbers {

width: 0.6em;

line-height: 40px;

font-family: digital, arial, verdana;

text-align: center;

color: #fff;

position: absolute;

top: 0;

left: 0;

/*数字发光效果*/

text-shadow: 0 0 5px rgba(255, 255, 255, 1);

}

/*秒表控制器样式*/

#timer_controls {

margin-top: -5px;

}

#timer_controls label {

cursor: pointer;

padding: 5px 10px;

background: #efefef;

font-family: arial, verdana, tahoma;

font-size: 11px;

border-radius: 0 0 3px 3px;

}

input[name="controls"] {display: none;}

/*Control code*/

/*秒表暂停运转*/

#stop:checked~.timer .numbers {

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

-ms-animation-play-state: paused;

animation-play-state: paused;

}

/*秒表开始运转*/

#start:checked~.timer .numbers {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-o-animation-play-state: running;

-ms-animation-play-state: running;

animation-play-state: running;

}

/*重置秒表*/

#reset:checked~.timer .numbers {

-webkit-animation: none;

-moz-animation: none;

-o-animation: none;

-ms-animation: none;

animation: none;

}

.moveten {

/*使用分步骤来移动数字，10个数字等于10步*/

-webkit-animation: moveten 1s steps(10, end) infinite;

-moz-animation: moveten 1s steps(10, end) infinite;

-o-animation: moveten 1s steps(10, end) infinite;

-ms-animation: moveten 1s steps(10, end) infinite;

animation: moveten 1s steps(10, end) infinite;

/*默认情况下动画是停止不动的*/

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

-ms-animation-play-state: paused;

animation-play-state: paused;

}

.movesix {

-webkit-animation: movesix 1s steps(6, end) infinite;

-moz-animation: movesix 1s steps(6, end) infinite;

-o-animation: movesix 1s steps(6, end) infinite;

-ms-animation: movesix 1s steps(6, end) infinite;

animation: movesix 1s steps(6, end) infinite;

}

/*同步时间的速率*/

/*每秒十个数字，因此也需要十步*/

.second {

-webkit-animation-duration: 10s;

-moz-animation-duration: 10s;

-o-animation-duration: 10s;

-ms-animation-duration: 10s;

animation-duration: 10s;

}

.tensecond {

/*60 times .second*/

-webkit-animation-duration: 60s;

-moz-animation-duration: 60s;

-o-animation-duration: 60s;

-ms-animation-duration: 60s;

animation-duration: 60s;

}

.milisecond {

/*1/10th of .second*/

-webkit-animation-duration: 1s;

-moz-animation-duration: 1s;

-o-animation-duration: 1s;

-ms-animation-duration: 1s;

animation-duration: 1s;

}

.tenmilisecond {

-webkit-animation-duration: 0.1s;

-moz-animation-duration: 0.1s;

-ms-animation-duration: 0.1s;

-o-animation-duration: 0.1s;

animation-duration: 0.1s;

}

.hundredmilisecond {

-webkit-animation-duration: 0.01s;

-moz-animation-duration: 0.01s;

-o-animation-duration: 0.01s;

-ms-animation-duration: 0.01s;

animation-duration: 0.01s;

}

.minute {

/*60 times .second*/

-webkit-animation-duration: 600s;

-moz-animation-duration: 600s;

-o-animation-duration: 600s;

-ms-animation-duration: 600s;

animation-duration: 600s;

}

.tenminute {

/*60 times .minute*/

-webkit-animation-duration: 3600s;

-moz-animation-duration: 3600s;

-ms-animation-duration: 3600s;

-o-animation-duration: 3600s;

animation-duration: 3600s;

}

.hour {

/*60 times .minute*/

-webkit-animation-duration: 36000s;

-moz-animation-duration: 36000s;

-ms-animation-duration: 36000s;

-o-animation-duration: 36000s;

animation-duration: 36000s;

}

.tenhour {

/*10 times .hour*/

-webkit-animation-duration: 360000s;

-moz-animation-duration: 360000s;

-o-animation-duration: 360000s;

-ms-animation-duration: 360000s;

animation-duration: 360000s;

}

/*------------------------------------------------------------*\

1、动画的逻辑就是给数字使用了绝对定位，改变“top”的属性值；

2、分 和 秒 应该是 '60' 而不是 '100'，因此需要创建两个动画；

3、十步十个数字

4、六步六个数字

\*-------------------------------------------------------------*/

@-webkit-keyframes moveten {

0% {top: 0;}

100% {top: -400px;}

/*height = 40. digits = 10. hence -400 to move it completely to the top*/

}

@-webkit-keyframes movesix {

0% {top: 0;}

100% {top: -240px;}

/*height = 40. digits = 6. hence -240 to move it completely to the top*/

}

@-moz-keyframes moveten {

0% {top: 0;}

100% {top: -400px;}

/*height = 40. digits = 10. hence -400 to move it completely to the top*/

}

@-moz-keyframes movesix {

0% {top: 0;}

100% {top: -240px;}

/*height = 40. digits = 6. hence -240 to move it completely to the top*/

}

@-o-keyframes moveten {

0% {top: 0;}

100% {top: -400px;}

/*height = 40. digits = 10. hence -400 to move it completely to the top*/

}

@-o-keyframes movesix {

0% {top: 0;}

100% {top: -240px;}

/*height = 40. digits = 6. hence -240 to move it completely to the top*/

}

@-ms-keyframes moveten {

0% {top: 0;}

100% {top: -400px;}

/*height = 40. digits = 10. hence -400 to move it completely to the top*/

}

@-ms-keyframes movesix {

0% {top: 0;}

100% {top: -240px;}

/*height = 40. digits = 6. hence -240 to move it completely to the top*/

}

@keyframes moveten {

0% {top: 0;}

100% {top: -400px;}

/*height = 40. digits = 10. hence -400 to move it completely to the top*/

}

@keyframes movesix {

0% {top: 0;}

100% {top: -240px;}

/*height = 40. digits = 6. hence -240 to move it completely to the top*/

}

/*Lets use a better font for the numbers*/

@font-face {

font-family: 'digital';

src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF');

}

此案例代码来自于thecodeplayer.com，并做过相应的代码处理。

weixin_39758229
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用HTML做的秒表程序，非常实用
09-14
用HTML做的秒表程序，有10个存盘，非常实用，适合比赛定时
如何使用html实现在线秒表,js实现简单的秒表
weixin_35625530的博客
05-30 779
本文实例为大家分享了js实现简单的秒表具体代码，供大家参考，具体内容如下描述：实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停，点击暂停暂停计时，点击复位回到最初始状态。效果：代码：Title#showTime{width: 300px;height: 60px;font-size: 60px;line-height: 60px;}00:00:00启动复位//——————var t...
HTML中创建秒表,纯CSS秒表
weixin_36033884的博客
06-25 324
';}@property --m-singles {initial-value: 0;inherits: false;syntax: '';}body {min-height: 100vh;display: grid;font-family: 'Orbitron', sans-serif;background: #eb6347;place-items: center;}form {margin: ...
html 秒表
weixin_44493841的博客
08-25 1079
html 秒表 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>秒表</title> </head> <body> <input type="text" id="count"/> <script>   &
CSS3制作秒表
clschen的专栏
01-31 746
作者：大漠 CSS3制作秒表效果，以前想都不敢想，但thecodeplayer.com却完美的使用了CSS3中的animation属性制作了一个纯CSS3的秒表计时器的效果，让我们想都不敢想象，曾经需要javaScript的效果，如今使用CSS3的几个属性就完成了。在这个效果中主要是控制时间数字的显示，本例中每个数定的宽度和高度都定死了，其动画实现主要逻辑是通过对数字
HTML5+CSS3圆盘秒表动画.zip
11-18
HTML5+CSS3圆盘秒表动画.zip
CSS3圆盘秒表计时器动画特效
09-13
CSS3圆盘秒表计时器动画特效
cronometroJS：使用HTML5，CSS和Javascript制作的秒表
02-15
cronometroJS使用HTML5，CSS和Javascript制作的秒表可在找到的应用程序
StopWatch:使用带有圈选项HTML，CSS和JavaScript创建秒表
05-24
跑表 使用带有圈选项HTML，CSS和JavaScript创建秒表
HTML写的一个小小的秒表程序
06-07
HTML写的一个小小的秒表程序， 使用简单的 html5 css3 javascript html dom 技术 多个秒表同时运行, 可记录多次
HTML5超酷秒表动画 可暂停和重置秒表
10-10
关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。
HTML编程计时器钟表
12-23
计时器钟表，实时显示当前时间，通过网页显示，可通过记事本观看代码
原生js 秒表实现代码
12-09
html代码： 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <meta charset=”gb2312″> <head> <style type=”text/css”> #container { margin:0 auto; margin-top:10%; width:200px; } #timer { border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color:green; } inpu
css打造仿真秒表
liuhao9999的博客
07-04 170
css打造仿真秒表
html秒表
Caolilu1107的博客
09-06 2003
html> html lang="en"> head> meta charset="UTF-8"> title>秒表title> script src="dsadas/jquery-3.2.1.js">script> script src="dsadas/angular1.4.6.min.js">script> head> body ng-app="myApp" n
如何使用html实现在线秒表,使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）...
weixin_42514521的博客
05-30 888
效果图展示，感觉不错可以参考实例代码。具体代码如下所示：Document00:00:00:00开始暂停继续重置//定义一个变量，根据定时器每秒执行一次，每次执行++自增操作，变量存储的数值，就会每秒+1。现在需要的记录效果是每0.01秒，也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒，如果秒达到60就是1分钟，如果分钟达到60就是1小时var ms = 0; // 毫秒...
HTML+Javascript实现一个秒表
weixin_44014982的博客
05-20 767
HTML+Javascript实现一个秒表
用HTML写一个标准秒表,JavaScript写秒表
weixin_28871989的博客
06-16 204
1、HTML部分00:00:00开始复位2、css部分#div1 {width: 100px;height: 200px;padding: 50px;background-color: orange;border: 1px solid #000000;margin: auto;}span{font-size: 20px;}#div1 button{width: 100px;height: 30px...
HTML秒表小功能
Asas_u的博客
12-10 317
00时 00分 00秒 开始计时 停止 <script> // 1. 获取DOM节点 // console.log(hour) // console.log(hour.innerHTML) // 内容 // hour.innerHTML = “11” // 修改内容 // 2. 点击事件 // start.onclick = function(){ // console.log(‘点击了开...
51单片机制作一个秒表
最新发布
05-28
好的，以下是基本的秒表程序： ``` #include unsigned char second = 0; //秒数计数器 unsigned char minute = 0; //分钟计数器 ...此外，还需要编写一个延时函数来实现精确的延时，这里就不再赘述了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值