02
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 150px;
height: 200px;
background-color: #7bff68;
}
</style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
<option value="0">1香蕉</option>
<option value="1">2苹果</option>
<option value="2">3大鸭梨</option>
<option value="3">4草莓</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select size="10" name="bbb" id="sel2" multiple="multiple">
</select>
<script>
//需求：点击按钮把对应的选中项移动到另一侧。
//技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
//如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//步骤：
//1.获取事件源和相关元素
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
inpArr[0].onclick = function () {
var optArr = sel1.children;
for(var i=0;i<optArr.length;){
sel2.appendChild(optArr[i]);
}
}
//为第二个按钮绑定事件
inpArr[1].onclick = function () {
var optArr = sel2.children;
for(var i=0;i<optArr.length;){
sel1.appendChild(optArr[i]);
}
}
inpArr[2].onclick = function () {
var optArr = sel1.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
console.log(optArr[i]);
optArr[i].selected=false;
sel2.appendChild(optArr[i]);
}
}
//获取sel2中的子元素变成真数组，然后排序
var aaa = Array.from(sel2.children).sort(function (a,b) {
return a.value-b.value;
});
//删除素有子元素
for(var i=0;i<sel2.children.length;i++){
sel2.removeChild(sel2.children[i]);
}
//把排好序的数组添加到sel2中
for(var i=0;i<aaa.length;i++){
sel2.appendChild(aaa[i]);
}
}
inpArr[3].onclick = function () {
var optArr = sel2.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel1.appendChild(optArr[i]);
}
}
var aaa = Array.from(sel1.children).sort(function (a,b) {
return a.value-b.value;
});
for(var i=0;i<sel1.children.length;i++){
sel1.removeChild(sel1.children[i]);
}
for(var i=0;i<aaa.length;i++){
sel1.appendChild(aaa[i]);
}
}
</script>
</body>
</html>
Array.from
这个把可迭代返回为数组.
//返回值，清除定时器。
var num = 1;
//setInterval他的返回值就是定时器的名字
var timer = setInterval(function () {
console.log(num);
num++
if(num===10){
//如何停止定时器呢？？？
clearInterval(timer);
}
},500);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//第一种事件绑定的方法容易被层叠。
// btn.onclick = function () {
// console.log("九尺龙泉万卷书，上天生我意何如。");
// }
//
// btn.onclick = function () {
// console.log("不能报国平天下，枉为男儿大丈夫。");
// }
//addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
//调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数) 参数3事件名(捕获或者冒泡)
</script>
</body>
</html>
事件的概述.
用addEventListener这样不会被覆盖,能添加多个.
比较 onclick
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>111</div>
<script>
var div = document.getElementsByTagName("div")[0];
console.log(div)
console.log(typeof div)
// div.onclick = fn;
// function fn() {
// alert(1);
// }
//第二种属性绑定
div["onclick"] = function () {
alert(2);
}
// console.log(div.onclick);
// console.log(div.onmouseover);
// div.removeEventListener("click",fn);
</script>
</body>
</html>
- 比较div.onclick div["onclick"] 就是对象的两种语法.
