js实现可刷新的简易计时器

最新推荐文章于 2024-06-05 15:33:33 发布

Lcafebabe

最新推荐文章于 2024-06-05 15:33:33 发布

阅读量1.1k

点赞数 1

分类专栏： js 计时器程序文章标签： javascript

本文链接：https://blog.csdn.net/github_37835908/article/details/77601603

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

计时器程序

1 篇文章 0 订阅

订阅专栏

由于我系统的需求，需要一个计时器功能，并且当input焦点变化时刷新，当超过最大时长之后执行某表单保存方法。现将此段代码记录下来：

<body>
    <input type="text" id="lable" readonly/>
    <input type="text" name="demo-input" style="width: 500px" placeholder="任何input框获得或失去焦点时，视为正在操作，计时器将重置" />
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
(function(){
    timing(function(){
        $('#lable').val('Successful auto saved!');
    },5);
})();
/**
 * 计时器方法
 * 
 * @param  {function} save    自定义save方法，时间超过max后自动执行此方法
 * @param  {int} maxTime 最大时间
 * @return {int} k       可通过返回值k通过clearInterval(k)关闭定时器
 */
function timing(save,maxTime){
    var timer = 0,
        clear = function(){
            timer = 0;
        },
        save_clear = function(){
            save();
            clear();
        };

    $('input').focus(function(){
        clear();
    }).blur(function(){
        clear();
    })

    return setInterval(function(){
        $('#lable').val(maxTime - timer);
        timer >= maxTime ? save_clear() : timer += 1;
    },1000);
}
</script>

Lcafebabe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现可刷新的简易计时器

由于我系统的需求，需要一个计时器功能，并且当input焦点变化时刷新，当超过最大时长之后执行某表单保存方法。现将此段代码记录下来：<body> <input type="text" id="lable" readonly/> <input type="text" name="demo-input" style="width: 500px" placeholder="任何input框获
复制链接

扫一扫

专栏目录