一个按钮控制定时器的开始与暂停_js让定时器暂停开始-程序员宅基地

技术标签: # JavaScript  前端  定时器  新星计划  javascript  

内容介绍

  最近事情有点多,参加新星计划也接近尾声,顾不上更新文章是个问题,最后决定水一篇,但是又不能太水,所以就有了学习时候的这个案例(论如何光明正大的水)。

一、效果图

在这里插入图片描述

二、实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>一个按钮控制定时器的开始与暂停</title>
    <script type="text/javascript">
        var intervalId;
        var i = 0;
        var count = 0;

        function startTime() {
      
            var hour = document.getElementById("hour");
            var minute = document.getElementById("minute");
            var second = document.getElementById("second");
            var ms = document.getElementById("ms");
            var buttonEle = document.getElementById("start");


            if (i % 2 == 0) {
      
                buttonEle.innerHTML = "暂停计时";
                intervalId = setInterval(function() {
      
                    count += 1;
                    var thehour = parseInt(count / 360000);
                    var theminute = parseInt(count / 6000 % 60);
                    var thesecond = parseInt(count / 100 % 60);
                    var thems = parseInt(count % 100);

                    if (thehour >= 10) {
      
                        hour.innerHTML = thehour + " ";
                    } else {
      
                        hour.innerHTML = "0" + thehour + " ";
                    }

                    if (theminute >= 10) {
      
                        minute.innerHTML = theminute + " ";
                    } else {
      
                        minute.innerHTML = "0" + theminute + " ";
                    }

                    if (thesecond >= 10) {
      
                        second.innerHTML = thesecond + " ";
                    } else {
      
                        second.innerHTML = "0" + thesecond + "  ";
                    }
                    if (thems >= 10) {
      
                        ms.innerHTML = thems + "&nbsp;";
                    } else {
      
                        ms.innerHTML = "0" + thems + "&nbsp;";
                    }
                }, 10)
            } else {
      
                buttonEle.innerHTML = "开始计时";
                clearInterval(intervalId);
            }
            i++;
        }
    </script>
    <style type="text/css">
        body,
        html {
      
            background: violet;
            /*position: relative;*/
        }
        
        #firstDiv {
      
            height: 50%;
            width: 50%;
            position: absolute;
            margin-left: 350px;
            margin-top: 150px;
            background: #ffcccc;
        }
        
        #twoDiv {
      
            height: 200px;
            width: 100%;
            position: absolute;
            margin-top: 130px;
            margin-left: 130px;
            ;
        }
        
        span {
      
            font-size: 30px;
        }
        
        button {
      
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="firstDiv">
        <div id="twoDiv">
            <span><span id="hour">00&nbsp;</span></span>
            <span><span id="minute">00&nbsp;</span></span>
            <span><span id="second">00&nbsp;</span></span>
            <span><span id="ms">00&nbsp;</span>毫秒</span>

            <button id="start" onclick="startTime()">开始计时</button>
        </div>
    </div>
</body>

</html>
三、注

案例不分大小,有想法的小伙伴可以优化结构布局,重新封装函数,或者增加更多有趣的功能,如重置按钮、分段计时等。


标签:JavaScript,定时器


更多演示案例,查看 案例演示


欢迎评论留言!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cainiaoyihao_/article/details/118163321

智能推荐

炫酷!200 行 Python 代码实现马赛克拼图!_图片转换马赛克拼图-程序员宅基地

文章浏览阅读715次。在一图胜千言的时代,没有什么比一张图片更有冲击力的了,那如果一千张图片拼接起来是什么效果呢?别问,问就是两字 —— 炫酷!你有没有想过上面的图片是怎么实现的,难道这是用 ps 一张张拼起来的?当然,靠人工把近千张图片按照色域一一排列,应该是不可能的。今天我们就用 Python 做一个马赛克图片生成器~ 只需要 200 行 Python 代码,就可以将任意图片转化为马赛克拼图效果,一劳永逸!拿来记录校园生活、游戏生涯、送女朋友都最合适不过了!ONE项目思路项目大概_图片转换马赛克拼图

改善深层神经网络(5) —— 超参数调试,Batch正则化和程序框架_超参数间存在耦合-程序员宅基地

文章浏览阅读285次。文章目录1. 调试处理2.为参数选择合适的范围2.12.2 从粗略到精确的选择2.3 如何使用合理的范围1. 调试处理首先,我们先列举部分我们常见的超参数:学习率α动量梯度下降因子βAdam算法的三个超参数β1,β2,εβ_1,β_2,εβ1​,β2​,ε2.为参数选择合适的范围2.12.2 从粗略到精确的选择2.3 如何使用合理的范围..._超参数间存在耦合

ORB-SLAM3笔记_orb_slam3替换相机模型-程序员宅基地

文章浏览阅读725次,点赞3次,收藏2次。相对orbslam2的改进点有: IMU的官方支持 引入相机通用类,方便替换不同模型的相机。并且官方实现了通用相机模型,就是pinhole-equi或者fisheye模型。 假如地图管理功能,支持多个子地图的存在,以及可能的时候合并子地图 recall更高的回环检测,因为要合并地图。如果recall太低,会照成大量的重复地图。 之前的做法是要求DBOW能够找到连续的3 frame。现在改为只要找到1 frame,然后就做集合一致性检查。 使用通用相机模型带来的改变 因为非小孔_orb_slam3替换相机模型

如何获取每月第一个/最后一个交易日_获取每个月第一个交易日sql语句-程序员宅基地

文章浏览阅读5k次,点赞4次,收藏7次。思路是,获取指数的行情信息,然后利用如下代码进行判断:data['first'] = data['trade_date'].where(data['month'] != data.shift(1)['month'], np.nan)data['last'] = data['trade_date'].where(data['month'] != data.shift(-1)['month'], np.nan)完整代码如下:数据源我用的是wind,大家可以用tushare来替代,获取更简单一些._获取每个月第一个交易日sql语句

iso文件:抱歉,装载文件时出现问题_抱歉,装载文件时出现问题-程序员宅基地

文章浏览阅读2.4w次,点赞3次,收藏7次。问题描述右击 ISO 文件选择“装载”,便会弹出一个消息框报错,这该怎么办呢? 解决方法网上有很多的解决办法,例如:更改驱动器号和路径或者是更改注册表 但是我感觉应该没有那么多问题,继续在网上找解决的方法,终于找到一个简单的方法,具体方法如下: 1.右键点属性 2.详细信息 一般不能装载的都是属性都是RAP,可以装载的是RA 3.选择删除属性和个人信息 4.接下来会生成一个副本_抱歉,装载文件时出现问题

在VMware15中创建虚拟机安装ubuntu系统(超详细教程)_vmware15可以装ubuntu14.04-程序员宅基地

文章浏览阅读1.2w次,点赞13次,收藏103次。此篇博文分享幼儿园老小(本人)创建虚拟机安装ubuntu系统的详细操作过程,希望对新手有所帮助咯!(大佬请自行略过哈哈)我的下载地址详情如下:下载请戳–>Ubuntu18.04/64位下载地址提取码:fv6h操作详细过程:1、选中下载完成的ubuntu.rar压缩包,右键选择解压,路径自己选择,我这里是直接【解压到ubuntu】,等待解压完成。2、点击解压完的【ubuntu文件..._vmware15可以装ubuntu14.04

随便推点

Tree树状图的动态增删查改(中)新增节点_kd tree 树 动态 增删 增加 删除 节点 调整-程序员宅基地

文章浏览阅读2.9k次。一、 新增节点1、 新增的基本功能样式可以在tree里面的案例找到,我这里用的添加节点是子节点,父节点其实是不用插件里面那个添加的。只要配置合适,给子节点添加子节点,该节点就会自动变成父节点的,前提是取消节点锁定。2、下面三个a标签分别是添加、修改和删除,把id等值写对了就能对树进行编辑操作了。3、 只要上面的HTML样式写对了,点击了a标签它插件就会自己调用下面的add方法,新增节点后..._kd tree 树 动态 增删 增加 删除 节点 调整

你不知道的功力非凡的20个windows XP小秘密_你所不知道的xp-程序员宅基地

文章浏览阅读745次。你不知道的功力非凡的20个windows XP小秘密 1. systeminfo:让XP列出更多有用信息 Windows XP 总是在炫耀它可以给稳定工作多么长的时间!要想详细地了解这一信息,你可以接入 Windows的“开始菜单”,再开启“附件菜单”中的“命令提示符”,然后在其中输入“systeminfo”这个命令。电脑就会给你显示出许多有用信息,其中包括了这个系统的初次安装时间,以及本次持_你所不知道的xp

nginx常用模块功能介绍_htpasswd -cb-程序员宅基地

文章浏览阅读613次。实验环境:centos7.6,2G内存,50G硬盘大小,虚拟机ip:172.16.1.7,172.16.1.8,172.16.1.9nginx模块nginx访问模块:ngx_http_access_module目的:禁止外网访问,允许内网访问,我这里10.0.0.0是外网,172.16.1.0是内网1.举例配置: location / { deny 192.168.1.1; allow 192.168.1.0/24; allow 10.1.1.0/16; _htpasswd -cb

图论算法——图的遍历_洛谷 图的深度优先算法-程序员宅基地

文章浏览阅读5.2k次,点赞2次,收藏3次。图的基本应用——图的遍历,从具体的题目着手,学习图的遍历方式及代码形式。_洛谷 图的深度优先算法

mongo基础语句全解析_mongo语句-程序员宅基地

文章浏览阅读977次。MongoDB概念解析 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row documen..._mongo语句

Swift 编程语言入门教程_swift 入门教程 书籍-程序员宅基地

文章浏览阅读522次。原文地址:http://gashero.iteye.com/blog/2075324目录1 简介2 Swift入门3 简单值4 控制流5 函数与闭包6 对象与类7 枚举与结构1 简介今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍《The Swift Programming Language》中摘录和_swift 入门教程 书籍

推荐文章

热门文章

相关标签