发布于 

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;
// 加上去之后,值至少已经是2 了,所以,“-”按钮要重新设置为可用状态:
reduce.disabled = false;
}
reduce.onclick = function(){
// 获取到输入框中现有的值
var v1 = total.value;
v1--;
if( v1 <= 0) {
v1 = 1;
// 此时,还需要去禁用“-”这个按钮
// reduce.disable = "disabled";// 发现这种写法无效!!!
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(){
// 先将ul中的所有内容(元素)清掉
list.innerHTML = '';
var str = ''; // 这个变量用于存储 html 代码
var start = new Date(); // 开始时间
// 意图放入1000个li标签到ul中
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(){
// 先将ul中的所有内容(元素)清掉
list.innerHTML = '';
var start = new Date(); // 开始时间
// 意图放入1000个li标签到ul中
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; //获取ul里面的li
//1.初始显示原价
for(var i = 0;i < lii.length;i++){
var oldPrice = list[i].getAttribute('oldPrice');
// 当前 li 中的第2个span
var span2 = list[i].children[1];
span2.innerHTML = ",原价 <del>¥" + oldPrice + "</del>";
}
btn1.onclick = function(){
for(var i = 0; i < list.length; i++){
// 先取出当前li的oldPrice这个自定义属性的值(原价)
var oldPrice = list[i].getAttribute('oldPrice');
// 当前 li 中的第3个span
var span3 = list[i].children[2];
span3.innerHTML = ",折后价 <del>¥" + (oldPrice*0.8).toFixed(2) + "</del>";
}
}
}
</script>

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.