【前端项目】计时器模版（附代码）

最新推荐文章于 2024-02-28 17:31:48 发布
最新推荐文章于 2024-02-28 17:31:48 发布
阅读量724 收藏 3
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52387305/article/details/119410928
版权
  • 定时器样式图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 代码块：
<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <head><h1 class="heading">Timer</h1>
        
    <style>
        .heading{
            position: relative;
            text-align: center;
            /* margin-right: 380px; */
            
        }
        .wrap{
            background-color: darkcyan;
            border: pink solid;
            min-height: 350px;
            width: 1000px;
            padding: 10px;
            text-align: center;
            margin: 50px auto;
        }
        .time{
            margin-bottom: 50px;
        }
        span{
            color: white;
            font-size: 100px;
            font-family: Arial, Helvetica, sans-serif;
        }
        .control button {
            width: 80px;
            height: 40px;
            border-radius: 7px;
            border: 1px solid #333;
            outline: none;
            font-size: 20px;

        }
        .control button:nth-child(1){
            
            font-size: 25px;
            background-color: gold;
            font-family: Arial, Helvetica, sans-serif;
            position: relative;
            margin-top: 10px;
            margin-right: 20px;
        }
        .control button:nth-child(2){
            font-size: 25px;
            background-color:red;
            font-family: Arial, Helvetica, sans-serif;
        }
        .control button:nth-child(3){
            font-size: 25px;
            background-color:blue;
            font-family: Arial, Helvetica, sans-serif;
            display: none;
            margin-top: 10px;
            margin-right: 20px;
        }
        .control button:nth-child(4){
            font-size: 25px;
            background-color:yellow;
            font-family: Arial, Helvetica, sans-serif;
            display: none;
        }
        #show{
            color: white;
            font-size: 18px;
            margin: 20px;
        }
        p{
            color: white;
        }
    </style>
    <body>
        <div class="wrap" id="wrap1">
            <div class="time">
                <span>00:</span>
                <span>00:</span>
                <span>00</span>
            </div>
            <div class="control">
                <button>Start</button>
                <button>Reset</button>
                <button onclick="changeH()" id="count">Count</button>
                <button>Pause</button>
            </div>
            <div id="Show"></div>
        </div>
       </head>
       <script>
           var num=document.querySelectorAll(".time span");
           var start=document.querySelectorAll(".control button")[0];
           var reset=document.querySelectorAll(".control button")[1];
           var count=document.querySelectorAll(".control button")[2];
           var pause=document.querySelectorAll(".control button")[3];
           var show=document.getElementById("Show");
           var hour = 0,
            minutes = 0,
            seconds = 0;
            var timer;
            function timerfun(){
                timer=setInterval(function(){
                    seconds++;
                    if(seconds>0&&seconds<60){
                        if(seconds<10){
                            num[2].innerHTML = '0'+ seconds;
                        }
                        else{
                            num[2].innerHTML = seconds;
                        }
                    }
                    else {
                        minutes++;
                        seconds=0;
                        num[2].innerHTML = "00";
                    }
                    if(minutes>0&&minutes<60){
                        if(minutes<10){
                            num[1].innerHTML = '0'+minutes+':';
                        }
                        else {
                            num[1].innerHTML = minutes+':';
                        } 
                    }
                    if(minutes>59){
                        minutes = 0;
                        num[1].innerHTML = "00";
                        hour++;
                    }
                    if(hour>0&&hour<24){
                        if(hour<10){
                            num[0].innerHTML = '0'+hour+':';
                        }
                        else {
                            num[0].innerHTML = hour+':';
                        }
                    }
                },1)
            }
                var cnt=0;
                function counter(){
                    var a = num[0].innerHTML;
                    var b = num[1].innerHTML;
                    var c = num[2].innerHTML;
                    cnt++;
                    
                    var n = document.createElement("p");
                    n.innerHTML = cnt+'. ' + a + b + c;
                    show.appendChild(n);
                }
                function clear(){
                    clearInterval(timer);
                }
            start.onclick = function () {
            start.style.display = "none";
            reset.style.display = "none";
            count.style.display = "inline-block";
            pause.style.display = "inline-block";
            timerfun();
            }
            function over(){
                clearInterval(timer);
            // 把时间重置
            hour = 0;
            seconds = 0;
            minutes = 0;
        
            // 页面元素赋值重置
            num[0].innerHTML = '0' + hour + ':';
            num[1].innerHTML = '0' + minutes + ':';
            num[2].innerHTML = '0' + seconds;
            }
            pause.onclick = function(){
                start.style.display ="inline-block";
                reset.style.display ="inline-block";
                pause.style.display ="none";
                count.style.display ="none";
                clear();
            }
            reset.onclick = function(){
                over();
                show.innerHTML='';
            }
         
            count.onclick = function(){
                counter();
            }
       </script>
    </body>
