定时器的使用

最新推荐文章于 2021-10-07 15:56:05 发布
最新推荐文章于 2021-10-07 15:56:05 发布
阅读量102 收藏
点赞数
分类专栏： jsxuexi 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47700237/article/details/107203981
版权

定时器的作用

开启定时器
function show(){
            alert('a');
        }
        //setInterval(show,1000); 无限的执行
        setTimeout(show,1000);   //执行一次
停止定时器

setTimeout—clearTimeout
setInterval----clearInterval

 window.onload=function(){
            var oBtn1=document.getElementById('btn1');
            var oBtn2=document.getElementById('btn2');
            var timer=null;

            oBtn1.onclick=function(){
                timer=setInterval(function(){
                    alert('a');
                },3000);
            };
            oBtn2.onclick=function(){
                clearInterval(timer);
            
            };
        };
          <input id="btn1" type="button" value="开启">
    <input id="btn2" type="button" value="关闭">

数码时钟

获取系统时间
Data对象

var oDate=new Date();
        alert(oDate.getHours());  //小时
        alert(oDate.getMinutes()); //分
        alert(oDate.getSeconds()); //秒

<script>
        function toDou(n){
            if(n<10){
                return '0'+n;
            }
            else{
                return ''+n;
            }
        }

        window.onload=function(){
            // 显示差一秒的
            // var aImg=document.getElementsByTagName('img');
            // setInterval(function(){
            //     var oDate=new Date();

            //     var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
            // //alert(str)
            //     for(var i=0;i<aImg.length;i++){
            //         aImg[i].src='img/'+str[i]+'.png';
            //     }
            // },1000);

            //需要刷新的
            //var aImg=document.getElementsByTagName('img');
            // var oDate=new Date();
             // var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
            // //alert(str)
            // for(var i=0;i<aImg.length;i++){
            //     aImg[i].src='img/'+str[i]+'.png';
            //}

            //可以立刻显示
            var aImg=document.getElementsByTagName('img');
            function tick(){
                var oDate=new Date();

               var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
            
                 for(var i=0;i<aImg.length;i++){
                     aImg[i].src='img/'+str[i]+'.png';
                 }
            }
            setInterval(tick,1000);
            tick();
        };
    </script>
<body style="background: black;color: white;font-size: 50px;">
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    :
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    :
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
</body>

这一段代码存在兼容问题；无法在IE7版本运行
原因：IE7 无法执行
alert（str[0]）
修改方法：将alert（str[0]）改为alert（str.charAt(0))

Data对象其他方法

alert(oDate.getFullYear()); //年
alert(oDate.getMonth()+1); //月 月是从0开始所以要加一
alert(oDate.getDate()); //日
alert(oDate.getDay()); //星期 0—周日 其他正常

延时提示框
<style>
        div{
            float: left;
            margin: 10px;
        } 
        #div1{
            width: 50px;
            height: 50px;
            background: red;
        }
        #div2{
            width: 250px;
            height: 180px;
            background: gray;
            display: none;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            timer=null;
            oDiv1.onmouseover=function(){
                clearTimeout(timer);         //当鼠标回到div1清除计时器
                oDiv2.style.display='block'; 
            }
            oDiv1.onmouseout=function(){
                timer= setTimeout (function(){  //当鼠标移出div1使div2延时500毫秒消失
                    oDiv2.style.display='none';
                },500);
            };
            oDiv2.onmouseover=function(){
                clearTimeout(timer);       //当鼠标回到div2清除计时器
            }
            oDiv2.onmouseout=function(){    //当鼠标移出div2使div2延时500毫秒消失
                setTimeout (function(){
                    oDiv2.style.display='none';
                },500);
        }
        }
    </script>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

## 代码简化

<script> //**onmouse简化代码**
 oDiv2.onmouseover=oDiv1.onmouseover=function(){
                clearTimeout(timer);         //当鼠标回到div1清除计时器
                oDiv2.style.display='block'; 
            }
            oDiv2.onmouseout=oDiv1.onmouseout=function(){
                timer= setTimeout (function(){  //当鼠标移出div1使div2延时500毫秒消失
                    oDiv2.style.display='none';
                },500);
            };
</script>

无缝滚动

