JS——定时器

最新推荐文章于 2024-03-29 09:30:00 发布
最新推荐文章于 2024-03-29 09:30:00 发布
阅读量82 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/gaoquanquan/p/9197722.html
版权

定时器在JS中的作用：

1）制作动画、时钟、倒计时

2）异步操作

3）函数缓冲与节流

定时器类型：

1）setTimeout 只执行一次的定时器

2）clearTimeout 关闭只执行一次的定时器

3）setInterval 反复执行的定时器

4）clearInterval 关闭反复执行的定时器

demo：

1）setTimeout(自制弹窗)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .pop_con{
            /*暂时隐藏*/
            display: none;
        }

        .pop{
            width: 300px;
            height:200px;
            background-color: #fff;
            border:1px solid #000;

            /*使框居中*/
            position: fixed;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top: -100px;
            /*让弹窗覆盖在mask上面*/
            z-index:9999;

        }

        .mask{
            position: fixed;
            width:100%;
            height: 100%;
            background-color: #000;
            left:0;
            top:0;
            /*设置透明度*/
            opacity:0.3;
            /*ie兼容的透明度*/
            filter:alpha(opacity=0.3);
            /*让弹窗覆盖在mask上面*/
            z-index:9990;
        }
    </style>
    
    <script type="text/javascript">
        window.onload = function () {

            var oPop = document.getElementById('pop');
            <!--设置定时器-->
            setTimeout(showpop,2000);
            function showpop() {
               oPop.style.display = 'block';
            }
        }
    </script>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <!--自制弹框-->
    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

2）setInterval 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box{
            width:100px;
            height:100px;
            background-color: gold;
            position: fixed;
            left:20px;
            top:20px;
        }

    </style>
    <script type="text/javascript">

        window.onload = function () {
            var oBox = document.getElementById('box');
            var left = 20;
            var timer = setInterval(function () {
                left+=2;
                oBox.style.left = left + 'px';
                //按照一定条件关闭定时器
                if(left>700){
                    clearInterval(timer);
                }
            },30)
        }

    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

