0


JavaScript事件添加定时器

一日不见,如隔三秋
我还是你们熟悉的——爱笑的陈sir
🐧🐧🐧python交流群:716583247,氛围非常好,期待大家的加入🙂
世界上有两种东西,是无法挽回的,一种是过去的时间,另一种就是说过的话。
丰富自己比取悦他人更有力量:种下梧桐树,引得凤凰来。你若盛开,蝴蝶自来,你若精彩,天自安排!

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

静态英雄联盟轮播图布局

英雄联盟轮播图逻辑

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/明天你好)

我们可以声明一个变量,命名为bt1终止输出hello world
清除 输出hello world定时器

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

在这里插入图片描述

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

我们可以再声明一个变量,命名为bt2重启hello world
让hello world重新启动

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

本文转载自: https://blog.csdn.net/qq_62259825/article/details/125286247
版权归原作者 爱笑的陈sir 所有, 如有侵权,请联系我们删除。

“JavaScript事件添加定时器”的评论:

还没有评论