方便参考,整合了前面一下。学习就要一步一个脚印,不急不躁,循序渐进。
静态英雄联盟轮播图布局
英雄联盟轮播图逻辑
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
