javaScript:快乐学习计时器

目录

一.前言

二.计时器

1.计时器的分类

[2. 创建计时器的方式](#2. 创建计时器的方式)

创建间隔计时器

创建方式三种

1.匿名函数

2.使用函数直接作为计时器的执行函数

2.使用函数直接作为计时器的执行函数,用字符串的形式写入

3.计时器的返回值

4.清除计时器

5.延迟计时器

相关代码


一.前言

在 JavaScript 中,计时器(Timer)是一种用于执行定时任务的机制。它允许你在指定的时间间隔执行代码或者在一定延迟后执行代码。JavaScript 提供了两种主要的计时器函数:setTimeout 和 setInterval。

二.计时器

1.计时器的分类

计时器分为两种

间隔计时器:设置每隔多久执行一次操作或者函数

延迟计时器:设置延迟多久才执行操作或者函数

2. 创建计时器的方式

创建间隔计时器

使用方法是 setInterval()

参数有两个

参数1:执行的函数

参数2:时间间隔,单位是ms,1s = 1000ms

javascript 复制代码
let num = 10
// 赛t in t 沃
let n = null
let timer
   n = setInterval(function(){
    num--
    time.innerHTML = num
    //清除计时器
    if (num <=0) {
        clearInterval(n)
    }
},1000)
console.log(n,num);

创建方式三种

1.匿名函数

setInterval(function(){

//code

},1000)

2.使用函数直接作为计时器的执行函数

function show(){}

setInterval(show,1000);

2.使用函数直接作为计时器的执行函数,用字符串的形式写入

function show(){}

setInterval('show()',1000);

3.计时器的返回值

计时器的返回值,返回值是当前浏览器分配给计时器的编号,谷歌从1开始火狐从2开始,edge是从1开始

4.清除计时器

清除计时器:

清除间隔计时器

clearInterval(计时器对应的编号)

javascript 复制代码
let num = 10
// 赛t in t 沃
let n = null
let timer
   n = setInterval(function(){
    num--
    time.innerHTML = num
    //清除计时器
    if (num <=0) {
        clearInterval(n)
    }
},1000)
console.log(n,num);

5.延迟计时器

延迟计时器

setTimeout(function(){

//code

},1000)

含义是1s之后再执行函数中的代码(执行一次就完了,一般不清除

清除延迟计时器,一般不清除

clearTimeout(计时器对应的编号)

javascript 复制代码
//延时计时器
btn.onclick = function(){
    setTimeout(function(){
        alert('计时器不好玩')
    },1000)
}

相关代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #time{
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px #f00 solid;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="time">10</p>
    <button id="start">点击开始</button>
     <button id="stop1">点击停止倒计时</button>

     <button id="btn">点击一秒后弹出</button>
</body>
</html>
<script>
/*
计时器
1.属于BOM中的内容
2.计时器分为两种
     间隔计时器:设置每隔多久执行一次操作或者函数
     延迟计时器:设置延迟多久才执行操作或者函数
3.创建计时器的方式
     创建间隔计时器
     使用方法是 setInterval()
     参数有两个
     参数1:执行的函数
     参数2:时间间隔,单位是ms,1s = 1000ms

     创建方式三种
     1.匿名函数
     setInterval(function(){
          //code
     },1000)

     2.使用函数直接作为计时器的执行函数
     function show(){}
     setInterval(show,1000);
     
     2.使用函数直接作为计时器的执行函数,用字符串的形式写入
     function show(){}
     setInterval('show()',1000);
  

     计时器的返回值,返回值是当前浏览器分配给计时器的编号,谷歌从1开始
     火狐从2开始,edge是从1开始

     计时器函数里面的变量,属于局部变量,因此外面的操作不能直接操作计时器
     内部的变量,可以理解为外部的操作不会对计时器内部照成影响
     

     清除计时器: 
         清除间隔计时器
             clearInterval(计时器对应的编号)

    延迟计时器
       setInterval(function(){
          //code
     },1000)

     含义是1s之后再执行函数中的代码(执行一次就完了,一般不清除

     清除延迟计时器,一般不清除
     clearTimeout(计时器对应的编号)
*/ 
let num = 10
// 赛t in t 沃
let n = null
let timer
   n = setInterval(function(){
    num--
    time.innerHTML = num
    //清除计时器
    if (num <=0) {
        clearInterval(n)
    }
},1000)
console.log(n,num);



//点击停止倒计时
stop1.onclick = function(){
    clearInterval(n)
}

function show(){
    let r = Math.floor(Math.random()*256)
    let g= Math.floor(Math.random()*256)
    let b = Math.floor(Math.random()*256)
    time.style.background = `rgb(${r},${g},${b})`
}
start.onclick = function(){
    //在使用前先清除,防止计时器累计
    clearInterval(timer)
    timer = setInterval(show,1000)
}

//延时计时器
btn.onclick = function(){
    setTimeout(function(){
        alert('计时器不好玩')
    },1000)
}
</script>
相关推荐
挽淚3 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴4 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
惜.己6 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte8 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
南篱16 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
许白掰23 分钟前
Linux入门篇学习——借助 U 盘或 TF 卡拷贝程序到开发板上
linux·学习·借助 u 盘拷贝程序到开发板上·借助 tf卡拷贝程序到开发板上
apihz29 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
coding随想43 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js