利用Html+纯CSS实现计时器效果

最新推荐文章于 2024-02-23 15:48:05 发布
最新推荐文章于 2024-02-23 15:48:05 发布
阅读量7.8k 收藏 13
点赞数 9
分类专栏： 前端小实例 文章标签： CSS实现计时器效果 H5实现计时器效果 前端实现计时器效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andone_hsx/article/details/100577927
版权

问题描述

最近在学习的过程中一直静不下心来，在网上找了一些计时器软件安装包带很多第三方流氓软件，决定干脆自己做一款。开始考虑利用Js实现计时逻辑业务，后面仔细想了一下，单纯利用CSS3高级就可以实现。

页面设计

页面设计理念好看就行，在此就不多说，直接上静态页面代码！

HTML代码：

<html>
<head>
    <title>页面计时器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainbox">
    <input type="checkbox" id="start" hidden>
    <input type="checkbox" id="stop" hidden>
    <input type="checkbox" id="reset" hidden>
    <div class="timer">
        <div class="time-card" id="nowTime"></div>
    </div>
    <div class="timer">
        <div class="time-card" data-type="hours" data-max="24">
            <div class="time-card-count"></div>
            <div class="time-card-label">时</div>
        </div>
        <span class="colon">:</span>
        <div class="time-card" data-type="minutes" data-max="60">
            <div class="time-card-count"></div>
            <div class="time-card-label">分</div>
        </div>
        <span class="colon">:</span>
        <div class="time-card" data-type="seconds" data-max="60">
            <div class="time-card-count"></div>
            <div class="time-card-label">秒</div>
        </div>
    </div>
    <div class="actions">
        <label class="btn" disabled for="reset">重置</label>
        <label class="btn btn-success" for="start">开始</label>
        <label class="btn btn-danger" for="stop">暂停</label>
    </div>
    <label for="stop" class="regenerate">已重置</label>
</div>
<script>
    function refreshCount() {
        var myDate = new Date();
        document.getElementById("nowTime").innerHTML="当前时间："+myDate.toLocaleString('chinese',{hour12:false});
    };
    var t1=window.setInterval(refreshCount,1000);
</script>
</body>
</html>>

CSS主要利用属性选择去实现按钮切换及时间填充，具体见如下代码：

@charset "utf-8";
html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background: #121212;
    font: 400 100% "Roboto", sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

.mainbox {
    width: 320px;
    height: 260px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -130px 0 0 -160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.timer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 0 4em;
    color: #fff;
}

.time-card {
    margin: 0 1em;
    text-align: center;
}

.time-card-count {
    width: 80px;
    height: 77px;
    line-height: 77px;
    overflow: hidden;
}

.time-card-count:after {
    display: block;
    font-size: 4em;
}

.time-card-label {
    font-size: 0.625em;
    text-transform: uppercase;
    opacity: 0.7;
}

.colon {
    font-size: 2em;
}

.actions .btn {
    margin: 0 8px;
    vertical-align: middle;
}

.btn {
    min-width: 100px;
    padding: 8px 24px;
    display: inline-block;
    border: solid 1px transparent;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-align: center;
    background: none;
    transition: background 0.25s ease-out;
    cursor: pointer;
    white-space: nowrap;
}

.btn:focus {
    outline: none;
}

.btn-success,
[id="stop"]:checked~.actions [for="stop"] {
    border-color: #28A745;
    color: #28A745;
}

.btn-success:hover,
[id="stop"]:checked~.actions [for="stop"]:hover {
    background: rgba(40, 167, 69, 0.12);
}

.btn-danger {
    border-color: #DC3545;
    color: #DC3545;
}

.btn-danger:hover {
    background: rgba(220, 53, 69, 0.12);
}

.btn-info,
[id="start"]:checked~.actions [for="start"] {
    border-color: #17a2b8;
    color: #17a2b8;
}

.btn-info:hover,
[id="start"]:checked~.actions [for="start"]:hover {
    background: rgba(23, 162, 184, 0.12);
}

.btn[disabled],
[id="start"]:not(:checked)+[id="stop"]:checked~.actions [for="start"] {
    color: #fff;
    border-color: #fff;
    opacity: 0.5;
    cursor: not-allowed;
}

[data-max="24"] .time-card-count:after {
    content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23';
}

[data-max="60"] .time-card-count:after {
    content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59';
}

[id="start"]:checked~.timer [data-type="hours"] .time-card-count:after {
    -webkit-animation: counter 86400s infinite steps(24) forwards;
    animation: counter 86400s infinite steps(24) forwards;
}

[id="start"]:checked~.timer [data-type="minutes"] .time-card-count:after {
    -webkit-animation: counter 3600s infinite steps(60) forwards;
    animation: counter 3600s infinite steps(60) forwards;
}

[id="start"]:checked~.timer [data-type="seconds"] .time-card-count:after {
    -webkit-animation: counter 60s infinite steps(60) forwards;
    animation: counter 60s infinite steps(60) forwards;
}

[id="start"]:checked+[id="stop"]:not(:checked)~.actions [for="start"] {
    display: none;
}

[id="start"]:checked~.actions [for="start"] {
    font-size: 0;
}

[id="start"]:checked~.actions [for="start"]:after {
    content: '重置';
    font-size: 14px;
    letter-spacing: 0.05em;
}

[id="start"]:checked~.actions [for="stop"] {
    display: inline-block;
}

[id="start"]:checked+[id="stop"]:checked~.actions [for="reset"] {
    display: none;
}

[for="stop"] {
    display: none;
}

