精华内容
下载资源
问答
  • js定时器代码
    千次阅读
    2019-02-02 09:30:43
    <script language="JavaScript" type="text/javascript">
    	var str = "北京世纪国彩信息服务有限公司";
    	var seq = 0;
    	var second=500; //间隔时间1秒钟
    	function scroll() {
    	msg = str.substring(0, seq+1);
    	document.getElementById('word').innerHTML = msg;
    	seq++;
    	if (seq >= str.length) seq = 0;
    	}
    	function xun(){
    		setInterval('scroll()',second);
    	}
    </script>
    
    <div id="m"></div> 
    <input type="button" value=" 计时开始" onclick="count()"> 
    
    <div>
    	<input type="button" value="循环开始" onclick="xun()">
    	<div id="word" style="color:red;margin-left: 500px;font-size:60px;"></div>
    </div>
    
    更多相关内容
  • JavaScript定时器

    千次阅读 2021-12-02 16:35:18
    首先,我们先来看看定时器,在JS中,有两种定时器: 一、 setTimeout() 定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTimeout()方法用于设置一个定时器,该定时器定时器到期后执行调用函数。 ...


            在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述。
            首先,我们先来看看定时器,在JS中,有两种定时器:

    一、 setTimeout() 定时器

    语法:

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

    setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
    例如:写一个页面,让其五秒钟后弹出‘你好’。
    代码如下:

    window.setTimeout(function(){
                alert('你好');
            },5000);
    

    运行结果为:
    在这里插入图片描述
    需要注意的是:

    1. window 可以省略。
    2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。
    3. 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
      setTimeout() 这个调用函数我们也称为回调函数callback,普通函数是按照代码顺序直接调用。而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。

    二、停止 setTimeout() 定时器

            当我们创建了一个定时器的话,如果我们想要将其取消,应该怎样操作呢?就用到了清除定时器的函数,如下:

    window.clearTimeout(timeoutID)
    

            clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。
    这里面window 可以省略,并且里面的参数就是定时器的标识符 。
            举个例子:
            就上述案列,如果我们想要在指定事件前停止它,可以先添加一个点击按钮,给这个按钮添加清除定时器的事件,操作为:

      var hello = window.setTimeout(function(){
                alert('你好');
            },5000);
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                window.clearTimeout(hello);
            })
    

    运行效果为:
    在这里插入图片描述
            可以看到,当我们没有点击停止按钮的时候,五秒钟后弹出‘你好’,刷新页面后,当我们点击按钮后,不论过多久,都不会有弹窗,清除定时器成功。

    三、setInterval() 定时器

            我们再来看看另一种定时器。

    window.setInterval(回调函数, [间隔的毫秒数]);
    

            setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

    1. window 可以省略。
    2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
    3. 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
      4.我们经常给定时器赋值一个标识符。
    4. 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

            举个例子:
            我们来写一个定时器,让其每隔一秒就打印一个‘你好’,代码为:

      setInterval(function(){
                console.log('你好')
            },1000);
    

    运行效果为:
    在这里插入图片描述

    四、清除setInterval() 定时器

            同样的,我们也可以清除setInterval() 定时器的效果,语法为:

    window.clearInterval(intervalID);
    

            clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
    注意:

    1. window 可以省略。
    2. 里面的参数就是定时器的标识符 。

            比如我们现在有两个按钮,点击一个可以开启定时器,点击另一个可以清除该定时器,操作方法为:

    <body>
        <button class='begin'>开始</button>
        <button class='stop'>停止</button>
        <script>
            var btn = document.querySelectorAll('button');
            var timer = null;
            btn[0].addEventListener('click',function(){
                timer = setInterval(function(){
                    console.log('你好');
                },1000)
            })
            btn[1].addEventListener('click',function(){
                clearInterval(timer)
            })
    </script>
    </body>
    

    运行效果为:
    在这里插入图片描述

    五、电子时钟案例

            我们现在就可以做一个电子时钟,显示当前的年月日时分秒,并让他们自动变化,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 500px;
                margin: 100px auto;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            var div = document.querySelector('div');
            function showTime(){
                var date = new Date();
                var y = date.getFullYear();
                var m = date.getMonth()+1;
                m = m>=10?m:'0'+m;
                var d = date.getDate();
                d = d>=10?d:'0'+d;
                var h = date.getHours();
                h = h>=10?h:'0'+h;
                var dm = date.getMinutes();
                dm = dm>=10?dm:'0'+dm;
                var ds = date.getSeconds();
                ds = ds>=10?ds:'0'+ds;
                var str = y+'年'+m+'月'+d+'日  '+h+'时'+dm +'分'+ds+'秒';
                div.innerHTML = str;
                setTimeout(showTime,1000);
            }
            window.onload = showTime();
        </script>
    </body>
    </html>
    

    运行效果为:
    在这里插入图片描述

    展开全文
  • 1,只执行一次的定时器 代码如下: [removed] //定时器 异步运行 function hello(){ alert(“hello”); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout(...
  • javascript定时器代码

    2021-08-14 11:23:16
    这是一道我刚学习代码的题目 我学生什么也不会,希望各位精英们可以帮我解答解答
  • 在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout(“function();”,delaytime);2.循环定时器:timename=setInterval(“function();”,delaytime); 第一个参数“function()...
  • 解决JavaScript定时器越走越快的问题 之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的...
  • 定时器代码

    2021-12-03 11:41:51
    定时器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定时器</title>
        <!-- 
            定时器
               setTimeout()
               语法: 
                 var timer = setTimeout(function(){
                      //执行的代码
                  },1000) 
                  
                  => 倒计时定时器
                       =>到了指定时间执行回调函数中代码
                       =>返回定时器对象
                
                setInterval()
                 循环执行定时器
                   语法:
                var timer = setInterval(function(){
                      //执行的代码  
                },1000)       
    
                  作用: 按照指定时间循环执行回调函数中代码
    
         -->
    </head>
    <body>
        <script>
            console.log('启动定时器');
            // var timer = setTimeout(function(){
                
            //     console.log('倒计时定时器执行');
    
            //  },2000)
    
            // var timer = setInterval(function(){
            //      console.log('循环执行的代码');
            //  },1000)
    
            // 示例: 5 4 3 2 1 
    
        </script>
    </body>
    </html>
    

    展开全文
  • JS里设定延时: 使用SetInterval和... clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来
  • Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器代码如下: clearInterval(Method);  那么问题来了。用 clearInterval(timerid);来清除,往往不能马上停止,用什么方法比较好解决? 优化方案...
  • 代码: var a=0 var timer1,timer2; function add(){ a++; console.log(a); if(a>=10){ clearInterval(timer1); timer2=setInterval(sub,200); } } function sub(){ a--; console.log(a); if(a<=0){ ...
  • 定时器代码-

    2021-09-09 16:02:53
    script type="text/javascript"> //定时器2 //在解释时调用该函数... myFun2(); function myFun2(){ document.write( new Date() + "<br />"); window.setTimeout(function(){myFun2()...

    定时器:

    			<script type="text/javascript">
    			//定时器2
    			//在解释时调用该函数...
    			myFun2();
    			function myFun2(){
    				document.write( new Date() + "<br />");
    				window.setTimeout(function(){myFun2();} ,10000);
    			}
    			</script>
    

    在第四行为获取本地计算机时间,
    在第五行代码上的数字是以毫秒计算(1秒等于1000毫秒)。

    展开全文
  • 利用JS定时器实现元素移动  利用JS定时器做一个元素做一个有移动效果的方法,实现思路:首先声明一个变量存放元素距离左侧的边距,然后我们在声明一个变量存放每次元素需要移动的距离,然后再给这个方法一个完成...
  • js代码-有限次数定时器生成器
  • 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果,分别是 window.setTimeout()和window.setInterval。其中前者可以使一段
  • JavaScript定时器实现限时秒杀功能  本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html  代码: <!DOCTYPE html>  <html>   <head> ...
  • 下面小编就为大家分享一段js hover 定时器的简单实例。需要的朋友可以过来参考下,希望对大家有所帮助
  • 代码如下: $(function(){ var handler = function(){ } var timer = setInterval( handler , 1000); var clear = function(){ clearInterval(timer); } }); 我要在定时里面加一个页面跳转,然后在页面load的时候加载...
  • 本文实例为大家分享了JavaScript定时器使用的具体代码,供大家参考,具体内容如下 定时器分类 1、循环执行:一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】 2、定时执行(一次定时器):...
  • 主要介绍了 JavaScript-定时器0~9抽奖系统,通过代码实例说明函数调用的整体操作,具体步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • js代码-定时器闭包传参
  • javascript定时器setTimeout的用法一般如下,调用beginrotate之后就进入定时执行rotateloop的一个过程,如下代码代码如下: var angle = 0; function rotateloop() { if (angle < 360) { angle++; //use ...
  • js定时器

    2022-06-29 22:43:05
    JavaScript中提供一定是时间之后触发的功能,就叫做定时器
  • 原生态js定时器代码

    2015-05-21 13:33:15
    定时器代码:页面上会刷新时间,5秒钟后弹出框;var num=0;var max=5;var id=null;function box(){num++;document.getElementById('a').innerHTML=num;if(num==max){clearInterval(id);alert("时间到了");}}id=...
  • js定时器的理解

    2021-08-06 04:55:34
    概念人们对 JavaScript定时器存在普遍的误解,认为它们是线程,其实 JavaScript 是运行于单线程的环境中的,而定时器仅仅只是计划代码在未来的某个时间执行。执行时机是不能保证的,因为在页面的生命周期中,不同...
  • 定时器JavaScript动画的核心技术; setTimeout(),setInterval()是大家熟知的,以前经常使用的; 一般都是做些辅助性,锦上添花的事; 细心的人可能会发现一个现象,从其他标签页切换到有循环动画页面会有卡顿和...
  • JS 定时器的2种写法及介绍
  • js代码-节流函数(时间戳版和定时器版)
  • js定时器实例分享

    2020-10-20 20:22:27
    本篇文章主要介绍了js 定时器的语法、实例、与实现代码分析。具有很好的参考价值,需要的朋友一起来看下吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,756
精华内容 27,102
关键字:

js定时器代码