offsetLeft/offsetTop/offsetWidth/offsetHeight

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 100px;
            height: 37px;margin: 100px auto;
            position: relative;
            background: red;
            overflow: hidden;
        }
        #div1 ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        #div1 ul li {
            float: left;
            width: 25px;
            height: 37px;
            list-style: none;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var speed=2;

            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
            //简化代码
            function move(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left='0';
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2+'px';
                }
                oUl.style.left=oUl.offsetLeft+speed+'px';
            }
            var timer= setInterval(move,30);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            }
            oDiv.onmouseout=function(){
                timer= setInterval(move,30);
            }
            //向左走向右走
            document.getElementsByTagName('a')[0].onclick=function(){
                speed=-2;
            }
            document.getElementsByTagName('a')[1].onclick=function(){
                speed=2;
            }

             // 向左转动
            // setInterval(function(){
            //     if(oUl.offsetLeft<-oUl.offsetWidth/2){
            //         oUl.style.left='0';
            //     }
            //     oUl.style.left=oUl.offsetLeft-2+'px';
            // },30)

            // //向右转动
            // var timer= setInterval(function(){
            //     if(oUl.offsetLeft<-oUl.offsetWidth/2){
            //         oUl.style.left='0';
            //     }
            //     if(oUl.offsetLeft>0){
            //         oUl.style.left=-oUl.offsetWidth/2+'px';
            //     }
            //     oUl.style.left=oUl.offsetLeft+2+'px';
            // },30);

            // //移入暂停，移出开始
            // oDiv.οnmοuseοver=function(){
            //     clearInterval(timer);
            // }
            // oDiv.οnmοuseοut=function(){
            //     timer=setInterval(function(){
            //     if(oUl.offsetLeft<-oUl.offsetWidth/2){
            //         oUl.style.left='0';
            //     }
            //     if(oUl.offsetLeft>0){
            //         oUl.style.left=-oUl.offsetWidth/2+'px';
            //     }
            //     oUl.style.left=oUl.offsetLeft+2+'px';
            // },30);
            // }
        };

    </script>

<body>
    <!-- //οnclick="alert(this.offsetLeft)" -->
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1" >
        <ul>
            <li><img src="img/1.png" alt=""></li>
            <li><img src="img/2.png" alt=""></li>
            <li><img src="img/3.png" alt=""></li>
            <li><img src="img/4.png" alt=""></li>
        </ul>

    </div>
