✽js的快速入门6 项目
1. 待办
上方为输入事情添加
下左为未办，右边为已办
待办
新事情：
div{
width: 45%;
margin-left: 2%;
float: left;
border-top: 1px solid green;
}
#tab,#tab2{
border-collapse: collapse;
width: 100%;
/* margin: 0 auto; */
}
tr{
border-top: 1px solid green;
border-bottom: 1px solid green;
}
td{
background-color: rgb(186, 255, 255);
}
.td1{
width: 5px;
}
.td2{
width: 510px;
/* background-color: red; */
}先顺思路
1. 获取input的内容，按行添加进table中，每行前均加一个多选框
2. 多选框的值为真，将此行挪至右边
3. 取消右边多选框的勾，将其返回至左边
4. 增加一个删除链接
addevent函数写出一个tr行，【设置了3列，多选框，内容，单删除】，将此行头插进table，并删除input框中的内容(调动delinp函数)
第一列中附有moveture函数，当此框被选中时，将其挪至右边的table中；
第三列附有delthi函数，当被选中时进行单删
movetrue函数，利用this传进去的是多选框，所以要想上查找到父节点tr，在左边进行删除，在右边进行追加
delthis函数，同样利用this，找到父节点tr，获取tr的行号进行删除
function delinp(){ // 输出输入框中输入的内容
document.getElementById('event').value='';
}
function addevent(){
var tr=''+
''+
''+
' '+
''+
document.getElementById('event').value
+' '+
''+
''+
' '+
' '
console.log(tr);
var tab=document.getElementById('tab');
trs=tab.insertRow(0);
trs.innerHTML=tr;
delinp();
}
function movetrue(inp){
var tab=document.getElementById('tab'); //获取父节点，删除子节点
var tab2=document.getElementById('tab2');
// console.log(inp.checked);
var tr=inp.parentNode.parentNode; //获取该节点的父节点tr
if(inp.checked){
// 删除上面挪至下方
tab.deleteRow(tr.rowIndex);
tab2.appendChild(tr);
console.log(tr.rowIndex);
}else{
// 将下方的挪至上方
tab2.deleteRow(tr.rowIndex);
tab.appendChild(tr);
}
}
function delthis(a){
var tr=a.parentNode.parentNode;
var tab=tr.parentNode;
tab.deleteRow(tr.rowIndex);
}
2. 大小轮播图
实现状态：
当鼠标经过或悬停在某个小图上时，大图随之进行变化【图片如果大小合适，就不用向我一样写img的css】
#imgb{
width: 200px;
height: 200px;
}
.imgs{
border: 2px solid white;
padding: 2px;
width: 50px;
height: 50px;
}
#showdiv{
/* border: 1px solid; */
width: 210px;
height: 270px;
text-align: center;
margin: 0 auto;
}
给每个小图加上鼠标经过时白色边框变成黑色边框，当离开后，将黑色边框变白【白色边框保证图片不会大小变】
利用this传递所指的img，并附带所匹配的大图路径
函数中：获取大图的src并进行更改【style为空时，会找最前优先级进行替补】
3. 隐藏的下拉菜单
鼠标经过时，下拉菜单出现，鼠标离开，下拉菜单消失【可不是指下拉菜单select】
思路：
1. 设置一个div，里面包含div和ol>li
2. 将ol设置为不可见，鼠标经过大div时，ol出现，鼠标离开后，ol消失
注意：ol的设置为display：none
js就很简单了，只不过和前面有点不同，onmouseover写在了变量后，以后的写法基本就是这样，不再给html加事件，仅在js中完成【除特殊情况，例如】
var box=document.querySelector('#box');
var dsy=document.querySelector('.dsy');
box.onmouseover = function() {
console.log('鼠标进入了');
dsy.style.display = 'block';
}
box.onmouseout = function() {
console.log('鼠标离开了');
dsy.style.display = 'none';
}4. 手机号验证码的倒计时
当倒计时结束后，重新变为发送，点击发送，开始倒计时
认识新函数querySelector：选取第一个匹配的元素；addEventListener：给某个元素添加监听器【同经常使用的这几个大致一样】
还记得setInterval 和 clearInterval 吗 【设置间隔器和清除间隔器】
思路：
1. 获取按钮元素，并设置倒计时的时间
2. 为按钮添加监听器，点击后按钮变为不可选中，并更改按钮颜色
3. 设置一个间隔器，每隔1s执行一次，执行过程设置的倒计时自减，当time减为0，为其重新赋值并清除间隔器和不可选中属性
手机号：
5. 留言添加与删除
点击发送，将内容移至下方并清空输入框的内容，点击删除，删除该条评论
思路：
1. 获取各元素信息，并生成时间的字符串
2. 检测输入的内容是否为空，为空则返回
3. 不为空则生成子节点(li)，为li节点加上时间与删除字样，进行插入节点
4. 当点击到li子节点的【i】 删除，对li进行移除
注意：getMonth() 比当前月份少1