1. 待办
上方为输入事情添加
下左为未办，右边为已办
<body>
<h3>待办</h3>
新事情：<input type="text" name="" id="event"/>
<button onclick="addevent();">提交</button>
<hr>
<div>
<table id="tab">
<!-- js添加的事情 -->
</table>
</div>
<div>
<table id="tab2">
</table>
</div>
</body>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='<tr>'+
'<td class="td1">'+
'<input type="checkbox" name="chk" onchange="movetrue(this);"/>'+
'</td>'+
'<td class="td2">'+
document.getElementById('event').value
+'</td>'+
'<td class="td3">'+
'<input type="radio" onclick="delthis(this);" />'+
'</td>'+
'</tr>'
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;
}<body>
<script>
function addborder(imgsl,src){
imgsl.style.border='2px solid black';
var big=document.getElementById('imgb');
big.src=src;
}
function subborder(imgs){
imgs.style.border='';
}
</script>
<div id="showdiv">
<img id="imgb" src="big1.png" alt="">
<img class="imgs" src="small1.jpg" alt="" onmouseover="addborder(this,'big1.png');" onmouseleave="subborder(this);">
<img class="imgs" src="small2.jpg" alt="" onmouseover="addborder(this,'big2.png');" onmouseleave="subborder(this);">
<img class="imgs" src="small3.jpg" alt="" onmouseover="addborder(this,'big3.png');" onmouseleave="subborder(this);">
</div>
</body>给每个小图加上鼠标经过时白色边框变成黑色边框，当离开后，将黑色边框变白【白色边框保证图片不会大小变】
利用this传递所指的img，并附带所匹配的大图路径
函数中：获取大图的src并进行更改【style为空时，会找最前优先级进行替补】
3. 隐藏的下拉菜单
鼠标经过时，下拉菜单出现，鼠标离开，下拉菜单消失【可不是指下拉菜单select】
思路：
1. 设置一个div，里面包含div和ol>li
2. 将ol设置为不可见，鼠标经过大div时，ol出现，鼠标离开后，ol消失
<div class="nav" id="box">
<div>总体菜单</div>
<ol class="dsy">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</div><style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.nav{
width: 100px;
background-color: rgb(200, 255, 255);
height: 40px;
margin: 0 auto;
margin-top: 30px;
}
.dsy{
display: none;
}
ol>li{
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: rgb(216, 255, 178);
border: 1px solid rgb(117, 117, 117);
/* float: left; */
margin-right: 20px;
}
</style>注意：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，为其重新赋值并清除间隔器和不可选中属性
<body>
手机号：<input type="number" placeholder="请输入我的手机号" /><button>send</button>
<script>
var btn=document.querySelector('button');
var time=3;
console.log('刷新页面就有');
btn.addEventListener('click',function(){
console.log('点击了');
btn.disabled=true;
btn.style.backgroundColor='gray';
var tms=setInterval(function(){
// 添加计时器，每隔1s执行一次
if(time == 0){
// 当3秒执行完成后,按钮不可点的状态取消
clearInterval(tms);
time=3;
btn.disabled=false;
btn.style.backgroundColor='';
btn.innerHTML='发送';
}else{
// 当在3秒内时，time每隔1s进行自减操作
btn.disabled=true;
btn.innerHTML='还剩下'+time+'秒';
time--;
}
},1000);
})
</script>
</body>5. 留言添加与删除
点击发送，将内容移至下方并清空输入框的内容，点击删除，删除该条评论
<style>
textarea{
width: 200px;
height: 50px;
resize: none;
}
.sp{
font-size: 8px;
}
.fons{
font-size: 6px;
font-weight: bold;
}
</style><textarea></textarea>
<button>send</button>
<ul>
</ul>
<script>
var btn=document.querySelector('button');
var txt=document.querySelector('textarea');
var ul=document.querySelector('ul');
// 生成时间年月日时分
var time=new Date();
year=time.getFullYear();
month=time.getMonth()+1;
day=time.getDate();
hour=time.getHours();
minute=time.getMinutes();
var tm=year+'-'+month+'-'+day+' '+hour+':'+minute;
// console.log(tm);
btn.onclick=function(){
if(txt == ''){
alert('没有输入东西');
return;
}else{
var li=document.createElement('li');
li.innerHTML=txt.value+' <span class="sp">'+tm+'</span>'+'<i class="fons">删除</i>';
ul.insertBefore(li,ul.children[0]);
li.children[1].onclick=function(){
ul.removeChild(this.parentNode);
}
}
txt.value='';
}
</script>思路：
1. 获取各元素信息，并生成时间的字符串
2. 检测输入的内容是否为空，为空则返回
3. 不为空则生成子节点(li)，为li节点加上时间与删除字样，进行插入节点
4. 当点击到li子节点的【i】 删除，对li进行移除
注意：getMonth() 比当前月份少1
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
