计时器应用——javascript+css+html

最新推荐文章于 2023-12-06 10:45:24 发布
最新推荐文章于 2023-12-06 10:45:24 发布
阅读量362 收藏 2
点赞数
分类专栏： 网页前端 文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42890800/article/details/105315700
版权

使用说明

开始正计时：点击工具栏的“开始正计时”按钮即可，快捷键为"Enter"键。

开始倒计时：在输入框内写入时间后，点击“开始倒计时”按钮，即可开始倒计时。

暂停计时器：点击“暂停计时器”按钮即可暂停。

清空正/倒计时：点击此按钮，计时器便会回到初始状态，等待新的计时。

重新再计时：点击此按钮，计时器便会重新开始此次计时。

恢复计时器：点击此按钮即可从暂停状态中恢复。
在这里插入图片描述

代码

html

index.html

<html>

<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="app.js"></script>
</head>

<body>
    <div class="toolbar">
        <div class="initial">
            <form>
                <input type="text" id="hour">
                <span id="hourLabel">时</span>
        
                <input type="text" id="minute">
                <span id="minuteLabel">分</span>
        
                <input type="text" id="second">
                <span id="secondLabel">秒</span>
            </form>
            
            <button id="countup">开始正计时</button>
    
            <button type="button" id="countdown">开始倒计时</button>
        </div>

        <span id="hint">正在倒计时 12:20:00</span>

        <button type="button" id="clear">清空倒计时</button>
        <button type="button" id="pause">暂停计时器</button>
        <button type="button" id="restart">重新再计时</button>
        <button type="button" id="resume">恢复计时器</button>
        <div>

        </div>
    </div>
    <span id="time">00:00:00</span>
</body>

</html>
css

style.css

body {
    margin: 0;
    padding: 0;
}

.toolbar {
    background-color: #97A5BC;
    width: 1220px;
    height: 70px;
}

#hour {
    background-color: white;
	border-radius: 5px;
    position: absolute;
    left: 40px;
    top: 15px;
    width: 70px;
    height: 40px;
    font-size: 15px;
}

#hourlabel {
    position: absolute;
    left: 85px;
    top: 23px;
    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
    font-size: 16px;
    color: #222222
}

#minute {
    background-color: white;
	border-radius: 5px;
    position: absolute;
    left: 130px;
    top: 15px;
    width: 70px;
    height: 40px;
    font-size: 15px;
}

#minutelabel {
    position: absolute;
    left: 175px;
    top: 23px;
    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
    font-size: 16px;
    color: #222222
}

#second {
    background-color: white;
	border-radius: 5px;
    position: absolute;
    left: 220px;
    top: 15px;
    width: 70px;
    height: 40px;
    font-size: 15px;
}

#secondlabel {
    position: absolute;
    left: 265px;
    top: 23px;
    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
    font-size: 16px;
    color: #222222
}

#countup {
    background-color: #2188E9;
	border-radius: 5px;
	border-color: #2188E9;
    position: absolute;
    left: 310px;
    top: 15px;
    width: 98px;
	height: 40px;
	font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
	font-size: 16px;
	color: #FFFFFF
}

#countdown {
    background-color: #2188E9;
	border-radius: 5px;
	border-color: #2188E9;
    position: absolute;
    left: 428px;
    top: 15px;
    width: 98px;
	height: 40px;
	font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
	font-size: 16px;
	color: #FFFFFF
}

#time {
    position: absolute;
    left: 131px;
    top: 197px;
    font-size: 200px;
    font-family: PTMono-Bold, "PT Mono", monospace;
    font-weight: 700;
    color: #333333
}

#hint {
    position: absolute;
    left: 40px;
    top: 24px;
    font-family: PTMono-Bold, "PT Mono", monospace;
    font-size: 16px;
    color: white;
}

#pause {
    background-color: #2188E9;
	border-radius: 5px;
	border-color: #2188E9;
    position: absolute;
    left: 227px;
    top: 15px;
    width: 98px;
	height: 40px;
	font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
	font-size: 16px;
	color: #FFFFFF    
}

#clear {
    background-color: #DD2E1D;
	border-radius: 5px;
	border-color: #DD2E1D;
    position: absolute;
    left: 964px;
    top: 15px;
    width: 98px;
	height: 40px;
	font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
	font-size: 16px;
	color: #FFFFFF
}

#restart {
    background-color: #FFB020;
	border-radius: 5px;
	border-color: #FFB020;
    position: absolute;
    left: 1082px;
    top: 15px;
    width: 98px;
	height: 40px;
	font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
	font-size: 16px;
	color: #FFFFFF
}

