-
Notifications
You must be signed in to change notification settings - Fork 50
/
demo2.html
100 lines (95 loc) · 2.46 KB
/
demo2.html
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
<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
<meta charset="utf-8">
<style type="text/css">
.demo1 {
display: inline-block;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
}
.demo2 p {
padding: 20px;
position: fixed;
background-color: rgba(0,0,0,0.5);
color: white;
right: 0px;
top: 60px;
}
.demo3 {
border: 1px solid #ccc;
height: 50px;
}
.box {
height: 2000px;
}
</style>
</head>
<body>
<fieldset>
<legend>当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色</legend>
<div class="demo1">点我会变色</div>
</fieldset>
<fieldset>
<legend>当窗口滚动时,获取垂直滚动距离</legend>
<div class="demo2">
<p>窗口垂直滚动距离是:0</p>
</div>
</fieldset>
<fieldset>
<legend>当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色</legend>
<div class="demo3"></div>
</fieldset>
<fieldset>
<legend>当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字</legend>
<input class="demo4" type="text">
</fieldset>
<fieldset>
<legend>当选择 select 后,获取用户选择的内容</legend>
<select class="demo5">
<option></option>
<option>特斯拉</option>
<option>沃尔沃</option>
<option>雷克萨斯</option>
</select>
<p>用户选取的内容是:</p>
</fieldset>
<div class="box"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js
"></script>
<script type="text/javascript">
// demo1
$(".demo1").on("click", function(){
var $this = $(this);
$this.css("background-color", "red");
setTimeout(function(){
$this.css("background-color", "blue");
}, 1000);
})
// demo2
$(window).on("scroll", function(){
var scrollLength = $(window).scrollTop();
$(".demo2 p").text("窗口垂直滚动距离是:" + scrollLength);
})
// demo3
$(".demo3").on("mouseenter", function(){
$(this).css("background-color", "red");
})
$(".demo3").on("mouseleave", function(){
$(this).css("background-color", "white");
})
// demo4
$(".demo4").on("keyup", function(){
var content = $(this).val().toUpperCase();
console.log(content);
$(this).val(content);
})
// demo5
$(".demo5").on("change", function(){
$(this).parent("fieldset").find("p").text("用户选取的内容是:" + $("option:selected").text());
})
</script>
</body>
</html>