[id="start"]:checked+[id="stop"]:checked~.timer .time-card-count:after {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

[id="stop"]:checked~.actions [for="stop"] {
    font-size: 0;
}

[id="stop"]:checked~.actions [for="stop"]:after {
    content: '继续';
    font-size: 14px;
    letter-spacing: 0.05em;
}

[id="start"]:not(:checked)+[id="stop"]:checked~.regenerate {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
    cursor: pointer;
    font-size: 10px;
}

[id="start"]:not(:checked)+[id="stop"]:checked~.regenerate:hover {
    text-decoration: underline;
}

@-webkit-keyframes counter {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes counter {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

 

Andone_hsx
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Js+CSS完成漂亮的网页倒计时效果
06-08
一个Js+CSS完成漂亮的倒计时效果，仿广州亚运会的网页倒计时效果，CSS的功能其实占了一大半，仅供参考。
纯css3时间计时器代码
ICode联盟
05-13 214
下载地址 使用纯css3代码实现的计时器效果，没有图片或js代码。 dd:
用css做一个好看的计时器
最新发布
qq_69907434的博客
02-23 422
初始时，计数器curNum设为0，paused设为true表示暂停状态。main函数首先获取页面上的计数器元素和两个按钮元素，并设置按钮的初始显示状态。然后，为两个按钮添加点击事件监听器，点击暂停按钮将paused设为true并隐藏暂停按钮、显示播放按钮，点击播放按钮则相反。最后，设置一个每秒执行一次的定时器，当paused为false时，计数器加1并更新到页面上。整个应用实现了简单的计数器功能，可以通过按钮控制计数器的暂停和播放。
纯CSS实现计时器
a_strong_pig的博客
12-06 236
纯CSS实现计时器效果
CSS3+HTML5实现漂亮LED数字时钟
06-14
CSS3+HTML5实现漂亮LED数字时钟
css3倒计时效果
03-18
css3倒计时效果
animation 中的 steps() 的使用 做一个时钟
Wrj6811的博客
10-16 268
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; left: 50%; top: 1...
HTML计时事件（JavaScript）网页电子钟+网页计时器
m0_71385141的博客
09-25 1367
clearTimeout(setTimeout("函数","未来指定毫秒后调用函数"));setTimeout("函数","未来指定毫秒后调用函数");取消setIntval()
用html写一个计时器
weixin_42581003的博客
12-30 942
好的，这是用 HTML 写的计时器的示例代码： <html> <head> <title>计时器</title> </head> <body> <h1>计时器</h1> <p id="time"></p> <script> function ...
HTML——js设置计时器和清除计时器的方法
热门推荐
qq_45152044的博客
12-13 1万+
js中设置计时器和清除计时器的方法
html实现倒计时功能、暂定、继续、重置
IamMXF的博客
05-15 720
开启</button></div><div><button id="stop" class="comstyle">暂停</button></div>/*传过来的形式參数time不要使用this，而其余在本函数使用的变量则必须使用this*/<div><button id="nextOne">下一个人剩余时间：</br>
jQuery实现倒计时功能 jQuery实现计时器功能
12-12
以下代码利用jQuery实现了一个倒计时计时器。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery倒计时实现</title> <style type="text/css"> ....
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
252 5.5　利用双缓冲技术绘制动画 253 5.6　基于时间的运动 254 5.7　背景的滚动 257 5.8　视差动画 261 5.9　用户手势 264 5.10　定时动画 266 5.10.1　秒表 266 5.10.2　动画计时器 269 5.11　动画制作的最佳指导...
timer-for-students:学生聚焦计时器:books::hourglass_not_done:
05-08
学生聚焦计时器 基于著名的Pomodoro技术的非常简单的香草JS项目 :tomato: （鼓励人们利用自己的时间工作的时间管理系统）。 作为提高学生工作效率的一种新方法，该应用程序可以衡量学生学习其考试每个问题所需的时间...
TriviaGame:Trivia（Me）me是用Jquery制作的meme琐事游戏。 它具有倒数计时器的功能
05-09
TriviaGame Trivia Me（me）是一个关于模因的琐事游戏。 该应用程序由HTML，CSS和JQuery组成。 它利用coutdown函数对每个问题进行计时。 游戏会问您几个问题，并提供多项选择答案。...回答问题的计时器选择答案后
launch-countdown-timer-main
03-17
查看页面上所有互动元素的悬停状态看到一个实时倒数计时器，它每秒滴答滴答（从14天开始计数） 奖励：当数字改变时，使卡片从中间翻转截屏链接解决方案URL：实时网站URL：我的过程首先，我将结构化为html文件，然后...
CSS3之线条特效（鼠标悬停线条从中间变长）
Andone_hsx的博客
01-19 9480
当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=
用CSS3实现放大效果
Andone_hsx的博客
12-17 7631
任务描述 本关任务：用CSS3放大效果。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性 下面是基本的html结构，： &lt;div class="scale"&gt; &lt;img src="img/diary1.jpg" alt="diary1"/&gt; &lt;/div&gt;..
html+css 实现弹幕滚动效果
03-22
可以使用 CSS3 的动画实现弹幕滚动效果，具体实现方法可以参考以下代码： HTML 代码： ``` <div class="danmu">这是一条弹幕</div> ``` CSS 代码： ``` .danmu { position: absolute; top: 0; left: 100%; white-space: nowrap; animation: danmu 10s linear infinite; } @keyframes danmu { from { transform: translateX(100%); } to { transform: translateX(-100%); } } ``` 这段代码中，`.danmu` 类设置了绝对定位，`top` 属性设置为 0，`left` 属性设置为 100%，使弹幕从右侧进入。`white-space: nowrap` 属性使文本不换行。`animation` 属性设置了动画名称、持续时间、动画速度和动画次数。 `@keyframes` 规则定义了动画的关键帧，从右侧进入到左侧出去。`transform: translateX()` 属性使元素在水平方向上移动。 当弹幕滚动到左侧时，会重新从右侧进入，形成无限滚动的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值