3）定时器制作时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器制作时钟</title>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            function timego() {
                //实例化一个对象Date
                var now = new Date();
                var year = now.getFullYear();
                //这里要注意，这里得到的月份是0~11月，所以要+1
                var month = now.getMonth()+1;
                var date = now.getDate();
                //星期：星期天是一个礼拜的第一天，week=0
                var week = now.getDay();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                //标签里面的内容：innerHTML
                oDiv.innerHTML = '当前时间：'+year+'年'+month+'月'+date+'日'+
                    ' '+toweek(week)+" "+tudou(hour) +':'+ tudou(minute)+":"+ tudou(second);
            }
            //一秒钟刷新一次，但是这样的话，页面的第一秒中是没有内容的，所以加一个timego（）
            timego();
            setInterval(timego,1000);
        }
        //将数字返回成汉字
        function toweek(num){

            switch(num){
                case 0:
                    return '星期天';
                case 1:
                    return '星期一';
                case 2:
                    return '星期二';
                case 3:
                    return '星期三';
                case 4:
                    return '星期四';
                case 5:
                    return '星期五';
                case 6:
                    return '星期六';
            }
        }
        function tudou(num) {

            if(num<10){
                return '0'+ num;
            }
            else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div class="div1" id="div1"></div>
</body>
</html>

4）定时器制作倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器制作倒计时</title>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            //真实的时间是要从服务器获取的，不能从客户端获取
            function tiimeleft(){
                var now = new Date();
                var future = new Date(2018,5,19,15,21,0);
                //ms转为s
                var lefts = parseInt((future-now)/1000);
                var days = parseInt(lefts/86400);
                var hours = parseInt((lefts%86400)/3600);
                var minutes = parseInt(((lefts%86400)%3600)/60);
                var seconds = parseInt(lefts%60);
                //这是一个有底线的倒计时
                if(lefts<=0){
                    window.location.href = 'http://www.baidu.com';
                }
                oDiv.innerHTML = '距离2018年6月22日24时还有'+days+'天'+tudou(hours)+'时'
                +tudou(minutes)+'分'+tudou(seconds)+'秒';
            }
            tiimeleft();
            setInterval(tiimeleft,1000);
        };
        // 将数字返回成汉字
        function tudou(num) {
            if(num<10){
                return '0'+ num;
            }
            else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div class="div1" id="div1"></div>
</body>
</html>

 

转载于:https://www.cnblogs.com/gaoquanquan/p/9197722.html

子非鱼1210
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 定时器结合闭包实现-节流与防抖
Allurewuhui的博客
03-26 882
防抖： 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。 即：如果连续触发 只会执行最后一次触发的回调。 使用场景： 百度搜索框中输入对应内容下方会有相关内容的提示，如果每输入一个文字都发送一次请求是非常浪费性能的，所以使用节流设置一个时间，只有当用户输入完内容之后不在输入，经过了预先设置好的时间才会发起请求。 // 防抖 // 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。 // 即 如果连续触发 只会执行最后一次触发的
js代码-节流函数（时间戳版和定时器版）
07-16
js代码-节流函数（时间戳版和定时器版）
手写-js节流（定时器+时间差两种方式）
James_liPeng的博客
06-17 803
开始时间startTime我们初始值为0就好, 当第一次执行时, nowTime获取的时间戳是一个非常大的值, 得到的结果waitTime是负值, 所以第一次执行节流函数, 一定会立即执行, 这也符合我们要封装的效果。waitTime = interval - (nowTime - startTime), 当前的时间减去开始的时间得到结果, 再使用间隔时间减去这个结果, 就可以得到等待时间。: 实现节流函数, 我们使用定时器是不方便管理的, 实现节流函数我们采用另一个思路。
JS防抖，节流，定时器清理
Jerry子辰的博客
03-24 850
JS防抖，节流，定时器清除重置
Javascript/Jquery——简单定时器的多种实现方法
10-27
JavaScript 和 jQuery 提供了两种主要的方法来实现定时器：`setInterval` 和 `setTimeout`。在本文中，我们将深入探讨这两种方法以及它们的不同用法，同时还会介绍一个使用 `setTimeout` 的可停止计时器的例子。 ##...
轻松解决JavaScript定时器越走越快的问题
10-17
然而，当定时器的管理不当，就会遇到一个问题——定时器“越走越快”。这个问题通常发生在使用`setInterval`函数时，不正确地初始化或清除定时器会导致多个定时器实例并行执行，从而加快执行频率。 在描述中提到的...
JS定时器实现数值从0到10来回变化
11-26
效果：数值从0到10来回变化 代码： var a=0 var timer1,timer2; function add(){ a++; console.log(a); if(a>=10){ clearInterval(timer1); timer2=setInterval(sub,200);...———-分割线———————— 此
Javascript定时器(二)——setTimeout与setInterval
09-23
JavaScript定时器是编程中不可或缺的一部分，它们允许我们延迟执行代码或定期执行代码。在这个主题中，我们将深入探讨`setTimeout`和`setInterval`这两个核心定时器函数，它们在JavaScript中的应用以及它们之间的...
JS 节流防抖
最新发布
weixin_48813932的博客
03-29 446
防抖是将多次执行变为最后一次执行，一个高频事件触发后 n 秒内函数只会执行一次，如果在 n 秒内高频事件再次被触发，则重新计算时间。这就像如果你正在等公交车，只要在等待时间内有人上车，公交车就会等到这个时间结束后才开走。关键点：setTimeout 定时器 apply arguments 闭包。
关于JavaScript中的防抖和节流
weixin_45939221的博客
11-11 379
关于JavaScript中的防抖和节流。所谓防抖就是指即便短时间内大量触发同一事件，但也只是会执行一次函数。节流是间隔执行，只有每间隔一段时间才能再次执行。
前端研习录（32）——JavaScript 基于定时器实现防抖、节流
清风不渡
08-16 650
重拾前端记忆，记录学习笔记，现在进入JavaScript 防抖、节流部分
JS写定时器节流函数 配合Oninput事件
小老弟的博客
12-24 894
JS写定时器节流函数JS定时器什么是JS定时器Oninput JS定时器 1、setTimeout 2、setInterval 3、clearTimeout 4、clearInterval 什么是JS定时器 最简单来讲就是JS提供给我们的一种延时执行代码的方法，比如我想在某个按钮按下以后，等待1秒去执行提醒，这是最基础的用法； <html> <body> <script type="text/javascript"> function clock() { alert('
JS定时器实现函数节流和防抖 -简单实现对比 -适用地方
weixin_30839881的博客
07-30 2576
如题 (总结要点) 防止重复点击！ 最近项目中遇见这个“函数抖动”的问题！快速点击前端xx按钮，造成数据多次加载进页面里，正常只显示10条数据，结果显示了20条数据，异常！ 出现原因： 前端发送ajax异步请求（异步）， 假设发送两次bindData 同时请求，同时清空已有数据，同时接受返回的结果，一个list中便存储了两份数据。手速够快，还可以加进更多分！ 解决方案：函数节流！强制2...
js防抖和限流
cxu123321的博客
12-06 380
js防抖和限流 2019-04-08 10:54:56微信号 xiexiezhizhi阅读数 533收藏更多 分类专栏：js 版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/a_passing_traveller/article/details/89083676 防...
js函数节流
张小杰
09-13 272
原文地址：js函数节流 我们知道，js有些事件例如resize，mousemove等是会不间断触发的，例如我们简单的一个scroll事件：    function scrollFn(){ console.log(1) } window.onscroll=scrollFn 我们需要在滚动的时候去做一些事情，如上图可见，我们只是简单的console，在一次滚动过程中函数即执行了将近...
setInterval设置停止的次数和时间
热门推荐
陈万洲的专栏
12-26 1万+
需要知道已经经过了多少次或者说过多久就会停止 var timesRun = 0; var interval = setInterval(function(){ timesRun += 1; if(timesRun === 60){ clearInterval(interval); } //do whatever here.. }, 2000); var startTime = new Date
JS 防抖和节流（节流常用方式及控制第一次和最后一次触发）
Change_xiao的博客
06-13 3116
JS 防抖和节流（节流常用方式及控制第一次和最后一次触发）
js中两种计时器、防抖、节流
weixin_43859703的博客
07-17 1090
计时器 setTimeout()：一次性计时器； setInterval()：连续计时器； 用法： 两者除了一次性和连续，其他基本完全一样。 1.两个参数 一般情况下计时器都是两个参数 格式： setTimeout(f,time)=>f为计时到达后需要执行的函数，time为计时器的时间。 举例：setTimeout(function(){console.log(1)},1000)//=...
js 判断定时器是否被清除_姊妹篇——JS节流
05-31
如果你想判断一个定时器是否被清除，可以使用下面的方法： 1. 在设置定时器时，将定时器的 ID 存储在一个变量中： ``` var timerId = setInterval(function() { // ... }, 1000); ``` 2. 在需要判断定时器是否被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值