JavaScript事件添加定时器

JavaScript事件添加定时器舍友喝一杯茶的时间 我偷偷学会了 js 事件添加定时器

方便参考,整合了前面一下。学习就要一步一个脚印,不急不躁,循序渐进。

静态英雄联盟轮播图布局

英雄联盟轮播图逻辑

JavaScript背景变色小案列

上次写的那一篇英雄联盟轮播图逻辑,总工程量还是有一点大
并且好多都是重复代码,有人反馈小陈陈还有没有一种更简单,
更高效的,更省时省力的方法呢?事实证明有的(?)今天通过这篇事件添加定时器,聊聊具体简化思路




</head> <body> <button id="bt1">终止输出hello world</button> <button id="bt2">重启t1</button> 

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

定时器:每隔一段时间,自动执行某些功能

需求:每间隔3s,在控制台输出一行hello world 
 var t1= setInterval(function(){ 
    console.log("hello world") },3000) // 时间:时间通用的单位:毫秒1s=3000ms 

在这里插入图片描述

方便对比效果,我们再写一个:明天你好 

需求:每间隔3s,在控制台输出一行明天你好

 var t2= setInterval(function(){ 
    console.log("明天你好") },3000) 

在这里插入图片描述

细心的大朋友们可能发现了一个小问题helloworld和明天你好的程序从一开始一直在重复循环输出没有结束过一次,当然我们也可以换种说法说:当我们使用某东某宝购物平台 的时候,我们会发现最上面的虚拟实物展示轮播图(假如你此时看中了一款香水,想要详细了解一下的时候,原来的香水图片自动轮播过去换成了下一张烧鸡的图片???)心中一万个草泥马路过?

在这里插入图片描述

综上所述,我们是否可以通过一种方法不让当前的香水页面自动轮播过去换成下一个页面(停止helloworld/明天你好)

 <button id="bt1">终止输出hello world</button> 
 var bt1=document.getElementById("bt1") bt1.onclick=function(){ 
    clearInterval(t1) } 

在这里插入图片描述

看了一眼钱包(3块9),再对比一下香水的价格39999,想了想还是算了吧,忽然想到那个烧鸡页面(嘿嘿嘿),想买之前的烧鸡 (当前停留在香水页面,如何让轮播显示过去的烧鸡页面),我们怎么该怎么办呢?

 <button id="bt2">重启t1</button> 
var bt2=document.getElementById("bt2") bt2.onclick=function(){ 
    t1=setInterval(function(){ 
    console.log("hello world") },3000) //时间:时间通用的单位:毫秒1s=3000ms } 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/214058.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午5:05
下一篇 2026年3月18日 下午5:05


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号