</html>
Maxwell-Wong
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
时钟闹钟计时器秒表备忘录
07-07
期末设计，使用AndroidStudio制作的包含登陆注册界面（使用Sqlite数据库），时钟，闹钟，计时器，备忘录，秒表功能的代码
使用JavaScript实现一个简单的计时器
wsd02061112的博客
07-24 2465
计时器是前端开发中常见的功能之一，它可以帮助我们记录时间并进行倒计时等操作。在本篇博客中，我将向大家介绍如何使用JavaScript实现一个简单的计时器。通过本篇博客，我们学习了如何使用JavaScript实现一个简单的计时器。希望这篇博客对您有所帮助，如果有任何问题，请随时留言。
前端计时器精确到时分秒 00:00:00
weixin_73854956的博客
02-28 201
1.1 html代码。
倒计时：精确到天时分秒的计时器html前端设计
m0_54200555的博客
11-14 2145
我们 今天学习到计时器，可以用倒计时的方式在网页中通过设定一个日期进行动态倒计时器哦！
前端计时器
wang___haha的博客
09-14 872
var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数。leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数。Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数。var nowtime = new Date(), //获取当前时间。
【前端demo】倒计时器 可选择时间 原生实现
karshey的博客
09-03 556
背景是一种绿色，字体颜色color是白色（或偏白色的浅绿色），影子text-shadow的阴影颜色是深绿色。的递归调用，会调用很多次函数。第1秒的时候调用1次，第2秒时调用2次（原本的和新递归出来的），第3秒调用4次…我们获取选择的时间后，就可以计算选择的时间与当前时间的差值，然后需要写一个计时器。使得body占满整个窗口，此时就有内容的上下居中效果了。都输出当前时间：很显然，每次都要调用一次。想要获取时间：这样就可以把点击的时间传入。想让body的内容上下居中，设置了。，这样才会有秒数动态减少的效果。
【前端代码题】计时器
qq_44314839的博客
04-24 425
一、利用setInterval function count(start, end) { //立即输出第一个值 console.log(start++); var timer = setInterval(function () { if (start <= end) { console.log(start++); } else { clearInterval(timer); } }, 100); //返回一个对象 return {
前端笔记 —— 计时器
紫de飒殇的博客
12-27 912
计时器实现
前端两种常用的定时器
weixin_45096939的博客
01-17 4174
定时器：设定一定时间之后做某事，时间单位是毫秒，1秒等于1000毫秒，定时器回调函数的部分可以直接写函数或者函数名的形式；至于setTimeout一次执行之后要不要清除定时器这点我也不知道，感觉清除不清除好像都可以，如果有答案也可以评论告诉我。setInterval定时器会一直进行下去，不会自己关闭，所以我们可以为定时器命名用来关闭定时器。setTimeout定时器执行结束如果不清除会一直存在，可以为它命名方便清除。2.setInterval（）定时器，延时之后如果不清除则无限次间隔执行。
前端实现精准计时器
qq_35094120的博客
07-05 1237
<html> <head> <style> div { width: 100%; text-align: center; font-size: 20px; color: red; margin-top: 200px; } </style> </head> <div id="time"> </div> <button type="button" on
EXCEL计时器源代码分享
04-14
EXCEL计时器实现，分享源代码，供需要的朋友下载。有暂停。且计时不会随系统时间流逝。
jQuery秒表计时器计次代码
06-24
jQuery秒表计时器计次代码是一款简单的秒表计时器，支持圈计次模式统计次数。
JS 页面计时器示例代码
12-11
代码如下: <html> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <head> [removed] var c=0 var t function timedCount() { document.getElementById(‘txt’)....
爬虫脚本项目源码-简单计时器
02-27
爬虫脚本项目源码-简单计时器
Android 编程下的计时器代码
01-04
同样，为了防止用户恶意的频繁发送激活...具体逻辑看下面的代码： 代码如下:package cn.sunzn.countdown; import android.app.Activity;import android.os.Bundle;import android.os.CountDownTimer;import android.vi
后端开发是一个涉及广泛技术和工具的领域.docx
最新发布
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
android购物车项目计时器代码
06-08
以下是一个基于Android的购物车项目计时器代码示例： ```java public class TimerActivity extends AppCompatActivity { private TextView mTimerTextView; private Button mStartButton; private Button ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值