<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>window.onload = function () {function func1() {// 定时器(轮播图),定时器时间到了就执行一次命令// setTimeout(执行的命令, 延迟时间) 执行一次// setInterval(执行的命令, 延迟时间) 循环执行,但是需要设置停止条件// clearInterval(定时器名) 来停止死循环var btn1 = document.getElementById("btn1")var btn2 = document.getElementById("btn2")var btn3 = document.getElementById("btn3")var oTimer = null;btn1.onclick = function () {setTimeout(() => {console.log("3s的时间到了.");}, 3000);}btn2.onclick = function () {oTimer = setInterval(() => {console.log("......");}, 1000);}btn3.onclick = function () {clearInterval(oTimer)oTimer = null;}}function func2() {var box = document.getElementById("box")var btn = document.getElementById("btn4")var num = 0;var speed = 5;var oTimer = setInterval(() => {// box.left += 10; 不能直接这样,修改css的left需要使用stylenum += speed;// 当num=800的时候,进行反向运动if (num >= 800) {speed = -5}if (num <= 0) {speed = 5;}box.style.left = num + "px";}, 50);btn.onclick = function () {clearInterval(oTimer)oTimer = null}}function func3() {// 1- 轮播图的原理父类有一个div显示区域,里面有ul,ul里面的动态生成li,进行innerHTML的li标签拼接// 2- 不断的改变某个标签(控制所有的产品,选中父类的ul)的left取值,多次定时// 3- 当ul在父类div滚动的时候,超过位置就自动隐藏了// 4- 无缝拼接的话,原理是显示区域可以显示5个产品,复制一份的目的是,总共10个li标签,保证移动时候,显示区域是由替补的产品替换// 5- 一直左侧移动的话会漏孔,防止的话,当第十个li到达显示区域的最右边的话,那么直接left回到0,显示第一个li标签// 6- 判断的条件就是就是ul的left是否到达10个li的中间,也就是显示区域刚好开始显示第6个li, if num = 负的显示区域宽度// 7- 点击向右的箭头时,ul会向左移动,防止右侧镂空,则ul的left = 负的显示区域宽度时候,将left = 0// 点击向左的箭头时,ul会向右移动,防止左侧镂空,则ul的left = 0,将left = 负的显示区域宽度}func2()}</script><style>div{width: 200px;height: 200px;background: pink;/* <!-- 通过修改margin/position来使其移动, margin不合适 --> */position: fixed;left: 0;top: 50;}</style></head><body><button id="btn1">单次定时</button><button id="btn2">多次循环定时</button><button id="btn3">停止循环定时</button><button id="btn4">停止div运动</button><!-- 通过修改margin/position来使其移动, margin不合适 --><div id="box"></div></body></html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。