WebPAI案例(一)
放大与缩小案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <button id='jkl'>放大</button>
<button id='kjl'>缩小</button>
<br>
<img src="gl.jpg" alt="" width="100">
<script>
var img = document.querySelector('img');
var kids = img.width;
var jkl = document.querySelector('#jkl');
var kjl = document.querySekector('#kjl');
jkl.onclick = function(){
kids += 20；
img.width = kids；
}
kjl.onclick = function（）｛
kids -= 20；
img.width = kids；
｝
</script>
|
特殊属性的运用案例
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
| 加与减
<style>
div {
width: 80px;
}
input[type="text"] {
width: 50px;
height: 44px;
outline: none;
border:1px solid #ccc;
text-align: center;
}
input[type="button"] {
height: 24px;
width: 22px;
}
input {
float: left;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly>
<input type="button" value="+" id="add">
<input type="button" value="-" id="reduce" >
<script>
var total = document.querySelector('#total')
var add = document.querySelector('#add')
var reduce = document.querySelector('#reduce')
add.onclick = function(){
var v1 = total.value;
v1++;
total.value = v1;
reduce.disabled = false;
}
reduce.onclick = function(){
var v1 = total.value;
v1--;
if( v1 <= 0) {
v1 = 1;
reduce.disabled = true;
}
total.value = v1;
}
</script>
</div>
|
开关灯案例（开关思想）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| 注：如何获取body元素（标签）？|document.body|
<input type="button" value="关灯" id="kids">
<script>
var kids = document.quertSelector('#kids');
var kid = true;
kids.onlick = function () {
if(kid == true){
kids.value = '开灯'；
kid = true；
var body = document.body;
body.style.backgroundColor = 'black';
}else{
kids.value = '关灯'；
kid = false；
var body = document.body;
body.style.backgroundColor = 'while';
}
}
</script>
|
批量删除案例
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
| <input type="button" id="btn1" disabled value="批量删除">
<table border="1" cellspacing="0" id="table1" width="200">
<thead>
<tr>
<th align="left">
<input type="checkbox" id="selectAllBtn">全选
</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>标题啦啦啦1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>标题啦啦啦2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>标题啦啦啦3</td>
</tr>
</tbody>
<script>
var kids = document.querySelector('#btn1');
var kid = document.querySelector('#selectAllBtn');
var lii = document.querySelectorAll('#table1 tbody input');
kid.onclick = function () {
var mnu = kid.checked;
for (var i = 0; i < lii.lenkgth; i++) {
lii[i].checked = mnu;
}
btn1.disabled = !mnu;
}
</script>
|
innerHtml和 innerText复制的区别【经典案例】
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
| <button id="btn1">复制html</button>
<button id="btn2">复制text</button>
<div id="box1">
<ul >
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
<div id="box2"></div>
<script>
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
btn1.onclick = function(){
var str = box1.innerHTML;
console.log(str);
box2.innerHTML = str;
}
btn2.onclick = function(){
var str = box1.innerText;
console.log(str);
box2.innerText = str;
}
</script>
|
对比innerHTML和createElement()创建元素的效率:
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
| <button id="btn1">使用innerHTML</button>
<button id="btn2">使用createElement</button>
<ul id="list"></ul>
<script>
var btn1 = document.querySelector('#btn1')
var btn2 = document.querySelector('#btn2')
var list = document.querySelector('#list')
btn1.onclick = function(){
list.innerHTML = '';
var str = '';
var start = new Date();
for(var i = 0; i < 1000; i++) {
str += "<li>" + Math.random() + "</li>";
list.innerHTML = str;
}
var end = new Date();
console.log('耗时：' + (end - start));
}
btn2.onclick = function(){
list.innerHTML = '';
var start = new Date();
for(var i = 0; i < 1000; i++) {
var li = document.createElement('li');
li.innerText = Math.random();
list.appendChild( li );
}
var end = new Date();
console.log('耗时：' + (end - start));
}
</script>
|
打折案例
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
| <button id="btn1">打8折！</button>
<ul id="list1">
<li oldPrice="222"><span>产品1</span><span></span><span></span></li>
<li oldPrice="414"><span>产品2</span><span></span><span></span></li>
<li oldPrice="244"><span>产品3</span><span></span><span></span></li>
<li oldPrice="513"><span>产品4</span><span></span><span></span></li>
<li oldPrice="144"><span>产品5</span><span></span><span></span></li>
</ul>
<script>
var btn1 = document.querySelector('#btn1');
var ul= document.querySelector('#list1');
var lii = ul.children;
for(var i = 0;i < lii.length;i++){
var oldPrice = list[i].getAttribute('oldPrice');
var span2 = list[i].children[1];
span2.innerHTML = "，原价 <del>¥" + oldPrice + "</del>";
}
btn1.onclick = function(){
for(var i = 0; i < list.length; i++){
var oldPrice = list[i].getAttribute('oldPrice');
var span3 = list[i].children[2];
span3.innerHTML = "，折后价 <del>¥" + (oldPrice*0.8).toFixed(2) + "</del>";
}
}
}
</script>
|