JS基础知识——定时器

最新推荐文章于 2022-07-27 14:44:06 发布
最新推荐文章于 2022-07-27 14:44:06 发布
阅读量67 收藏
点赞数
原文链接：http://www.cnblogs.com/sylz/p/5746063.html
版权

1、定时器——setInterval("执行函数名",间隔时间);

　　setInterval(fun,1000);每隔1秒钟执行一次fun函数

　　setInterval("fun()",1000);每隔1秒钟执行一次fun函数

　　排队执行——间隔时间t1和程序执行时间t2，如果t1<t2（程序执行时间比间隔时间还长），这样是不合理的。必须是t2<=t1。

      timer=setInterval(fun,1000);  clearInterval(timer);  关闭定时器

2、倒计时

　　原理：最终时间-现在时间=倒计时

　　问题1：如果直接用年份和月份来减，会存在年份不一样，月份不一样导致天数不一样的尴尬局面，所以就借助于一个基准时间，就是1970年1月1日午夜。

　　解决办法：用最终时间的距离1970 的毫秒数-现在距1970的毫秒数=将得到的结果不断转化就可以了

　　问题2：现在距离1970的毫秒数容易获取，但是最终时间的毫秒数如何获取呢？

　　解决办法：var nowTime=new Date();//不写参数，得到的是当前时间

　　　　　　   var endTime=new Date("2016/11/11");   //写了参数，就可以设置一个未来的时间

　　　　　　　var endTime=new Date("2016/11/11 12:00:00");//这个是写了一个更具体的参数，带时钟的未来时间

3、定时器——setTimeout("fun()",1000);  

　　　　延迟1秒钟执行函数，只执行一次。

4、setTimeout应用实例

功能：页面倒计时跳转　

代码：这个比setinterval要更友好，更常用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
    <body>
        <div id="box"></div>
    </body>

</html>
    <script type="text/javascript">
    var box=document.getElementById("box");
    setTimeout(goIndex,1000);
    var time=5;
    function goIndex(){
        time--;
        if(time<0){
            window.location.href="http://www.baidu.com";
        }else{
            box.innerHTML="<a href='http://www.baidu.com'>还有"+time+"秒跳转到百度首页...</a>";
            setTimeout(goIndex,1000);
        }
    }
</script>

 5、setTimeout应用实例

　　描述：图片上下滚动播放

　　原理：让图片绝对定位，改变图片的top值，让其上下移动。

　　代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin:0;padding: 0;}
            #box{
                width: 512px;
                height: 400px;
                margin:20px auto;
                overflow: hidden;
                position: relative;
            }
            #box img{
                position: absolute;
                top: 0;
                left: 0;
            }
            #box span{
                position: absolute;
                left:0;
                width:512px;
                height:200px;
                cursor: pointer;
            }
            #box #top{
                top:0;
            }
            #box #bottom{
                bottom:0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var top=document.getElementById("top");
                var bottom=document.getElementById("bottom");
                var pic=document.getElementsByTagName("img")[0];
                var topposition=0;
                var height=1470;
                var timer=null;
                top.onmouseover=function(){
                    timer=setTimeout(goDown,10);
                    function goDown(){
                        topposition--;
                        if(topposition>(-1*1070)){
                            pic.style.top=topposition+"px";
                            timer=setTimeout(goDown,10);
                        }else {
                            topposition=-1070;
                            pic.style.top=topposition+"px";
                            clearTimeout(timer);//跳出递归
                        }
                    }
                }
                top.onmouseout=function(){
                    clearTimeout(timer);
                    pic.style.top=topposition+"px";
                }
                bottom.onmouseover=function(){
                    timer=setTimeout(goUp,10);
                    function goUp(){
                        topposition++;
                        if(topposition<0){
                            pic.style.top=topposition+"px";
                            timer=setTimeout(goUp,10);
                        }else{
                            topposition=0;
                            pic.style.top=topposition+"px";
                            clearTimeout(timer);//跳出递归
                        }
                    }
                }
                bottom.onmouseout=function(){
                    clearTimeout(timer);
                    pic.style.top=topposition+"px";
                }
            }
        </script>
    </head>
    <body>
        <div id="box">
            <img src="img/mi.png" alt="" />
            <span id="top"></span>
            <span id="bottom"></span>
        </div>
    </body>
</html>

 

　　

转载于:https://www.cnblogs.com/sylz/p/5746063.html

