JS實例
一、跑馬燈
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<div id=
"i1"
style=
"background-color: #74086e;color: #ccdcef;font-size: 55px;text-align: center"
>歡迎 X X X 蒞臨指導</div>
<script type=
"text/javascript"
>
setInterval(
function
(){
d1 = document.getElementById(
'i1'
);
//用DOM獲取標籤
d1_text = d1.innerText;
//獲取標籤內的文本
first_char = d1_text[0];
//字符串索引
sub_char = d1_text.slice(1,d1_text.length);
//字符串切片 d1_text.length獲取文本長度
new_str = sub_char + first_char;
//字符串拼接
d1.innerText = new_str;
},500)
</script>
</body>
</html>
|
二、模態對話框
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
top:0;
bottom: 0;
left:0;
right: 0;
background: rgba(0,0,0,.5);
z-index: 2;
}
.c2{
background-color: white;
position: fixed;
width: 400px;
height: 300px;
top:50%;
left: 50%;
z-index: 3;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td><input type=
"button"
value=
"點我"
onclick=
"Show();"
></td>
</tr>
</table>
</div>
<div id=
"shade"
class
=
"c1 hide"
></div>
<div id=
"modal"
class
=
"c2 hide"
>
<p>用戶：<input type=
"text"
/></p>
<p>密碼：<input type=
"password"
/></p>
<p>
<input type=
"button"
value=
"肯定"
>
<input type=
"button"
value=
"取消"
onclick=
"Hide();"
>
</p>
</div>
<script>
function
Show(){
document.getElementById(
'shade'
).classList.remove(
'hide'
);
document.getElementById(
'modal'
).classList.remove(
'hide'
);
}
function
Hide(){
document.getElementById(
'shade'
).classList.remove(
'hide'
);
document.getElementById(
'modal'
).classList.remove(
'hide'
);
}
</script>
</body>
</html>
|
三、 摺疊菜單
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
ul{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.menu{
width: 200px;
height: 500px;
background-color:
#2459a2;
border: 2px solid
#333;
}
.menu .title{
background-color: brown;
cursor: pointer;
}
.menu .content{
background-color: white;
}
</style>
</head>
<body>
<div
class
=
"menu"
>
<div
class
=
"item"
>
<div
class
=
"title"
onclick=
"Show(this);"
>菜單一</div>
<div
class
=
"content"
>
<ul>
<li>內容1</li>
<li>內容1</li>
<li>內容1</li>
</ul>
</div>
</div>
<div
class
=
"item"
>
<!--arg.下一個標籤nex-->
<div
class
=
"title"
onclick=
"Show(this);"
>菜單二</div>
<div
class
=
"content hide"
>
<ul>
<li>內容2</li>
<li>內容2</li>
<li>內容2</li>
</ul>
</div>
</div>
<div
class
=
"item"
>
<div
class
=
"title"
onclick=
"Show(this);"
>菜單三</div>
<div
class
=
"content hide"
>
<ul>
<li>內容3</li>
<li>內容3</li>
<li>內容3</li>
</ul>
</div>
</div>
<div
class
=
"item"
>
<div
class
=
"title"
onclick=
"Show(this);"
>菜單四</div>
<div
class
=
"content hide"
>
<ul>
<li>內容4</li>
<li>內容4</li>
<li>內容4</li>
</ul>
</div>
</div>
</div>
<script>
function
Func(arg,a2){
console.log(arg,a2);
}
function
Func1(arg){
console.log(arg);
}
function
Show(arg){
//arg當前菜單
//console.log(arg);
arg.nextElementSibling.classList.remove(
'hide'
);
var
father = arg.parentElement;
var
sons = father.parentElement.children;
for
(
var
i=0;i<sons.length;i++){
var
current_ele = sons[i];
if
(current_ele == father){
}
else
{
current_ele.children[1].classList.add(
'hide'
);
}
}
}
</script>
</body>
</html>
|
四、搜索框
輸入框內含文字，鼠標點擊後文字消失。javascript
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
.gg{
color: gray;
}
.bb{
color: black;
}
</style>
</head>
<body>
<!--<!–<input type=
"text"
placeholder=
"請輸入內容"
/>–>
/*下面代碼實現這個功能*/
-->
<input type=
"text"
class
=
"gg"
value=
"請輸入內容"
onfocus=
"Focus(this);"
onblur=
"Blur(this);"
/>
<script>
function
Focus(ths){
//查找
ths.className =
"bb"
;
var
current_val = ths.value;
if
(current_val ==
"請輸入內容"
){
ths.value =
""
;
}
}
function
Blur(ths){
var
current_val = ths.value;
if
(current_val==
'請輸入內容'
|| current_val.trim().length == 0){
ths.value =
'請輸入內容'
;
ths.className =
'gg'
;
}
}
</script>
</body>
</html>
|
五、 選擇欄
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<div>
<input type=
"button"
value=
"全選"
ondblclick=
"CheckAll();"
/>
<input type=
"button"
value=
"取消"
ondblclick=
"CancleAll();"
/>
<input type=
"button"
value=
"反選"
onclick=
"ReverseAll();"
/>
</div>
<table>
<thead>
<tr>
<th>序號</th>
<th>用戶號</th>
<th>年齡</th>
</tr>
</thead>
<tbody id=
"tb"
>
<tr>
<td><input
class
=
"c1"
type=
"checkbox"
/></td>
<td>alex</td>
<td>19</td>
</tr>
<tr>
<td><input
class
=
"c1"
type=
"checkbox"
/></td>
<td>alex</td>
<td>19</td>
</tr>
<tr>
<td><input
class
=
"c1"
type=
"checkbox"
/></td>
<td>alex</td>
<td>19</td>
</tr>
<tr>
<td><input
class
=
"c1"
type=
"checkbox"
/></td>
<td>alex</td>
<td>19</td>
</tr>
</tbody>
</table>
<script>
function
CheckAll(){
var
tb = document.getElementById(
'tb'
);
var
checks = tb.getElementsByClassName(
'c1'
);
for
(
var
i=0;i<checks.length;i++){
var
current_check = checks[i];
current_check.checked =
true
;
}
}
function
CancleAll(){
var
tb = document.getElementById(
'tb'
);
var
checks = tb.getElementsByClassName(
'c1'
);
for
(
var
i=0;i<checks.length;i++){
var
current_check = checks[i];
current_check.checked =
false
;
}
}
function
ReverseAll(){
var
tb = document.getElementById(
'tb'
);
var
checks = tb.getElementsByClassName(
'c1'
);
for
(
var
i=0;i<checks.length;i++){
var
current_check = checks[i];
if
(current_check.checked){
current_check.checked =
false
;
}
else
{
current_check.checked =
true
;
}
}
}
</script>
</body>
</html>
|
效果：html
&java
互斥
效果：web
六、點擊
點擊後更換內容app
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<input type=
"button"
onclick=
"Func();"
value=
"點我"
/>
<div id=
"i1"
>
<div
class
=
"c1"
>123</div>
<div
class
=
"c1"
>123</div>
<div
class
=
"c1"
alex=
"sb"
>123</div>
<div
class
=
"c1"
>123</div>
<div
class
=
"c1"
alex=
"sb"
>123</div>
<div
class
=
"c1"
>123</div>
<div
class
=
"c1"
alex=
"sb"
>123</div>
<div
class
=
"c1"
>123</div>
<div
class
=
"c1"
alex=
"sb"
>123</div>
<div
class
=
"c1"
>123</div>
</div>
<script>
function
Func(){
var
i1 = document.getElementById(
'i1'
);
var
divs = i1.children;
for
(
var
i=0;i<divs.length;i++){
var
current_div = divs[i];
var
result = current_div.getAttribute(
'alex'
);
if
(result ==
"sb"
){
current_div.innerText =
"456"
}
}
}
</script>
</body>
</html>
|
七、菜單
點擊一個菜單顯示菜單下的內容ide
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
background-color:
#2459a2;
color: white;
padding: 8px 10px;
}
.clearfix:after{
display: block;
content:
'.'
;
height: 0;
visibility: hidden;
clear: both;
}
.hide{
display: none;
}
.tab-menu .title{
background-color:
#dddddd;
}
.tab-menu .title .active{
background-color: white;
color: black;
}
.tab-menu .content{
border: 1px solid
#dddddd;
min-height: 150px;
}
</style>
</head>
<body>
<div style=
"width: 400px;margin: 0 auto"
>
<div
class
=
"tab-menu"
>
<div
class
=
"title clearfix"
>
<ul>
<li target=
"h1"
class
=
"active"
onclick=
"Show(this);"
>價格趨勢</li>
<li target=
"h3"
class
=
"active"
onclick=
"Show(this);"
>市場分佈</li>
<li target=
"h2"
class
=
"active"
onclick=
"Show(this);"
>其餘</li>
</ul>
</div>
<div id=
"content"
class
=
"content"
>
<div con=
"h1"
>content1</div>
<div con=
"h2"
class
=
"hide"
>content2</div>
<div con=
"h3"
class
=
"hide"
>content3</div>
</div>
</div>
</div>
<script>
function
Show(ths) {
//ths 表示當前標籤
var
target = ths.getAttribute(
'target'
);
//給本身添加樣式active
//兄弟樣式去掉
ths.className =
'active'
;
var
brothers = ths.parentElement.children;
for
(
var
i=0;i<brothers.length;i++){
if
(ths == brothers[i]){
}
else
{
brothers[i].removeAttribute(
'class'
);
}
}
//操做內容
var
contents = document.getElementById(
'content'
).children;
for
(
var
j=0;j<contents.length;j++){
var
current_content = contents[j];
var
con = current_content.getAttribute(
'con'
);
if
(con == target){
current_content.classList.remove(
'hide'
);
}
else
{
current_content.className =
"hide"
;
}
}
}
</script>
</body>
</html>
|
效果顯示：post
八、多選、單選
點擊多個選擇欄this
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<!--<input id=
"i1"
type=
"text"
value=
"123"
/>-->
<!--<input id=
"i2"
type=
"password"
value=
"111"
/>-->
<!--<textarea id=
"i3"
>666</textarea>-->
<h1>愛好</h1>
<div id=
"i1"
>
<ul>
<li> <input type=
"checkbox"
value=
"1"
/> 籃球 </li>
<li> <input type=
"checkbox"
value=
"2"
/> 足球 </li>
<li> <input type=
"checkbox"
value=
"3"
/> 去球 </li>
</ul>
</div>
<div id=
"i2"
>
<ul>
<li> <input type=
"checkbox"
value=
"11"
/> 籃球 </li>
<li> <input type=
"checkbox"
value=
"22"
/> 足球 </li>
<li> <input type=
"checkbox"
value=
"33"
/> 去球 </li>
</ul>
</div>
<select id=
"ii"
>
<option value=
"11"
>上海</option>
<option value=
"22"
>北京</option>
</select>
<script>
</script>
</body>
</html>
|
效果：spa
九、輸入框
輸入框內輸入內容能夠寫入文本中code
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<div>
<div>
<input type=
"text"
/>
<input type=
"button"
value=
"添加"
onclick=
"AddElement(this);"
/>
</div>
<div style=
"position: relative;"
>
<ul id=
"commentList"
>
<li>alex</li>
<li>eric</li>
</ul>
</div>
</div>
<script>
function
AddElement(ths) {
// 獲取輸入的值
var
val = ths.previousElementSibling.value;
ths.previousElementSibling.value =
""
;
var
commentList = document.getElementById(
'commentList'
);
//第一種形式，字符串方式
//var str = "<li>" + val + "</li>";
// 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// beforeEnd內部最後
// beforeBegin 外部上邊
//afterBegin 內部貼身
//afterEnd 外部貼牆
//commentList.insertAdjacentHTML("beforeEnd",str);
//第二種方式，元素的方式
var
tag = document.createElement(
'li'
);
tag.innerText = val;
var
temp = document.createElement(
'a'
);
temp.innerText =
'百度'
;
temp.href =
"http://etiantian.org"
;
tag.appendChild(temp);
// commentList.appendChild(tag);
commentList.insertBefore(tag,commentList.children[1]);
}
</script>
</body>
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title></title>
</head>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
h1{
padding: 0;
margin: 0;
}
.clearfix:after {
content:
"."
;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color:
#303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color:
#ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color:
#fff;
background-color:
#425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color:
#fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color:
#fff;
background-color:
#425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color:
#fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
border: 1px solid red;
}
</style>
<body onscroll=
"ScrollEvent();"
>
<div
class
=
"pg-header"
>
<div
class
=
"wrap clearfix"
>
<div
class
=
"logo"
>
<a href=
"#"
>
<img src=
"http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"
>
</a>
</div>
<div
class
=
"nav"
>
<ul>
<li>
<a href=
"#"
>首頁</a>
</li>
<li>
<a href=
"#"
>功能一</a>
</li>
<li>
<a href=
"#"
>功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div
class
=
"pg-body"
>
<div
class
=
"wrap"
>
<div
class
=
"catalog"
id=
"catalog"
>
<div
class
=
"catalog-item"
auto-to=
"function1"
><a>第1張</a></div>
<div
class
=
"catalog-item"
auto-to=
"function2"
><a>第2張</a></div>
<div
class
=
"catalog-item"
auto-to=
"function3"
><a>第3張</a></div>
</div>
<div
class
=
"content"
id=
"content"
>
<div menu=
"function1"
class
=
"section"
>
<h1>第一章</h1>
</div>
<div menu=
"function2"
class
=
"section"
>
<h1>第二章</h1>
</div>
<div menu=
"function3"
class
=
"section"
style=
"height:100px;"
>
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script>
function
ScrollEvent(){
var
bodyScrollTop = document.body.scrollTop;
if
(bodyScrollTop>50){
document.getElementsByClassName(
'catalog'
)[0].classList.add(
'fixed'
);
}
else
{
document.getElementsByClassName(
'catalog'
)[0].classList.remove(
'fixed'
);
}
var
content = document.getElementById(
'content'
);
var
sections = content.children;
for
(
var
i=0;i<sections.length;i++){
var
current_section = sections[i];
// 當前標籤距離頂部絕對高度
var
scOffTop = current_section.offsetTop + 60;
// 當前標籤距離頂部，相對高度
var
offTop = scOffTop - bodyScrollTop;
// 當前標籤高度
var
height = current_section.scrollHeight;
if
(offTop<0 && -offTop < height){
// 當前標籤添加active
// 其餘移除 active
// 若是已經到底部，現實第三個菜單
// 文檔高度 ＝ 滾動高度 + 視口高度
var
a = document.getElementsByClassName(
'content'
)[0].offsetHeight + 60;
var
b = bodyScrollTop + document.documentElement.clientHeight;
console.log(a+60,b);
if
(a == b){
var
menus = document.getElementById(
'catalog'
).children;
var
current_menu = document.getElementById(
'catalog'
).lastElementChild;
current_menu.classList.add(
'active'
);
for
(
var
j=0;j<menus.length;j++){
if
(menus[j] == current_menu){
}
else
{
menus[j].classList.remove(
'active'
);
}
}
}
else
{
var
menus = document.getElementById(
'catalog'
).children;
var
current_menu = menus[i];
current_menu.classList.add(
'active'
);
for
(
var
j=0;j<menus.length;j++){
if
(menus[j] == current_menu){
}
else
{
menus[j].classList.remove(
'active'
);
}
}
}
break
;
}
}
}
</script>
</body>
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
body{
margin: 0;
background-color:
#dddddd;
}
.w{
margin: 0 auto;
width: 980px;
}
.pg-header{
background-color: black;
color: white;
height: 48px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
.pg-body .menu .active{
background-color:
#425a66;
color: white;
}
.pg-body .fixed{
position: fixed;
top: 10px;
}
.pg-body .content{
position: absolute;
left: 385px;
right: 200px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
}
</style>
</head>
<body onscroll=
"Hua();"
>
<div
class
=
"pg-header"
>
<div
class
=
"w"
>
</div>
</div>
<div
class
=
"pg-body"
>
<div id=
"menu"
class
=
"menu"
>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div>
<div id=
"content"
class
=
"content"
>
<div
class
=
"item"
>牀前明月管</div>
<div
class
=
"item"
>疑是地上霜</div>
<div
class
=
"item"
style=
"height: 100px;"
>我是郭德綱</div>
</div>
</div>
<script>
function
Hua() {
var
huaGao = document.body.scrollTop;
var
caiDan = document.getElementById(
'menu'
);
if
(huaGao>48){
caiDan.classList.add(
'fixed'
);
}
else
{
caiDan.classList.remove(
'fixed'
);
}
var
items = document.getElementById(
'content'
).children;
for
(
var
i=0;i<items.length;i++){
var
currentItem = items[i];
var
currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
var
currentItemWindowTop = currentItemBodyTop - huaGao;
console.log(currentItemWindowTop);
var
currentHeight = currentItem.offsetHeight;
var
bottomHeight = currentItemBodyTop+currentHeight;
if
(currentItemWindowTop<0 && huaGao < bottomHeight){
var
ziJi = caiDan.getElementsByTagName(
'li'
)[i];
ziJi.className =
'active'
;
var
lis = caiDan.getElementsByTagName(
'li'
);
for
(
var
j = 0;j<lis.length;j++){
if
(ziJi == lis[j]){
}
else
{
lis[j].classList.remove(
'active'
);
}
}
break
;
}
}
}
</script>
</body>
</html>
|
效果：
￥