forked from HaoZhang95/Python24
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbasic02.html
More file actions
116 lines (90 loc) · 4.15 KB
/
Copy pathbasic02.html
File metadata and controls
116 lines (90 loc) · 4.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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需要使用style
num += 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>