#resume {
    background-color: #2188E9;
	border-radius: 5px;
	border-color: #2188E9;
    position: absolute;
    left: 227px;
    top: 15px;
    width: 98px;
	height: 40px;
	font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
	font-size: 16px;
	color: #FFFFFF    
}
javascript

app.js

window.onload = function() {
    function format(Hour, Minute, Second) {
        if (Second < 10) {
            secondString = "0" + Second;
        } else {
            secondString = Second;
        }

        if (Minute < 10) {
            minuteString = "0" + Minute;
        } else {
            minuteString = Minute;
        }

        if (Hour < 10) {
            hourString = "0" + Hour;
        } else {
            hourString = Hour;
        }
        return hourString + ":" + minuteString + ":" + secondString;
    }

    function changeStatus(aimStatus) {
        if (aimStatus == 1) {
            for (var i = 0; i < initial.length; i++) {
                initial[i].style.display = "inline";
            }
            hint.style.display = "none";
            clear.style.display = "none";
            pause.style.display = "none";
            restart.style.display = "none";
            resume.style.display = "none";
        } else if (aimStatus == 2 || aimStatus == 3) {
            for (var i = 0; i < initial.length; i++) {
                initial[i].style.display = "none";
            }
            hint.style.display = "inline";
            clear.style.display = "inline";
            pause.style.display = "inline";
            restart.style.display = "inline";
            resume.style.display = "none";

            if (aimStatus == 2) {
                // up timing
                hint.innerText = "正在正计时";
                clear.innerText = "清空正计时";
            } else if (aimStatus == 3) {
                // down timing
                recordHour = parseInt(recordMilliSecond / 3600000);
                recordMinute = parseInt((recordMilliSecond % 3600000) / 60000);
                recordSecond = parseInt((recordMilliSecond % 60000) / 1000);
                hint.innerText = "正在倒计时 " + format(recordHour, recordMinute, recordSecond);
                clear.innerText = "清空倒计时";
            }
        } else if (aimStatus == 4 || aimStatus == 5) {
            for (var i = 0; i < initial.length; i++) {
                initial[i].style.display = "none";
            }
            hint.style.display = "inline";
            clear.style.display = "inline";
            pause.style.display = "none";
            restart.style.display = "inline";
            resume.style.display = "inline";

            if (aimStatus == 4) {
                // up pausing
                hint.innerText = "暂停正计时";
                clear.innerText = "清空正计时";
            } else if (aimStatus == 5) {
                // down pausing
                recordHour = parseInt(recordMilliSecond / 3600000);
                recordMinute = parseInt((recordMilliSecond % 3600000) / 60000);
                recordSecond = parseInt((recordMilliSecond % 60000) / 1000);
                hint.innerText = "暂停倒计时 " + format(recordHour, recordMinute, recordSecond);
                clear.innerText = "清空倒计时";
            }
        } else if (aimStatus == 6) {
            for (var i = 0; i < initial.length; i++) {
                initial[i].style.display = "none";
            }
            hint.style.display = "inline";
            clear.style.display = "inline";
            pause.style.display = "none";
            restart.style.display = "inline";
            resume.style.display = "none";

            recordHour = parseInt(recordMilliSecond / 3600000);
            recordMinute = parseInt((recordMilliSecond % 3600000) / 60000);
            recordSecond = parseInt((recordMilliSecond % 60000) / 1000);
            hint.innerText = "倒计时 " + format(recordHour, recordMinute, recordSecond) + " 已结束";
        }
    }

    function CountUp() {
        MilliSecond += 50;
        Hour = parseInt(MilliSecond / 3600000);
        Minute = parseInt((MilliSecond % 3600000) / 60000);
        Second = parseInt((MilliSecond % 60000) / 1000);

        time.innerText = format(Hour, Minute, Second);
    }

    function CountDown() {
        MilliSecond -= 50;
        Hour = parseInt(MilliSecond / 3600000);
        Minute = parseInt((MilliSecond % 3600000) / 60000);
        Second = parseInt((MilliSecond % 60000) / 1000);
        if (MilliSecond <= 0) {
            clearInterval(timer);
            changeStatus(6);
        }
        time.innerText = format(Hour, Minute, Second);
    }

    var hour = document.getElementById("hour"),
        minute = document.getElementById("minute"),
        second = document.getElementById("second"),
        initial = document.getElementsByClassName("initial"),
        countup = document.getElementById("countup"),
        countdown = document.getElementById("countdown"),
        clear = document.getElementById("clear"),
        pause = document.getElementById("pause"),
        restart = document.getElementById("restart"),
        resume = document.getElementById("resume"),
        time = document.getElementById("time"),
        timer = null,
        Hour = 0,
        Minute = 0,
        Second = 0,
        MilliSecond = 0,
        recordMilliSecond = 0;
        hourString = "",
        minuteString = "",
        secondString = "",
        // Status---1: before start; 2: up timing; 3: down timing; 4: up pausing;
        // 5: down pausing; 6: down finished;
        status = 1;


    changeStatus(status);

    countup.onclick = function() {
        status = 2;
        MilliSecond = 0;
        changeStatus(status);
        timer = setInterval(CountUp, 50);
    }


    countdown.onclick = function() {
        status = 3;
        Hour = hour.value;
        if (minute.value > 59) {
            Minute = 59;
        } else {
            Minute = minute.value;
        }
        if (second.value > 59) {
            Second = 59;
        } else {
            Second = second.value;
        }

        hour.value = null;
        minute.value = null;
        second.value = null;

        MilliSecond = Hour * 3600000 + Minute * 60000 + Second * 1000;
        recordMilliSecond = MilliSecond;
        changeStatus(status);

        timer = setInterval(CountDown, 50);
    }

    clear.onclick = function() {
        status = 1;
        changeStatus(status);
        clearInterval(timer);
        time.innerText = format(0, 0, 0);
    }

    pause.onclick = function() {
        if (status == 2) {
            // Now count up
            status = 4;
            changeStatus(status);
            clearInterval(timer);
        } else if (status == 3) {
            // now count down
            status = 5;
            changeStatus(status);
            clearInterval(timer);
        }
    }

    restart.onclick = function() {
        if (status == 2 || status == 4) {
            status = 2;
            MilliSecond = 0;
            changeStatus(status);
            clearInterval(timer);
            timer = setInterval(CountUp, 50);
        } else if (status = 3 || status == 5 || status == 6) {
            status = 3;
            MilliSecond = recordMilliSecond;
            changeStatus(status);
            clearInterval(timer);
            timer = setInterval(CountDown, 50);
        }
    }

    resume.onclick = function() {
        if (status == 4) {
            status = 2;
            changeStatus(status);
            timer = setInterval(CountUp, 50);
        } else if (status = 5) {
            status = 3;
            changeStatus(status);
            timer = setInterval(CountDown, 50);
        }
    }

    document.onkeydown = function(event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) {
            // Enter
            if (status == 1) {
                // before start
                status = 2;
                MilliSecond = 0;
                changeStatus(status);
                timer = setInterval(CountUp, 50);
            }
        }

        if (e && e.keyCode == 32) {
            // space
            if (status == 2) {
                // Now count up
                status = 4;
                changeStatus(status);
                clearInterval(timer);
            } else if (status == 3) {
                // now count down
                status = 5;
                changeStatus(status);
                clearInterval(timer);
            } else if (status == 4) {
                status = 2;
                changeStatus(status);
                timer = setInterval(CountUp, 50);
            } else if (status == 5) {
                status = 3;
                changeStatus(status);
                timer = setInterval(CountDown, 50);
            }
        }
    };
}
可姆可汗
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript，css时间计时器
m0_49191104的博客
11-16 272
JavaScript，css时间计时器 /* 设置字体渐变色 */
HTML计时器
qq_52359647的博客
03-31 758
视觉错觉 计时器营造的视觉迷惑 效果 链接：https://www.bilibili.com/video/BV1f54y187Yb/ 导入图片（顺序不一） 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。 源代码
Timer-Web-app:一个基于html5，css3和javascript的简单计时器网络应用
05-01
计时器网络应用 一个使用Java脚本制作的Simple Timer Web应用程序。 用户可以： 启动一个计时器，默认为60秒 加5秒 减少5秒 暂停
利用Html+纯CSS实现计时器效果
Andone_hsx的博客
09-06 8174
问题描述 最近在学习的过程中一直静不下心来，在网上找了一些计时器软件安装包带很多第三方流氓软件，决定干脆自己做一款。开始考虑利用Js实现计时逻辑业务，后面仔细想了一下，单纯利用CSS3高级就可以实现。 页面设计 页面设计理念好看就行，在此就不多说，直接上静态页面代码！ HTML代码： <html> <head> <title>页面计时器&...
纯css3时间计时器代码
ICode联盟
05-13 223
下载地址 使用纯css3代码实现的计时器效果，没有图片或js代码。 dd:
纯CSS实现计时器
最新发布
a_strong_pig的博客
12-06 371
纯CSS实现计时器效果
web前端之纯css实现计时器、自定义css变量、动画、点击、css替换文字、自定css变量
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
03-20 1178
web前端之纯css实现计时器、自定义css变量、动画、点击、css替换文字、自定css变量
网页模板——js+css3实现的图片爆炸效果轮播切换幻灯特效源码.zip
11-23
**轮播切换**机制可能是通过计时器（如`setInterval`）自动播放，也可以设置手动触发点，如点击导航箭头或滑动事件。此外，还可能有预加载下一张图片的功能，以减少用户等待时间。 **幻灯片特效**的实现可能包含...
网页模板——jQuery+css3实现的点击下载按钮3D加载downlading进度特效源码.zip
11-22
这些函数可能包括启动计时器、更新进度条等操作。 3. **动画制作**：jQuery的`.animate()`方法可以创建平滑的动画效果。在本模板中，可能是改变下载按钮的旋转角度、颜色变化或进度条宽度，以模拟3D下载进度。 ...
2024元旦倒计时代码-html + css + js
01-10
通过理解并修改上述代码，您可以轻松地创建自定义的倒计时器，不仅限于元旦，还可以应用于生日、婚礼、节假日等各种场合。这充分体现了HTML、CSS和JavaScript在构建交互式网页内容方面的强大能力。
基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页 带轮播 带js校验
而风不止
11-24 438
⛵✈网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫网页设计成品模板 | 简单漫画网页设计成品 | HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
大一学生HTML5期末大作业——基于HTML+CSS制作中药主题实训素材
qq_524614081的博客
11-19 394
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
setTimeout不准时，CSS精准实现计时器功能
李刚的学习专栏
05-04 1010
实际开发过程中，我们会经常遇到，首次进入页面进行相应提示，然后指定时间后自动消失或者前端时钟展示等需求。按照传统方案，我们可以使用 setTimeout 实现。但其存在：实际延时比设定值更久的情况。
利用css做时钟
m0_38038767的博客
05-06 1242
在网上看到的一种利用css3做出定时器的方式，就把他记录下来，偶尔可以翻出来看看。代码如下： html代码 <div class="timer"> <span class="hours"></span> <a class="split">:</a> <span class="minutes"></span> <a class="split">:</a> <
倒计时css和js html代码,使用html+css+js实现倒计时，开启你痛苦的倒计时吧
weixin_28789499的博客
06-07 254
倒计时#time{width:350px;height:200px;margin:100px auto;}#time input{margin:20px auto;text-align:center;border-radius:10px;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appear...
Html+Css+js实现计时器
TurtleOrange的博客
05-08 4348
Html+Css+js实现计时器 人狠话不多，先上图 实现原理： 1.通过js控制图片的路径，动态替换图片 2.通过js控制图片的显示或隐藏，动态替换图片 一版的实现代码： game.html <body> <div class="game-startNumber flex"> <div class="staticTime"> &l...
HTML+CSS+JS一个简易的计时器
热门推荐
我的个人博客
07-18 1万+
一个粗糙的计时器， HTML部分： &lt;div class="wrap"&gt; &lt;div id="timer"&gt; &lt;span id="hours"&gt;00&lt;/span&gt; &lt;span&gt;:&lt;/span&gt; &lt;span id
倒计时 css,css实现倒计时效果
weixin_31523833的博客
08-03 2793
一、实现效果截图(学习视频推荐：css视频教程)二、实现原理看到上图效果应该很容易猜到原理，纯CSS的话使用轮播。通过改变图片的margin-top，再加上亿点点动画，亿点点数字图片，就实现了。使用PS建数字图片：然后架结构三、实现细节1、纯CSS轮播论坛里有很多这里就不细讲啦！总之就是利用轮播的效果，让图片由下至上的动画实现2、倒序摆放图片，因为倒计时间是由大到小的(废话) ...
倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器
weixin_33444829的博客
06-07 642
倒计时功能，在很多地方都会用到，我们平时都习惯去用一些插件来应用，会减少不少的工作量，并且效果也能达到预期。我今天并不是想分享什么倒计时插件，而是自己写一个简单的倒数计时器，有兴趣的同学可以往下看看吧！首先看下最终的功能，如图：默认进来，图片上的数字可以从10，逐渐减少到0，如果点击“RESET”，会重新执行。技术我们将让CSS处理动画，因为CSS动画在浏览器中的性能要比JavaScript处理动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值