精华内容
下载资源
问答
  • Document#div1 {width: 300px;height: 400px;background: skyblue;margin: 100px auto;text-align: center;}#count {width: 200px;height: 150px;line-height: 150px;margin: auto;font-size: 40px;...

    873a5b4b112b6c8fab31d0177df407c4.png

    Document

    #div1 {

    width: 300px;

    height: 400px;

    background: skyblue;

    margin: 100px auto;

    text-align: center;

    }

    #count {

    width: 200px;

    height: 150px;

    line-height: 150px;

    margin: auto;

    font-size: 40px;

    }

    #div1 input {

    width: 150px;

    height: 40px;

    background: orange;

    font-size: 25px;

    margin-top: 20px

    }

    00

    00

    00

    //可以将查找标签节点的操作进行简化 var btn = getElementById('btn')

    function $(id) {

    return document.getElementById(id)

    }

    window.onload = function() {

    //点击开始建 开始计数

    var count = 0

    var timer = null //timer变量记录定时器setInterval的返回值

    $("start").onclick = function() {

    timer = setInterval(function() {

    count++;

    console.log(count)

    // 需要改变页面上时分秒的值

    console.log($("id_S"))

    $("id_S").innerHTML = showNum(count % 60)

    $("id_M").innerHTML = showNum(parseInt(count / 60) % 60)

    $("id_H").innerHTML = showNum(parseInt(count / 60 / 60))

    }, 1000)

    }

    $("pause").onclick = function() {

    //取消定时器

    clearInterval(timer)

    }

    //停止记数 数据清零 页面展示数据清零

    $("stop").onclick = function() {

    //取消定时器

    $("pause").onclick()

    // clearInterval(timer)

    //数据清零 总秒数清零

    count = 0

    //页面展示数据清零

    $("id_S").innerHTML = "00"

    $("id_M").innerHTML = "00"

    $("id_H").innerHTML = "00"

    }

    //封装一个处理单位数字的函数

    function showNum(num) {

    if (num < 10) {

    return '0' + num

    }

    return num

    }

    }

    展开全文
  • js计时器

    2021-09-28 16:24:06
    实现一个打点计时器,要求 1、从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1 2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作 3、第一个数需要立即输出...

    实现一个打点计时器,要求

    1、从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1
    2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作
    3、第一个数需要立即输出

    function count(start, end) {
        console.log(start)
        var time = setInterval(function(){
            if(start < end){
                console.log(++start)
            }else {
                clearInterval(time)
            }
        },100)
        
        return {
            cancel:function(){
                clearInterval(time)
            }
        }
    }
    
    function count(start, end) {
       obj={
           cancel:function(){
               clearInterval(interval);
           }
       }
        let count=start;
        console.log(count++);
     var interval=setInterval(()=>{if(count<=end)console.log(count++)},100);
        return obj;
    }
    
    function count(start, end) {
       obj={
           cancel:function(){
               clearInterval(interval);
           }
       }
        let count=start;
        console.log(count++);
     var interval=setInterval(()=>{if(count<=end)console.log(count++)},100);
        return obj;
    }
    
    function count(start, end) {
        if (start <= end) {
            console.log(start++);
             
            st = setTimeout(function() {
                count(start, end);
            }, 100);
        }
          
        return {
            cancel: function() {
                clearTimeout(st);
            }
        }
        
    }
    
    展开全文
  • Javascript计时器的用法 当我们学习前端的时候定时器是一个重要的知识点,几乎现在的我们打开一个网页中的页面都会看见定时器的身影,京东淘宝的定时秒,轮播图、规定时间的界面跳转… 在JavaScript中给我们提供了两...

    Javascript计时器的用法

    当我们学习前端的时候定时器是一个重要的知识点,几乎现在的我们打开一个网页中的页面都会看见定时器的身影,京东淘宝的定时秒,轮播图、规定时间的界面跳转…

    在JavaScript中给我们提供了两种定时器setTimeout()和setInterval()

    一、setTimeout()定时器

    语法:window.setTimeout(调用函数,[延迟的毫秒数);

    setTimeout()方法:在指定的毫秒数后执行调用函数
    注意:
    1、因为setTimeout方法是属于window对象的所以我们在调用的时候可以不用写window可以直接写setTimeout(调用函数,[延迟的毫秒数);
    2、延迟的时间单位是毫秒,但是可以省略,如果神略则默认的是0,立即执行

      (1)setTimeout(function(){
          console.log('时间到了');
       }
      (2)setTimeout(function(){
          console.log('时间到了');
        },0)
        
    这两个的定时器的意义是一样的 
    

    3、调用的函数可以直接写函数、可以写函数名、还有字符串的写法’函数名()’

    (1)直接写函数

      setTimeout(function(){
          console.log('时间到了');
        },1000)
    

    (2)写函数名

    		首先定义一个函数
    			function alarm()
    				{console.log('时间到了');}
    			setTimeout(alarm,1000);
    	当一秒过后触发alarm函
    

    (3)字符串的写法’函数名()’

    		首先定义一个函数
    			function alarm()
    				{console.log('时间到了');}
    			setTimeout('alarm()',1000);
    		当一秒过后触发alarm函数
    

    4、当我们页面存在多个定时器的时候,我们经常要给定时器加标识符,防止定时器在计数的时候出现混乱

    	  Var time1 = setTimeout(function(){
    	      console.log('时间到了');
    	    },1000)
    	    
    	  Var time2 = setTimeout(function(){
    	      console.log('时间到了');
    	    },1000);
    

    二、setInterval()定时器

    语法:window.setInterval(调用函数,[延迟的毫秒数);

    setInterval()方法:在指定的毫秒数后执行调用函数
    注意:
    1、因为setTimeout方法是属于window对象的所以我们在调用的时候可以不用写window可以直接写setInterval(调用函数,[延迟的毫秒数);
    2、延迟的时间单位是毫秒,但是可以省略,如果神略则默认的是0,立即执行

      (1)setInterval(function(){
          console.log('时间到了');
       }
      (2)setInterval(function(){
          console.log('时间到了');
        },0)
        
    这两个的定时器的意义是一样的 
    

    3、调用的函数可以直接写函数、可以写函数名、还有字符串的写法’函数名()’

    (1)直接写函数

     setInterval(function(){
          console.log('时间到了');
        },1000)
    

    (2)写函数名

    		首先定义一个函数
    			function alarm()
    				{console.log('时间到了');}
    			setInterval(alarm,1000);
    	每隔一秒过后触发alarm函
    

    (3)字符串的写法’函数名()’

    		首先定义一个函数
    			function alarm()
    				{console.log('时间到了');}
    			setInterval('alarm()',1000);
    		每隔一秒过后触发alarm函数
    

    4、当我们页面存在多个定时器的时候,我们经常要给定时器加标识符,防止定时器在计数的时候出现混乱

    	  Var time1 = setInterval(function(){
    	      console.log('时间到了');
    	    },1000)
    	    
    	  Var time2 = setInterval(function(){
    	      console.log('时间到了');
    	    },1000);
    

    三、两者的区别

    1、window.setTimeout()函数 定时时间到了,就去调用这个函数,只调用一次,当函数调用完成后就结束了这个定时器
    2、window.setInterval();函数 每隔这个定时的时间,就去掉用这个函数,会多次调用重复调用这个函数

    四、清除定时器

    有时候我们会让定时器去除这时候我们应该怎么去除掉定时器呢?

    (1)清除window.setTimeout()定时器用window.clearTimeout(定时器的标识符)

     Var time1 = setTimeout(function(){
    	      console.log('时间到了');
    	    },1000)
    	    
    clearTimeout(time1);
    

    (2)清除window.setInterval()定时器用window.clearInterval(定时器的标识符)

    	Var time1 = setInterval(function(){
    	      console.log('时间到了');
    	    },1000)
    	    
    	clearInterval(time1);
    
    展开全文
  • 简短说就是两个计时器让 div 向左或向右移动;两个button控制向左或向右的事件;当其中一个button按下时,设想让另一个button的计时器清除掉,通过function的形参判断是哪个button;2.代码运行后没有按照设定想法...

    1.代码下方。简短说就是两个计时器让 div 向左或向右移动;两个button控制向左或向右的事件;当其中一个button按下时,设想让另一个button的计时器清除掉,通过function的形参判断是哪个button;

    2.代码运行后没有按照设定想法实现,现象是 当div向左移动后,点击另一个button(即buttno),结果div反复同时向左向右运动,函数中的清除计时器的代码没有起效;这是为什么?

    function fun(flag) {

    var con1 = setInterval(function () {

    if(flag == 1){

    clearInterval(con2)

    div1.style.left = div1.offsetLeft + 5+'px';

    }

    },500);

    var con2 = setInterval(function () {

    if(flag == 2) {

    clearInterval(con1)

    div1.style.left = div1.offsetLeft - 5+'px';

    }

    },500);

    }

    butt.onclick = function () {

    fun(1)

    };

    buttno.onclick = function () {

    fun(2)

    };

    3.另外我自己怀疑是不是作用域的原因,因为最开始我把if的判断是写在最外层的,包裹着两个计时器

    if(flag == 2) {

    var con2 = setInterval(function () {

    clearInterval(con1)

    div1.style.left = div1.offsetLeft - 5+'px';

    },500);

    }

    当时我把clearInterval(con1)写在 var con2 的前面 发现无法获取到con1 即我的编辑器显示con1为灰色字体,把clearInterval(con1)写在var con2下面时,编辑器即认可。所以这是为什么?两个问题哦~~~~

    鉴于大家说只要点击一次就会生成计时器这个我能理解,那我就把最开始我写的贴上 (即用 if判断 包裹)

    function fun(flag) {

    if(flag == 1){

    var con1 = setInterval(function () {

    clearInterval(con2)

    div1.style.left = div1.offsetLeft + 5+'px';

    },500);

    };

    if(flag == 2) {

    var con2 = setInterval(function () {

    clearInterval(con1)

    div1.style.left = div1.offsetLeft - 5+'px';

    },500);

    }

    }

    butt.onclick = function () {

    fun(1)

    };

    buttno.onclick = function () {

    fun(2)

    };

    这种情况下依然无法清除计时器,这是为什么

    展开全文
  • js计时器实现拖拽滚动一、效果图二、实现思路三、核心代码 一、效果图 二、实现思路 第一步:使用循环计时器和一次性计时器实现图片轮播的动画效果。 第二步:设置鼠标进入,动画停止,鼠标离开,动画继续。 ...
  • 第二步:利用循环计时器,克隆ul里面的第一个元素使得连续循环滑动。 第三步:鼠标进入时循环滑动停止,离开时继续。 第四步:设置上下按钮,当第一张图片的offsetTop值为0时,下面按钮出现,当到达底部最后一个元素...
  • JavaScript 计时器

    2021-11-30 17:18:11
    JavaScript 可以创建两类计时器,一种是一次性计时器,另一种是间隔触发的计时器。 一次性计时器 创建计时器 setTimeout(myFunction, millisecondsDelay) 方法用来创建一次性计时器,其中参数 myFunction 是要触发...
  • JS计时器

    2021-04-11 10:34:05
    JS计时器点击刷新,查看最新(距离上次刷新已经过了 0秒)var seconds = 0,minutes = 0,hours = 0,j = 0;$(‘#ECS_caigou’).click(function(e) {if (e.target.id == ‘le’) {clearInterval(x);seconds = 0;minutes = ...
  • 文章目录一、如何实现倒计时的功能?效果图项目思路二、完整代码 一、如何实现倒计时的功能? 效果图 项目思路 先搭建好如下的框架。...input type="text" id="..." ...网页计时器</title> </head> <bo.
  • js 计时器 总结

    2021-09-24 07:53:15
    你可以给每个计时器取一个名字,每个页面上最多可以运行一万个计时器。 当你使用计时器名字调用 console.timeEnd() 函数时,浏览器会返回一个毫秒值,该值表示该计时器启动到你调用 console.timeEnd() 时的时间。 ...
  • 第一步:克隆两个ul,使用循环计时器进行无缝滚动 第二步:设置滚动的速度和时间 第三步:设置鼠标进去box停止滚动,离开继续滚动。 第四步:设置按钮拖动的函数,滚动条拖动,上面动画跟着移动,鼠标抬起,按照原先...
  • js计时器的制作

    2021-09-27 18:18:12
    首先,在你需要计时的方法内启动计时器,然后在你完成后想要停止的地方停止计时器方法 //启动计时器() this.runTime=1 let interval = setInterval(() => { this.runTime++ }, 1000) //停止计时器 ...
  • js计时器语法

    2021-01-15 20:46:22
    计时器(定时器) 设置一个时间,每隔这个时间,执行一次指定代码 setInterval(参数1,参数2) 参数1:函数,被多次执行的代码段 参数2:毫秒数,每次执行时间隔的时间 setInterval(() => { console.log...
  • js中设置计时器和清除计时器的方法
  • js实现内置计时器

    2021-06-10 10:34:08
    计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系,它是实现这些的核心语法,如何一次深刻理解js计时器?往下看你就知道,有惊喜哦!js计时器有两种,一种为延时后单次的执行,另一种为延时多次执行...
  • Javascript中和大多数语言一样,存在计时函数,使某语句或函数不用立即执行,可以延时设定的时间值之后再执行。setTimeout()这个函数表示括号中的代码,延时指定时间后再执行,格式为 setTimeout("function()", time...
  • 两个关键方法setTimeout(“JavaScript语句”,毫秒) 未来的某时执行代码clearTimeout() 取消setTimeout()setTimeout方法会返回一个整数,表示计时器的标号,var t = setTimeout(“javascript语句”,毫秒) ,值会...
  • 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:setTimeout()未来的某时执行代码clearTimeout()取消setTimeout()setTimeout()语法var t=setTimeout("javascript语句",毫秒)setTimeout() 方法会返回某个值...
  • JS中的计时器

    2021-01-07 20:30:10
    JS中的计时器   1.循环计时器 setInterval(function,time,value) function 函数名 time 多长时间执行一次 value 传入参数   1.1创建计时器 可以不用变量接收 方法一 var ...
  • 计时器var hour,minute,second;//时 分 秒hour=minute=second=0;//初始化var millisecond=0;//毫秒var int;function Reset()//重置{window.clearInterval(int);millisecond=hour=minute=second=0;document....
  • javascript 秒表计时器实例代码:js计时器var oTxt=document.getElementsByTagName("input")[0];var oStart=document.getElementsByTagName("input")[1];var oStop=document.getElementsByTagName("input")[2];var ...
  • 元旦倒计时(JS计时器

    千次阅读 2021-10-08 22:03:06
    通过js编写一个距离2022年元旦还剩多少天的计时器 首先我们计算出2022-1-1日距离今天还有多少天 代码如下 <script> var nowTimer = +new Date(); //现在时间的毫秒数 var valueTimer = +new Date("2022-1-...
  • js实现秒表计时器

    2021-12-02 20:32:29
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Do.
  • javaScript计时器

    2021-01-19 09:52:16
    计时器类型: ①一次性计时器:仅在指定的延迟时间之后触发一次。 ②间隔性触发计时器:每隔一定的时间间隔就触发一次。 方法 描述 setTimeout() 指定的延迟时间之后来执行代码 clearTimeout() 取消...
  • <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>...sty...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,340
精华内容 16,136
关键字:

JS计时器