实践
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 400px;
margin: 0 auto;
}
.container li {
margin: 20px 0;
}
.container button {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>
<button id="btnClear">清空</button>
</p>
<ul class="list">
<li>项目1<button>删除</button></li>
<li>项目2<button>删除</button></li>
<li>项目3<button>删除</button></li>
<li>项目4<button>删除</button></li>
<li>项目5<button>删除</button></li>
<li>项目6<button>删除</button></li>
<li>项目7<button>删除</button></li>
<li>项目8<button>删除</button></li>
<li>项目9<button>删除</button></li>
<li>项目10<button>删除</button></li>
</ul>
</div>
<script>
var btnClear = document.getElementById("btnClear");
var ul = document.querySelector(".list");
btnClear.onclick = function() {
ul.innerHTML = "";
}
//得到ul下的所有按钮
var btns = ul.querySelectorAll("button");
Array.from(btns).forEach(function(b) {
b.onclick = function() {
b.parentNode.remove();
}
})
// for (var i = 0; i < btns.length; i++) {
// var b = btns[i]; //得到当前按钮
// // (function(b) {
// // b.onclick = function() {
// // b.parentNode.remove();
// // }
// // }(b));
// b.onclick = function() {
// this.parentNode.remove();
// }
// }
</script>
</body>
</html>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 400px;
margin: 0 auto;
}
p {
text-align: center;
}
p.error{
color: red;
}
</style>
</head>
<body>
<div class="container">
<p>不能添加空的文本</p>
<div class="input">
<input type="text">
<button id="btnAdd">添加</button>
</div>
<ul class="list">
<li>项目1</li>
<li>项目2</li>
</ul>
</div>
<script>
var btnAdd = document.getElementById("btnAdd");
var ul = document.querySelector(".list");
var inp = document.querySelector("input");
var p = document.querySelector("p");
btnAdd.onclick = function() {
if(!inp.value.trim()){
p.className = "error";
return;
}
p.className = "";
var li = document.createElement("li");
li.innerText = inp.value;
inp.value = "";
ul.appendChild(li);
}
</script>
</body>
</html>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.banner {
width: 500px;
margin: 0 auto;
text-align: center;
}
.banner img {
width: 100%;
height: 300px;
object-fit: contain;
border: 1px solid;
display: block;
}
</style>
</head>
<body>
<div class="banner">
<img id="img" src="img/1.jpg" alt="">
<p>
<button id="btnPrev">上一张</button>
<button id="btnNext">下一张</button>
</p>
</div>
<script>
var i = 1;
var img = document.getElementById("img"),
btnPrev = document.getElementById("btnPrev"),
btnNext = document.getElementById("btnNext");
btnPrev.onclick = function() {
i--;
if (i === 0) {
i = 5;
}
img.src = `img/${i}.jpg`;
}
btnNext.onclick = function() {
i++;
if (i === 6) {
i = 1;
}
img.src = `img/${i}.jpg`;
}
</script>
</body>
</html>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
min-width: 50px;
display: inline-block;
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>
库存的最小值为0
</p>
<div>
库存：
<button data-plus="-1000">-1000</button>
<button data-plus="-100">-100</button>
<button data-plus="-10">-10</button>
<button data-plus="-1">-</button>
<span id="spanNumber">10</span>
<button data-plus="1">+</button>
<button data-plus="10">+10</button>
<button data-plus="100">+100</button>
<button data-plus="1000">+1000</button>
</div>
<script>
var btns = document.querySelectorAll("button");
var span = document.getElementById("spanNumber");
for (var i = 0; i < btns.length; i++) {
var b = btns[i];
b.onclick = function() {
var num = parseInt(span.innerText);
//加某个数
var plus = parseInt(this.dataset.plus);
var result = num + plus;
if (result < 0) {
result = 0;
}
span.innerHTML = result;
}
}
</script>
</body>
</html>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
overflow: hidden;
width: 550px;
margin: 0 auto;
}
.container .left {
float: left;
margin: 0 30px;
}
.container select {
width: 100%;
height: 200px;
}
.container .mid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>成哥的现任女友</h2>
<select id="sel1" multiple>
<option value="1">幂幂</option>
<option value="2">花花</option>
<option value="3">春春</option>
<option value="4">盈盈</option>
<option value="5">红红</option>
</select>
</div>
<div class="left mid">
<p>
<button id="btnToRight" title="右移动选中的">>></button>
</p>
<p>
<button id="btnToRightAll" title="右移动全部">>>|</button>
</p>
<p>
<button id="btnToLeft" title="左移动选中的"><<</button>
</p>
<p>
<button id="btnToLeftAll" title="左移动全部">|<<</button>
</p>
</div>
<div class="left">
<h2>成哥的前女友</h2>
<select id="sel2" multiple>
<option value="6">坤坤</option>
</select>
</div>
</div>
<script>
var btnLeft = document.getElementById("btnToLeft"),
btnRight = document.getElementById("btnToRight"),
btnLeftAll = document.getElementById("btnToLeftAll"),
btnRightAll = document.getElementById("btnToRightAll"),
selLeft = document.getElementById("sel1"),
selRight = document.getElementById("sel2");
//得到某个select元素内部被选中的option数组
function getSelectedOptions(sel) {
return Array.from(sel.children).filter(function(item) {
return item.selected;
});
// var opts = [];
// for (var i = 0; i < sel.children.length; i++) {
// if (sel.children[i].selected) {
// opts.push(sel.children[i]);
// }
// }
// return opts;
}
//将option数组中的东西添加到制定的select中
//opts: 要添加的option数组
//sel：要添加到的select元素
function appendToSelect(opts, sel) {
opts = Array.from(opts);
var frag = document.createDocumentFragment();
for (var i = 0; i < opts.length; i++) {
opts[i].selected = false;
frag.appendChild(opts[i]);
}
sel.appendChild(frag);
}
btnLeft.onclick = function() {
//获取右边选中的
var opts = getSelectedOptions(selRight);
//循环将该数组添加到左边的select中
appendToSelect(opts, selLeft);
}
btnRight.onclick = function() {
//获取右边选中的
var opts = getSelectedOptions(selLeft);
//循环将该数组添加到左边的select中
appendToSelect(opts, selRight);
}
btnLeftAll.onclick = function() {
appendToSelect(selRight.children, selLeft);
}
btnRightAll.onclick = function() {
appendToSelect(selLeft.children, selRight);
}
</script>
</body>
</html>