JS实现可以控制的定时器，setInterval，clearInterval

野性酷女 2024-03-31 16:30 76阅读 0赞

## JS实现可以控制的定时器，setInterval，clearInterval ##

### 效果展示 ###

![在这里插入图片描述][0c76ca6e96754a6582faa9ffe0d35deb.png]

### 概述 ###

简介：本文通过JavaScript中的语法讲解，js是如何实现定时器的开启与停止的。

**学习代码**：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <button class="begin">开启定时器</button>
        <button class="stop">停止定时器</button>
        <script>
        // 首先获取元素
            var begin = document.querySelector('.begin');
            var stop = document.querySelector('.stop');
            var timer = null; // 全局变量  null是一个空对象
            // 给begin按钮添加事件
            begin.addEventListener('click', function() {
          
            // 给timer函数赋值
                timer = setInterval(function() {
          
                    console.log(new Date())                
                }, 1000);
            })
            // 给stop按钮添加一个清空Inteterval的事件
            stop.addEventListener('click', function() {
          
                clearInterval(timer);
            })
        </script>
    </body>
    
    </html>

[0c76ca6e96754a6582faa9ffe0d35deb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/70bb78d2122f47b2832bbc9226435e2f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，76人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现可以控制的定时器，setInterval，clearInterval

JS实现可以控制的定时器，setInterval，clearInterval 效果展示 ![在这里插入图片描述][0c76ca6e96754a6582faa9ffe

野性酷女/ 2024年03月31日 16:30/ 0 赞/ 77 阅读

相关 JS控制------强行清除网站的定时器

使用环境有时候为了捕捉网页上的东西（css…），但是网站又设置有定时器，动态变化我们要捕获的这个东西，所以这时候我们就需要‘暂停网页’，然后去拿到我们想要的东西. >

逃离我推掉我的手/ 2022年12月07日 15:05/ 0 赞/ 220 阅读

相关 JS定时器，可以暂停、继续和重置

> 一个秒级别计数器：点击“开始"按钮从0开始每隔1秒计数，点击"停止"按钮停止计数。计数停止后，再次点击"开始"按钮继续计数。效果： ![js预览][js] 代码：

素颜马尾好姑娘i/ 2022年12月04日 07:44/ 0 赞/ 586 阅读

相关 js_定时器

定时器如：3秒之后执行某方法： var timeoutId = setTimeout(function()\{xxx\},3000); 或 function test

清疚/ 2022年05月25日 05:47/ 0 赞/ 206 阅读

相关 JS定时器

window提供了如下4个方法来支持定时器。 <table> <tbody> <tr> <td>setInterval("code" , interval

红太狼/ 2022年05月19日 09:11/ 0 赞/ 210 阅读

相关 js 实现div里面的内容滚动，并可以通过按钮控制

按照步骤来：一 css 样式控制： .in_f { CLEAR: both; HEIGHT: 46px } .in_f .a {

红太狼/ 2022年04月17日 20:17/ 0 赞/ 473 阅读

相关 js-定时器

js中的定时器包括一次性定时和永久性定时器一次性定时表示方法：setTimeout(function()\{\},时间ms) var i = 0;

超、凢脫俗/ 2022年03月15日 09:38/ 0 赞/ 225 阅读

相关 JS的定时器和清除定时器

在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。常用的定时器有2种 setTimeout(function() {}, 1000);

亦凉/ 2022年01月21日 12:09/ 0 赞/ 400 阅读

相关 js定时器

倒计时 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

我不是女神ヾ/ 2021年12月23日 06:11/ 0 赞/ 271 阅读

相关 js---定时器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

青旅半醒/ 2021年11月10日 14:50/ 0 赞/ 299 阅读