weixin_30731287
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript基础知识大全
08-03
JavaScript是Web开发中不可或缺的...理解并熟练掌握这些JavaScript基础知识，将为你的Web开发之路打下坚实的基础。在实践中不断探索和学习，你将能够构建复杂的交互式Web应用，利用JavaScript的强大力量创造无限可能。
js初学者特效教程——网页雪花特效demo
12-24
在JavaScript的世界里，特效的创建...通过这个项目，你将深入理解前端开发中的动态效果实现，并为进一步学习更复杂的JavaScript特效打下基础。不断实践，你将成为一个熟练的前端开发者，创造出更多引人入胜的网页效果。
JS基础——定时器的应用2
Fleehom的博客
11-06 1808
补充： 继上一篇定时器的功能之后，本篇将对上篇应用的功能加以扩充。具体增加的功能有： 新增一个向左移动的按钮，点击该按钮后，物体会向左移动 因向左和向右移动二者的功能大同小异，所以设计一个公共的移动函数方法move()，使其轻松实现向左和向右移动的功能 因向左和向右的方向取决于输入的speed的速度值的正负，正值向左，负值向右。但该方法不是很好，需要额外输入速度的正负号，因此需要设计一个方法，可以实现speed的输入值一直为正，但仍可以实现向左和向右移动 代码演示： <!DOCTYPE
JS基础——定时器的应用
Fleehom的博客
11-06 1767
要求： 点击按钮，让物体开始移动，利用定时器的方法让物体移动至终点时停止移动 思路： 首先，需要知道物体实时的位移量，这里需要定义一个getStyle函数来获取物体当前的样式 其次，开启一个定时器setInterval()，让物体开始移动 最后，需要设置关闭定时器clearInterval()的条件 代码演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title
Javascript入门阶段——定时器
YWX_KB的博客
11-07 428
1.课程大纲 变量的可变性 setInterval方法的基本用法 2.1 变量的可变性 声明变量age表示自己的年龄 var age = 23; 我长大了一岁如何表示 age = 24; alert(age); 代码运行结果如下 2.2 变量的赋值方向 在JavaScript中赋值的方向为：从右向左进行赋值 var age = 23; age = 24; #mermaid-svg-8kxsfQAaZMEl7hBY .label{font-family:'trebuchet ms'
JS基础知识点（8）——定时器
前端挖掘机
06-05 343
定时器一次性定时器：var dingshiqione = window.setTimeout("js代码","时间t")执行：是在t之后执行js代码【只会执行一次】时间：以毫秒为单位反复性定时器：var dingshiqiduo = window.setInterval("js代码","时间t")执行：是在t之后执行js代码【执行n多次】时间：以毫秒为单位清除定时器：1.清除一次性定时器：wind...
js基础知识整理之 —— Date和定时器
monkey7
07-27 203
js基础知识总结 new Date() 定时器setTimeOut和setInterval区别 定时器的返回值
JS基础知识 —— 异步和单线程
A_Tamir的博客
09-14 378
JS三座大山——原型和原型链，作用域和闭包加上这次要总结的 异步和单线程。 同步和异步 同步和异步有什么区别呢？ 同步会阻塞代码的执行，而异步不会阻塞。 // 同步 console.log(100); alert(200); console.log(300); // 只要alert的弹框还存在，代码就停留在这里，不会往下执行，也就是不会打印300 // 异步 cons...
JS基础知识——运动框架
weixin_45464787的博客
08-14 175
运动框架及应用 在开始运动时要关闭定时器 把运动和停止分割开(if/else) 缓冲运动 距离大速度大，距离小速度小 speed=(300-oDiv.offsetLeft)/10 像素只能精确到个位不能有小数点，会舍去小数点 Math类 Math.ceil 向上取整 Math.floor 向下取整 从左往右速度要向上取整 从右往左速度要向下取整 Math.round()四舍五入取整数 右下角悬浮框...
JavaScript学习 —— 基础知识
布衣大侠的博客
06-24 125
JavaScript 输出（显示数据） 使用window.alert()：弹出警告框 使用document.write()：将方法内容写到HTML文档中 使用innerHTML写入到HTML元素 使用console.log()：写入到浏览器的控制台 JavaScript 字符串 使用单引号或双引号来定义一个创建一个原始字符串 如：var name="Freecy;"，也可以通过new关键字将字...
2.7JS基础笔记——JS高级
m0_64838786的博客
04-21 725
JS高级笔记
番茄定时器
02-08
总的来说，"番茄定时器"的开发涉及了JavaScript的基础知识，如定时器、事件监听、DOM操作、条件判断和循环，以及如何通过这些技术来构建一个实用的Web应用程序。通过实践这样的项目，开发者不仅可以提升JavaScript...
JavaScript基础知识：我正在研究的新开源代码。 涵盖从变量和数据类型到对象和方法的所有内容
02-19
在JavaScript基础知识中，我们通常会学习以下几个核心概念： 1. **变量（Variables）**：在JavaScript中，我们可以使用`var`, `let`, 或 `const` 关键字声明变量。`var` 是老式的声明方式，`let` 和 `const` 是ES6...
Html——电脑病毒——特效.rar
02-08
总的来说，这个项目是前端开发的一个有趣实践，它结合了HTML、CSS3和JavaScript的知识，展示了如何利用这些技术创造出引人注目的视觉效果。对于学习前端的朋友来说，这是一个很好的实战案例，可以提升对前端技术的...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
最新发布
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
07-26
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
Zigbee之旅（四）：几个重要的CC2430基础实验——定时器中断
05-16
在 CC2430 的应用开发中，定时器中断是非常常用的一个功能。下面我们将介绍几个关于定时器中断的基础实验。 ## 实验一：定时器中断实验 ### 实验目的 了解 CC2430 的定时器模块，并掌握其中断的使用方法。 ### 实验原理 CC2430 的定时器模块有三个定时器：T1、T2 和 T3。其中，T1 和 T2 是 16 位的定时器，T3 是 8 位的定时器。在本实验中，我们将以 T1 定时器为例，介绍定时器中断的使用方法。 T1 定时器的计数器是一个 16 位的寄存器，它可以通过以下寄存器进行配置： - T1CC0H/T1CC0L：T1 的比较器 0，可以用来产生比较中断。 - T1CC1H/T1CC1L：T1 的比较器 1，可以用来产生比较中断。 - T1CC2H/T1CC2L：T1 的比较器 2，可以用来产生比较中断。 - T1IE：T1 中断使能寄存器，用来使能 T1 的中断。 - T1CTL：T1 控制寄存器，用来配置 T1 的计数模式、时钟源等参数。 在本实验中，我们将使用 T1 的比较器 0，配置为每隔 1 秒钟产生一次中断。 ### 实验步骤 1. 配置 T1 的计数模式、时钟源等参数。 ```c T1CTL |= 0x0C; // T1 计数模式为比较器模式 T1CTL &= ~0x03; // T1 时钟源为时钟源选择寄存器 CLKCON 的 CLKSPD 位所选择的时钟源 T1CTL &= ~0x30; // T1 比较器模式为单次比较模式 ``` 2. 配置 T1 的比较器 0。 ```c T1CC0L = 0x00; // T1 的比较器 0 的低 8 位 T1CC0H = 0x80; // T1 的比较器 0 的高 8 位 ``` 3. 使能 T1 的中断。 ```c T1IE = 1; // 使能 T1 的中断 ``` 4. 在主函数中进入循环，等待定时器中断的触发。 ```c while(1); ``` 5. 在定时器中断服务函数中处理中断事件。 ```c #pragma vector = T1_VECTOR __interrupt void T1_ISR(void) { T1IF = 0; // 清除 T1 中断标志 // 中断处理代码 } ``` ### 实验结果 当程序运行后，每隔 1 秒钟会触发一次定时器中断。在中断服务函数中可以添加相应的处理代码，实现定时器中断的功能。 ## 实验二：定时器中断实现 LED 闪烁 ### 实验目的 通过定时器中断实现 LED 的闪烁。 ### 实验原理 在上一个实验中，我们已经学习了如何使用定时器中断。在本实验中，我们将以 T1 定时器为例，通过定时器中断实现 LED 的闪烁。 在本实验中，我们将使用 P0.0 引脚控制 LED 的状态。LED 亮时，P0.0 输出低电平；LED 灭时，P0.0 输出高电平。我们可以通过改变 P0.0 引脚的电平状态，实现 LED 的闪烁。 ### 实验步骤 1. 配置 P0.0 引脚为输出模式。 ```c P0SEL &= ~0x01; // P0.0 引脚配置为 GPIO 模式 P0DIR |= 0x01; // P0.0 引脚配置为输出模式 ``` 2. 配置 T1 的计数模式、时钟源等参数。 ```c T1CTL |= 0x0C; // T1 计数模式为比较器模式 T1CTL &= ~0x03; // T1 时钟源为时钟源选择寄存器 CLKCON 的 CLKSPD 位所选择的时钟源 T1CTL &= ~0x30; // T1 比较器模式为单次比较模式 ``` 3. 配置 T1 的比较器 0。 ```c T1CC0L = 0x00; // T1 的比较器 0 的低 8 位 T1CC0H = 0x80; // T1 的比较器 0 的高 8 位 ``` 4. 使能 T1 的中断。 ```c T1IE = 1; // 使能 T1 的中断 ``` 5. 在定时器中断服务函数中处理中断事件，改变 P0.0 引脚的电平状态。 ```c #pragma vector = T1_VECTOR __interrupt void T1_ISR(void) { T1IF = 0; // 清除 T1 中断标志 P0_0 = ~P0_0; // P0.0 引脚电平状态取反 } ``` 6. 在主函数中进入循环，等待定时器中断的触发。 ```c while(1); ``` ### 实验结果 当程序运行后，LED 会以 1 秒钟的频率闪烁。如果需要改变 LED 闪烁的频率，可以通过修改 T1 的比较器 0 的值来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值