精华内容
下载资源
问答
  • js实现定时器

    2021-04-23 10:14:58
    倒计时按钮 定时任务 案例 定时任务 window.setTimeout(func,1000)   一秒后执行该func函数,无法传参 需求,需要传参怎么办?... } //定时器 setTimeout(function(){ settime(obj); },1000); } script> body> html>

    倒计时按钮

    定时任务

    window.setTimeout(func,1000)
      一秒后执行该func函数,无法传参
    需求,需要传参怎么办?
      1.定义一个无名函数,在无名函数内部执行
      func,可传参
      function(){ func(params);}
      2.使用闭包

    window.setInterval(func,1000)
    周期性的执行func,即每一秒执行一次func

    案例

    在这里插入图片描述

    <!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>计时按钮</title>
        <style>
            #settime{
                color:blue;
                margin: 0,auto;
                font-size: 2em;
                text-align:center;
                width:200px;
                height:100px;
                border-radius:30%;
                z-index:100;
            }
        
        </style>
    </head>
    <body>
        <div style="text-align:center;">
            <p style="font-size:1.5em;color:red;">倒计时按钮</p>
            <input type="button" id="settime" value="计时器" onclick="settime(this);">
            <!--this 触发当前事件的js对象-->
        </div>
        <script>
            var countdown = 60;
            function settime(obj){
                console.log(countdown);
                if (countdown == 0){
                    obj.setAttribute("value","发送验证码");
                    obj.removeAttribute("disabled");//恢复可点击
                    return ;
                }else{
                    obj.setAttribute("disabled",true);//设置不可点击
                    obj.setAttribute("value","重新发送("+countdown+")");
                    countdown--;
                }
                //定时器
                setTimeout(function(){
                	settime(obj);
                	},1000);
    
            }
        </script>
    </body>
    </html>
    
    展开全文
  • JS实现定时器

    2019-01-23 14:19:00
    导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. oneTime(时间间隔, [定时器名称], 呼叫的函式)3. stopTime (...

     

    导出:jquery.timers-1.2.js

     

    jQuery Timers提供了三个函式

    1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])
    2. oneTime(时间间隔, [定时器名称], 呼叫的函式)
    3. stopTime ([定时器名称], [函式名称])

    官方虽然有Demo,但是却没有列出使用的原始码,即便右键检视原始码,里面也没有完整针对每一种情况写出一组程序说明,所以我只好试着测试函式了。以下为测试程序报告:

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    /*************************************************************
    * everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])
    *************************************************************/
    //每1秒执行函式test()
    function test(){
    //do something...
    }
    $('body').everyTime('1s',test);

    //每1秒执行
    $('body').everyTime('1s',function(){
    //do something...
    });

    //每1秒执行,并命名定时器名称为A
    $('body').everyTime('1s','A',function(){
    //do something...
    });

    //每20秒执行,最多5次,并命名定时器名称为B
    $('body').everyTime('2das','B',function(){
    //do something...
    },5);

    //每20秒执行,无限次,并命名定时器名称为C
    //若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时
    $('body').everyTime('2das','C',function(){
    //执行一个会超过20秒以上的程序
    },0,true);

    /***********************************************************
    * oneTime(时间间隔, [定时器名称], 呼叫的函式)
    ***********************************************************/
    //倒数10秒后执行
    $('body').oneTime('1das',function(){
    //do something...
    });

    //倒数100秒后执行,并命名定时器名称为D
    $('body').oneTime('1hs','D',function(){
    //do something...
    });

    /************************************************************
    * stopTime ([定时器名称], [函式名称])
    ************************************************************/
    //停止所有的在$('body')上定时器
    $('body').stopTime ();

    //停止$('body')上名称为A的定时器
    $('body').stopTime ('A');

    //停止$('body')上所有呼叫test()的定时器
    $('body').stopTime (test);

    转载于:https://www.cnblogs.com/zoujinhua/p/10308712.html

    展开全文
  • 分享一个用原生JS实现的定时器多段动画,效果如下: 代码实现如下,详情请看代码注释: <!DOCTYPE html> <html lang="en">...原生JS实现定时器多段动画</title> <style&...

     分享一个用原生JS实现的定时器多段动画,效果如下:

    代码实现如下,详情请看代码注释:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>原生JS实现定时器多段动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #btn1 {
                position: relative;
                left: 50%;
                top: 300px;
                transform: translate(-50%, -50%);
            }
    
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }
        </style>
    </head>
    
    <body>
        <button id="btn1">运动</button>
        <div id="box"></div>
        <script>
            var btn1 = document.getElementById("btn1");
            var box = document.getElementById("box");
            var timer = null;
            btn1.onclick = function () {
    
                // 我们想要通过多次调用animate,实现多段运动
                // 但是只会执行后一个,原因是后面的调用将前面的调用定时器清除
                // 我们需要的是当第一次运动完成后,再去执行第二个运动
    
                // 代码修改后
                animate(box, {
                    width: 200,
                    height: 170,
                    left: 130,
                    top: 240,
                    opacity: 0.5,
                    zIndex: 3
                }, function () {
                    animate(box, {
                        width: 300,
                        height: 270,
                        left: 230,
                        top: 140,
                        opacity: 0.7,
                        zIndex: 1
                    });
                });
            };
            animate(box, {
                width: 100,
                height: 200
            }, function () { });
    
    
            // 可以让多个样式同时进行运动的animate
            function animate(tag, obj, fn) {
                // 停止加速
                clearInterval(tag.timer);
                tag.timer = setInterval(function () {
                    // 假设本次可以进行清除
                    var flag = true;
                    for (var k in obj) {
                        // 针对opacity和zIndex进行单独处理
                        if (k == "opacity") {
                            var target = obj[k] * 100;
                            var leader = getStyle(tag, k) * 100 || 0;
                            var step = (target - leader) / 10;
                            // 设置取整,保证元素可以进行运动
                            step = step > 0 ? Math.ceil(step) : Math.floor(step);
                            leader = leader + step;
                            // 缩小对应的倍数,并且去除单位
                            tag.style[k] = leader / 100;
                        } else if (k == "zIndex") {
                            // zIndex不需要运动,只要进行修改设置即可
                            tag.style.zIndex = obj[k];
                        } else {
                            // k - 属性名 - attr - 要修改的样式名
                            // obj[k] - 属性值 - target - 要修改的样式的目标值
                            var target = obj[k];
                            var leader = parseInt(getStyle(tag, k)) || 0;
                            var step = (target - leader) / 10;
                            // 设置取整,保证元素可以进行运动
                            step = step > 0 ? Math.ceil(step) : Math.floor(step);
                            leader = leader + step;
                            tag.style[k] = leader + "px";
                        }
                        // 如果有某一个样式没有运动到指定位置,阻止清除
                        if (leader != target) {
                            flag = false;
                        }
                    };
                    if (flag) {
                        clearInterval(tag.timer);
                        fn && fn();
                    }
                }, 20);
            };
            // 由于获取标签任意样式的值
            function getStyle(tag, attr) {
                if (tag.currentStyle) {
                    return tag.currentStyle[attr];
                } else {
                    return getComputedStyle(tag, null)[attr];
                }
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...原生JS实现定时器多段动画</title> <style> * { margin: 0; padding: 0; } #btn1 { ...

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>原生JS实现定时器多段动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #btn1 {
                position: relative;
                left: 50%;
                top: 300px;
                transform: translate(-50%, -50%);
            }
    
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }
        </style>
    </head>
    
    <body>
        <button id="btn1">运动</button>
        <div id="box"></div>
        <script>
            var btn1 = document.getElementById("btn1");
            var box = document.getElementById("box");
            var timer = null;
            btn1.onclick = function () {
    
                // 我们想要通过多次调用animate,实现多段运动
                // 但是只会执行后一个,原因是后面的调用将前面的调用定时器清除
                // 我们需要的是当第一次运动完成后,再去执行第二个运动
    
                // 代码修改后
                animate(box, {
                    width: 200,
                    height: 170,
                    left: 130,
                    top: 240,
                    opacity: 0.5,
                    zIndex: 3
                }, function () {
                    animate(box, {
                        width: 300,
                        height: 270,
                        left: 230,
                        top: 140,
                        opacity: 0.7,
                        zIndex: 1
                    });
                });
            };
            animate(box, {
                width: 100,
                height: 200
            }, function () { });
    
    
            // 可以让多个样式同时进行运动的animate
            function animate(tag, obj, fn) {
                // 停止加速
                clearInterval(tag.timer);
                tag.timer = setInterval(function () {
                    // 假设本次可以进行清除
                    var flag = true;
                    for (var k in obj) {
                        // 针对opacity和zIndex进行单独处理
                        if (k == "opacity") {
                            var target = obj[k] * 100;
                            var leader = getStyle(tag, k) * 100 || 0;
                            var step = (target - leader) / 10;
                            // 设置取整,保证元素可以进行运动
                            step = step > 0 ? Math.ceil(step) : Math.floor(step);
                            leader = leader + step;
                            // 缩小对应的倍数,并且去除单位
                            tag.style[k] = leader / 100;
                        } else if (k == "zIndex") {
                            // zIndex不需要运动,只要进行修改设置即可
                            tag.style.zIndex = obj[k];
                        } else {
                            // k - 属性名 - attr - 要修改的样式名
                            // obj[k] - 属性值 - target - 要修改的样式的目标值
                            var target = obj[k];
                            var leader = parseInt(getStyle(tag, k)) || 0;
                            var step = (target - leader) / 10;
                            // 设置取整,保证元素可以进行运动
                            step = step > 0 ? Math.ceil(step) : Math.floor(step);
                            leader = leader + step;
                            tag.style[k] = leader + "px";
                        }
                        // 如果有某一个样式没有运动到指定位置,阻止清除
                        if (leader != target) {
                            flag = false;
                        }
                    };
                    if (flag) {
                        clearInterval(tag.timer);
                        fn && fn();
                    }
                }, 20);
            };
            // 由于获取标签任意样式的值
            function getStyle(tag, attr) {
                if (tag.currentStyle) {
                    return tag.currentStyle[attr];
                } else {
                    return getComputedStyle(tag, null)[attr];
                }
            }
        </script>
    </body>
    
    </html>
    展开全文
  • javascript实现定时器倒计时

    千次阅读 热门讨论 2021-04-10 21:04:22
    //开启定时器 setInterval(countDown,1000); function countDown() { var nowTime = +new Date(); //返回的是当前时间的走毫秒数 var times = (inputTime - nowTime) / 1000; //times是剩余时间的总数 // var d = ...
  • js学习笔记之用js实现定时器倒数跳转至指定网页或首页: 直接上源码: 无标题文档 success! 5s后跳转至首页,若没有跳转,请点击这里 var beginTime = 5; var timer = setInterval(function(){ var...
  • 在项目中,常常需要使用定时器做一些轮询的操作,Node JS里面提供了两个全局函数setTimeout和setInterval来实现,但是在使用中,定时任务往往是一些耗时操作,我们期望每一次轮询等操作做完了在重新开始定时器,因此...
  • js实现定时器(定时执行函数)

    千次阅读 2020-04-30 18:18:31
    //全部代码 <!... function show() { document.write(i++ + " ");` } window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function() { // setInterval... } } </script> 实现效果
  • JavaScript定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("function",time) 设置一个超时对象;延迟执行;只执行一次 setInterval("function",time) 设置一个超时对象;连续...
  • //开定时器前先关闭定时器。否则会多开几个定时器,div的速度会变快。  var oDiv=document.getElementById('div1');    timer=setInterval(function(){    if(oDiv.offsetLeft>=300)  {  clearInterval...
  • <script type="text/javascript">var tValue; setInterval(function(event){ if(tValue !=document.getElementById("jcxmc").value){ //这里写自己的业务逻辑代码 tValue =document.getElementById("jcxmc")....
  • ...//清除定时器    location.href="http://qiuqiuyifang.taobao.com/";  }  } ();"> 4秒钟后跳转到百度首页 <font color="#33CC33" id="num">4
  • javascript实现定时器

    2019-12-08 21:21:56
    使用javascript实现定时器 javascript中的setTimeout函数,用来实现定时器,第一个参数为实现的调用函数,第二个参数为定时的时间,单位为秒数。她点为该函数只可以调用一次 下面为一个使用setTimeout函数的简单...
  • js实现时钟定时器

    2020-10-15 12:01:23
    主要为大家详细介绍了js实现时钟定时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • js和java分别实现定时器效果1. 定时器2.JavaScript实现 1. 定时器 所谓定时器,就是每隔一段时间进行的重复性的工作,在编码的层次上来说,代码是不变的。 下面我们分别用JavaScript和Java实现定时器输出时间的...
  • 主要介绍了javascript基于定时器实现进度条功能,简单分析了javascript定时器的功能、使用方法并给出了基于定时器实现的进度条功能实例,需要的朋友可以参考下
  • 本文实例为大家分享了js实现时钟定时器的具体代码,供大家参考,具体内容如下时钟function showClock(){// 1. 获取当前时间var time = new Date();// document.write(time);var year = time.getFullYear();// ...
  • js 各种定时器实现

    热门讨论 2012-07-06 08:50:13
    已知的多种方式实现js定时器功能。支持延缓加载功能。
  • javascript递归实现定时器

    千次阅读 2014-04-04 16:49:30
    该文章解决的问题是每隔一段时间判断一下某个事件是否符合规定的条件,
  • js实现日历与定时器

    2020-10-20 08:50:21
    本文主要介绍了js实现日历与定时器的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 实现JavaScript定时器

    2019-02-20 13:14:15
    在学习JavaScript的内容中,我们知道了JavaScript实现页面动画的重要部分。在实现页面轮播时,我们可以利用定时器来获取当前的图片,设置当前图片到下一张图片所用的时间。我们也可以用源代码来获取当前的日期和...
  • JS设置定时器和清除定时器

    万次阅读 多人点赞 2018-09-03 14:50:52
    JS设置定时器和清除定时器  在做项目中难免会碰到... window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一...
  • javascript和ext实现定时器

    千次阅读 2012-05-29 11:34:41
    function $(id){return document.getElementById(id);} function clock() { $("test_div").innerHTML = "" + (new Date...// 方法1:用js内置的api实现定时器 //setInterval(clock, 1000); // 方法2:用EXT4.1实现
  • 主要介绍了使用js函数定时器实现定时读取系统实时连接数,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,438
精华内容 19,775
关键字:

js实现定时器