• ✽js的快速入门6 项目

    1. 待办

    上方为输入事情添加

    下左为未办，右边为已办 

    1. <body>
    2.     <h3>待办h3>
    3.     新事情：<input type="text" name="" id="event"/>
    4.     <button onclick="addevent();">提交button>
    5.     <hr>
    6.     <div>
    7.         <table id="tab">
    8.             
    9.         table>
    10.     div>
    11.  
    12.     <div>
    13.         <table id="tab2">
    14.  
    15.         table>
    16.     div>
    17. body>
    1. div{
    2.             width: 45%;
    3.             margin-left: 2%;
    4.             float: left;
    5.             border-top: 1px solid green;
    6.         }
    7. #tab,#tab2{
    8.             border-collapse: collapse;
    9.             width: 100%;
    10.             /* margin: 0 auto; */
    11.         }
    12. tr{
    13.             border-top: 1px solid green;
    14.             border-bottom: 1px solid green;
    15.         }
    16. td{
    17.             background-color: rgb(186, 255, 255);
    18.         }
    19. .td1{
    20.             width: 5px;
    21.         }
    22. .td2{
    23.             width: 510px;
    24.             /* background-color: red; */
    25.         }

    先顺思路

    1. 获取input的内容，按行添加进table中，每行前均加一个多选框

    2. 多选框的值为真，将此行挪至右边

    3. 取消右边多选框的勾，将其返回至左边

    4. 增加一个删除链接

    addevent函数写出一个tr行，【设置了3列，多选框，内容，单删除】，将此行头插进table，并删除input框中的内容(调动delinp函数)

    第一列中附有moveture函数，当此框被选中时，将其挪至右边的table中；

    第三列附有delthi函数，当被选中时进行单删

    movetrue函数，利用this传进去的是多选框，所以要想上查找到父节点tr，在左边进行删除，在右边进行追加

    delthis函数，同样利用this，找到父节点tr，获取tr的行号进行删除

    1. function delinp(){ // 输出输入框中输入的内容
    2.             document.getElementById('event').value='';
    3.         }
    4. function addevent(){
    5.             var tr=''+
    6.                 ''+
    7.                     ''+
    8.                 ''+
    9.                 ''+
    10.                     document.getElementById('event').value
    11.                 +''+
    12.                 ''+
    13.                     ''+
    14.                 ''+
    15.             ''
    16.             console.log(tr);
    17.             var tab=document.getElementById('tab');
    18.             trs=tab.insertRow(0);
    19.             trs.innerHTML=tr;
    20.             
    21.             delinp();
    22.         }
    23. function movetrue(inp){
    24.             var tab=document.getElementById('tab'); //获取父节点，删除子节点
    25.             var tab2=document.getElementById('tab2');
    26.             // console.log(inp.checked);
    27.             var tr=inp.parentNode.parentNode; //获取该节点的父节点tr
    28.             if(inp.checked){
    29.                 // 删除上面挪至下方
    30.                 
    31.                 tab.deleteRow(tr.rowIndex);
    32.                 tab2.appendChild(tr);
    33.                 console.log(tr.rowIndex);
    34.             }else{
    35.                 // 将下方的挪至上方
    36.                 tab2.deleteRow(tr.rowIndex);
    37.                 tab.appendChild(tr);
    38.             }
    39.             
    40.         }
    41. function delthis(a){
    42.             var tr=a.parentNode.parentNode;
    43.             var tab=tr.parentNode;
    44.             tab.deleteRow(tr.rowIndex);
    45.         }

    2. 大小轮播图

                                      

    实现状态：

            当鼠标经过或悬停在某个小图上时，大图随之进行变化【图片如果大小合适，就不用向我一样写img的css】

    1. #imgb{
    2.             width: 200px;
    3.             height: 200px;
    4.         }
    5. .imgs{
    6.             border: 2px solid white;
    7.             padding: 2px;
    8.             width: 50px;
    9.             height: 50px;
    10.         }
    11. #showdiv{
    12.             /* border: 1px solid; */
    13.             width: 210px;
    14.             height: 270px;
    15.             text-align: center;
    16.             margin: 0 auto;
    17.         }
    1. <body>
    2.     <script>
    3.         function addborder(imgsl,src){
    4.             imgsl.style.border='2px solid black';
    5.  
    6.             var big=document.getElementById('imgb');
    7.             big.src=src;
    8.         }
    9.         function subborder(imgs){
    10.             imgs.style.border='';
    11.         }
    12.     script>
    13.     <div id="showdiv">
    14.         <img id="imgb" src="big1.png" alt="">
    15.         <img class="imgs" src="small1.jpg" alt="" onmouseover="addborder(this,'big1.png');" onmouseleave="subborder(this);">
    16.         <img class="imgs" src="small2.jpg" alt="" onmouseover="addborder(this,'big2.png');" onmouseleave="subborder(this);">
    17.         <img class="imgs" src="small3.jpg" alt="" onmouseover="addborder(this,'big3.png');" onmouseleave="subborder(this);">
    18.     div>
    19. body>

     给每个小图加上鼠标经过时白色边框变成黑色边框，当离开后，将黑色边框变白【白色边框保证图片不会大小变】

    利用this传递所指的img，并附带所匹配的大图路径

    函数中：获取大图的src并进行更改【style为空时，会找最前优先级进行替补】

    3. 隐藏的下拉菜单

    鼠标经过时，下拉菜单出现，鼠标离开，下拉菜单消失【可不是指下拉菜单select】

    思路：

            1. 设置一个div，里面包含div和ol>li

            2. 将ol设置为不可见，鼠标经过大div时，ol出现，鼠标离开后，ol消失

    1. <div class="nav" id="box">
    2.         <div>总体菜单div>
    3.         <ol class="dsy">
    4.             <li><a href="#">菜单1a>li>
    5.             <li><a href="#">菜单2a>li>
    6.             <li><a href="#">菜单3a>li>
    7.             <li><a href="#">菜单4a>li>
    8.             <li><a href="#">菜单5a>li>
    9.         ol>
    10.     div>
    1. <style>
    2.         *{
    3.             padding: 0;
    4.             margin: 0;
    5.             list-style: none;
    6.         }
    7.         
    8.         .nav{
    9.             width: 100px;
    10.             background-color: rgb(200, 255, 255);
    11.             height: 40px;
    12.             margin: 0 auto;
    13.             margin-top: 30px;
    14.         }
    15.         .dsy{
    16.             display: none;
    17.         }
    18.         ol>li{
    19.             width: 100px;
    20.             height: 40px;
    21.             text-align: center;
    22.             line-height: 40px;
    23.             background-color: rgb(216, 255, 178);
    24.             border: 1px solid rgb(117, 117, 117);
    25.             /* float: left; */
    26.             margin-right: 20px;
    27.         }
    28.     style>

    注意：ol的设置为display：none 

    js就很简单了，只不过和前面有点不同，onmouseover写在了变量后，以后的写法基本就是这样，不再给html加事件，仅在js中完成【除特殊情况，例如】

    1. var box=document.querySelector('#box');
    2. var dsy=document.querySelector('.dsy');
    3.  
    4. box.onmouseover = function() {
    5.             console.log('鼠标进入了');
    6.             dsy.style.display = 'block';
    7.  
    8.         }
    9.  
    10. box.onmouseout = function() {
    11.             console.log('鼠标离开了');
    12.             dsy.style.display = 'none';
    13.         }
    4.  手机号验证码的倒计时

    当倒计时结束后，重新变为发送，点击发送，开始倒计时

    认识新函数querySelector：选取第一个匹配的元素；addEventListener：给某个元素添加监听器【同经常使用的这几个大致一样】

     还记得setInterval 和 clearInterval 吗 【设置间隔器和清除间隔器】

    思路：        

            1. 获取按钮元素，并设置倒计时的时间

            2. 为按钮添加监听器，点击后按钮变为不可选中，并更改按钮颜色

            3.  设置一个间隔器，每隔1s执行一次，执行过程设置的倒计时自减，当time减为0，为其重新赋值并清除间隔器和不可选中属性

    1. <body>
    2.     手机号：<input type="number" placeholder="请输入我的手机号" /><button>sendbutton>
    3.     <script>
    4.         var btn=document.querySelector('button');
    5.         var time=3;
    6.         console.log('刷新页面就有');
    7.         btn.addEventListener('click',function(){
    8.         console.log('点击了');
    9.         btn.disabled=true;
    10.         btn.style.backgroundColor='gray';
    11.         var tms=setInterval(function(){
    12.             // 添加计时器，每隔1s执行一次
    13.             if(time == 0){
    14.                 // 当3秒执行完成后,按钮不可点的状态取消
    15.                 clearInterval(tms);
    16.                 time=3;
    17.                 btn.disabled=false;
    18.                 btn.style.backgroundColor='';
    19.                 btn.innerHTML='发送';
    20.             }else{
    21.                 // 当在3秒内时，time每隔1s进行自减操作
    22.                 btn.disabled=true;
    23.                 btn.innerHTML='还剩下'+time+'秒';
    24.                 time--;
    25.             }
    26.         },1000);
    27.     })
    28.     script>
    29. body>
    5. 留言添加与删除

    点击发送，将内容移至下方并清空输入框的内容，点击删除，删除该条评论

    1. <style>
    2.         textarea{
    3.             width: 200px;
    4.             height: 50px;
    5.             resize: none;
    6.         }
    7.         .sp{
    8.             font-size: 8px;
    9.  
    10.         }
    11.         .fons{
    12.             font-size: 6px;
    13.             font-weight: bold;
    14.         }
    15. style>
    1. <textarea>textarea>
    2.     <button>sendbutton>
    3.     <ul>
    4.  
    5.     ul>
    6.     <script>
    7.         var btn=document.querySelector('button');
    8.         var txt=document.querySelector('textarea');
    9.         var ul=document.querySelector('ul');
    10.  
    11.         // 生成时间年月日时分
    12.         var time=new Date();
    13.         year=time.getFullYear();
    14.         month=time.getMonth()+1;
    15.         day=time.getDate();
    16.         hour=time.getHours();
    17.         minute=time.getMinutes();
    18.         var tm=year+'-'+month+'-'+day+' '+hour+':'+minute;
    19.         // console.log(tm);
    20.  
    21.         btn.onclick=function(){
    22.             if(txt == ''){
    23.                 alert('没有输入东西');
    24.                 return;
    25.             }else{
    26.                 
    27.                 var li=document.createElement('li');
    28.  
    29.                 li.innerHTML=txt.value+' '+tm+''+'删除';
    30.                 ul.insertBefore(li,ul.children[0]);
    31.                 
    32.                 li.children[1].onclick=function(){
    33.                     ul.removeChild(this.parentNode);
    34.                 }
    35.             }
    36.             txt.value='';
    37.         }
    38.     script>

    思路：

            1. 获取各元素信息，并生成时间的字符串

            2. 检测输入的内容是否为空，为空则返回

            3. 不为空则生成子节点(li)，为li节点加上时间与删除字样，进行插入节点

            4. 当点击到li子节点的【i】 删除，对li进行移除

    注意：getMonth() 比当前月份少1

  • 相关阅读:
    docker+nginx部署vue项目在服务器上
    二叉搜索树--详细实现过程
    让批处理的工作目录指向当前目录
    centos7 离线安装httpd
    JPA - Hibernate
    基于springboot实现智能停车场管理平台
    JAVASE语法零基础——this引用和构造方法
    【数据结构】【C语言】【环形链表约瑟夫问题】
    HBase 的安装与部署
    NPDP值得产品经理学习吗？
  • 原文地址：https://blog.csdn.net/m0_62836433/article/details/132864400