</body>
Donner_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Timer定时器使用
交通部PC167
11-21 777
import java.util.TimerTask; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.hi.SpringContextHolder; import org.nstcrm.customer.model.Company; import or
解决网络正常状态下QQ，tim登录超时问题
next_sunshine的博客
03-10 7749
描述：网络正常，微信可以登录就是QQ和tim不行，此外网页版本的qq也无法访问。百度百科上面有常见的解决办法，点击右上角设置UDP好TCP等操作以及以管理员方式运行等方法我都试过但是依旧没用。我遇到过两次登录超时的问题，现在写一下我当时用的方法： 1、首先检查一下DNS服务器是不是有问题。我第一次出现登录超时的时候，DNS服务器配置用的很久以前一个师兄说的，我后来改成和其他同学的DNS服务器地址一样的就可以登录了。可以去网上搜索一下qq服务器地址然后win+R并cmd，ping一下能不能ping通。 2、可
Windows——TIM/QQ登录超时，请检查您的网络或者本机防火墙设置的一种解决办法
热门推荐
Williamcsj的博客
10-07 2万+
TIM/QQ登录超时的一种解决办法1.首先，在windows搜索框输入防火墙，打开“检查防火墙状态”。2.打开后，观察现在是否连上网，若没连上则重新连网，若已经显示连上网，则看清楚自己连接的网络类型。3.点击左侧的“启用或关闭Windows Denfender防火墙”。4.关闭自己已连接的网络类型的防火墙。5.重新点击登录TIM或QQ，可以看到顺利登录了。6.打开刚关闭的防火墙，恢复到原状态。 1.首先，在windows搜索框输入防火墙，打开“检查防火墙状态”。 2.打开后，观察现在是否连上网，若没连上则
TIM登录超时，00001解决办法
singxsy的博客
09-18 9974
使用浏览器什么的网络都正常，唯独TIM登陆超时，代码00001，百度经验里说的在登录界面的设置里将登录服务器改为UDP或者TCP，试过也不行，所以“登录服务器”那儿我又改回了“不使用高级选项”。之后试了试打开防火墙，然后就登上了。 打开“控制面板\系统和安全\Windows Defender 防火墙\允许的应用” 找到TIM的位置，点击更改设置，然后再TIM后面的“公用”处都✔，之后点确定。就可以登录上了 ...
Tim/QQ登录超时，请检查您的网络或者本机防火墙设置
combination1379的博客
10-06 1万+
Tim/QQ登录超时，请检查您的网络或者本机防火墙设置  背景：在使用笔记本电脑的时候，无意中不知点了什么，Tim就登录不上去了，尽管电脑是可以连上网络的。  如何解决？直接上图。 **第一步：**打开网络设置，然后点击“更改适配器选项”。  **第二步：**打开以太网的属性设置，去掉IPv6的勾选，然后点击确定即可。  然后你发现，TIM又可以神奇地登录上去了。这里推测的原因可能是TIM不支持Ipv6。  在解决这个问题之前，我也尝试了如下方法： 方法一：  以管理员身份打开cmd，然后键入以下两条命
定时器使用
11-29
定时器使用
555定时器使用
03-16
包含使用555定时器，包括单极形波形产生电路，可调节占空比，频率，产生各种波形
WinCC中定时器使用方法介绍
03-17
WinCC中定时器使用方法介绍.pdf 介绍了关于WinCC中定时器使用方法介绍的详细说明，提供WINCC的技术资料的下载。
定时器使用_51单片机定时器的使用_
10-04
51单片机定时器是微控制器编程中的一个重要组成部分，尤其对于初学者而言，理解和掌握其使用方法至关重要。51单片机，全称为Intel 8051，是一款广泛应用的8位微处理器，它的定时器功能强大且灵活，可以用于实现各种...
MVC Quartz定时器使用
08-20
开发中，经常遇到需要定时执行某个任务的需要。可以用数据库的计划任务完成，也可以用代码完成。.net环境下的Quartz就是非常好的解决方案。Quartz有自己的语言，类似正则也有表达的方式，还是需要学习一下的。
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
java基于ssm+jsp网络安全宣传网站系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
java基于ssm+jsp奶茶店管理系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
[课设项目]Java-SSM框架开发框架的安全教育平台+vue+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个基于Java-SSM框架开发的安全教育平台，采用前后端分离的设计理念，前端使用Vue框架，后端则采用SSM框架进行搭建。项目旨在提供一个全面、安全的教育平台，以满足计算机相关专业学生毕业设计的需求，同时也为Java学习者提供实战练习的机会。 资源包中包含了完整的项目源码、数据库脚本以及详细的开发说明，更有论文参考，助力开发者顺利完成项目并可作为毕设作品提交。项目已历经严格的调试过程，确保在JDK、IDEA和Tomcat的开发环境下能够稳定运行。 对于有一定Java基础的学习者而言，这个项目不仅提供了一个现成的实战案例，更可以在其基础上进行创新和改进，实现更多个性化功能，从而提升技术水平和解决实际问题的能力。无论是毕业设计还是日常学习，这都是一个极具价值的资源。请放心下载使用，相信它会为你带来不少帮助。
sylixos定时器使用
05-27
SylixOS的定时器使用可以分为软件定时器和硬件定时器两种方式。 1. 软件定时器 SylixOS提供了软件定时器的实现，可以通过以下步骤进行使用： （1）定义定时器回调函数 ```c void timer_callback(os_timer_t *ptimer, void *parg) { // 定时器回调处理 } ``` （2）创建定时器 ```c os_timer_t timer; os_timer_create(&timer, "my_timer", 1000, timer_callback, NULL, 0); ``` 其中，第二个参数是定时器名称，第三个参数是定时器超时时间（单位为毫秒），第四个参数是定时器回调函数，第五个参数是回调函数的参数，最后一个参数是标志位。 （3）启动定时器 ```c os_timer_start(&timer); ``` （4）停止定时器 ```c os_timer_stop(&timer); ``` 2. 硬件定时器 SylixOS还支持硬件定时器的使用，可以通过调用底层驱动来实现。具体实现方式可以参考SylixOS的文档和相应的硬件驱动源码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值