超详细!!原生js实现todolist页面(不含本地储存啥的)

超详细!!原生js实现todolist页面(不含本地储存啥的)_第1张图片
刚学完js,完成这个todolist的过程十分痛苦,整理了这篇文章。里面js基本每一步都有详细解释,自我认为逻辑还是比较清晰。希望各位大佬轻喷。

在这里插入代码片

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>ToDoList——最简单的待办事项列表title>
        
        <link rel="stylesheet" href="./style.css">
    head>
    <body>
        
        <div class="pagetop">
            <div class="container">
                <span class="left">
                    <a href="">ToDoLista>
                span>
                <span class="right">
                    <input id='saveData' value="  添加todo" type="text" size="60" onfocus="if(this.value=='  添加todo'){this.value='';this.style.color='#424242'}"
                    onblur="if(this.value==''){this.value='  添加todo';}">
                span>
            div>
        div>
        
        <div class="page">
            <div class="container">
                <div class="doing">
                    <h2 >正在进行h2>
                    0span>
                    <ul id='saveUl' class="doing">

                    ul>
                div>
                <div class="done">
                    <h2>已经完成h2>
                    0span>
                    <ul id='finishedUl' class="done">
                    ul>
                div>
            div>                      
        div>
        
        <div class="pagebot">
            <span>Copyright © 2014 todolist.cnspan>
            <a href="">cleara>
        div>
    body>
    <script type="text/javascript">
    // 分别用来储存未完成和完成事件
        var arr = [];                                
        var arrs = [];
    // 绑定敲击事件,敲击键盘时执行listadd函数                              
           document.addEventListener('keyup',listadd);
                var list = document.getElementById('saveUl');
                var com = document.getElementById('finishedUl');
           function listadd (e) {
      
            //如果敲的键不是回车或者输入框为空,结束函数
               if(e.keyCode!==13 ||saveData.value==='') return;
               //将文本框的内容赋值到arr数组中
                arr.push(saveData.value);
                num.innerHTML = arr.length;
                list.innerHTML += '
  • '+ ''+ saveData.value + '
  • '
    saveData.value=''; } // 用来刷新页面的函数 function init(){ //清空页面 list.innerHTML = ''; com.innerHTML = ''; num.innerHTML = arr.length; nums.innerHTML = arrs.length; //分别在页面中加载未完成和已完成事项,同时用index分别记录是第1,2,3,4...等事项 for(var i = 0;i < arr.length;i++){ list.innerHTML +='
  • ' + '' + arr[i] + '' + '
  • '
    } for(var j = 0;j < arrs.length;j++){ com.innerHTML +='
  • ' + '' + arrs[j] +'' + '
  • '
    } } //当未完成被点击时执行以下函数 list.onclick =function (e){ if(e.target.nodeName==='INPUT'){ //用idx记录是未完成的第几个事项被点击到了 var idx = e.target.parentNode.getAttribute('index'); //用splice函数删除这个被点击的事项,同时赋值给last var last = arr.splice(idx,1); //将last存的事项传入到arrs中 arrs.push(last); //刷新页面 init(); } if(e.target.nodeName==='BUTTON'){ //同理,记录是谁被点击了 var idx = e.target.parentNode.getAttribute('index'); //删除这个事项 arr.splice(idx,1); init(); } } //与上面函数相似~,这是已完成被点击执行的函数 com.onclick =function (e){ if(e.target.nodeName==='INPUT'){ var idx = e.target.parentNode.getAttribute('index'); var lasts = arrs.splice(idx,1); arr.push(lasts); init(); } if(e.target.nodeName==='BUTTON'){ var idx = e.target.parentNode.getAttribute('index'); arrs.splice(idx,1); init(); } }
    script> html>

    css代码

    *{
         
        padding: 0;
        margin: 0;
        color:inherit;
        text-decoration: inherit;
    }
    body{
         
        background-color: #cdcdcd;
    }
    .container{
         
        margin: auto auto;
        width: 680px;
        /* overflow: hidden; */
    }
    .pagetop{
         
        position: relative;
        overflow: hidden;
        height: 50px;
        background-color: #333;
    }
    .pagetop .left {
         
        line-height: 50px;
        font-size: 30px;
        color:#ddd;
        float: left;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    .pagetop .right {
         
        float: left;
        display: block;
        margin-top: 8px;
        margin-left: 140px;
        float: right;
    }
    .pagetop .right input{
         
        display: inline-block;
        line-height: 30px;
        border-radius: 5px;
        color:rgb(117,117,117);
        box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
    }
    .page .doing{
         
        margin-top: 20px;
    }
    .page .doing h2{
         
        display: inline-block;
    }
    .page .doing .num{
         
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color:#e6e6fa;
        color: #666;
        font-weight: bold;
        margin-left:530px ;
        text-align: center;
        line-height:25px;
    }
    .page .doing li
    {
         
        position: relative;
        display: block;
        margin-top: 20px;
        height: 32px;
        width: 650px;
        padding:5px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.07);
        border-left: 5px solid #629a9c;
        border-radius: 3px;
    }
    .page .doing  span{
         
        font-size: 18px;
        vertical-align: 7px;
        margin-left: 5px;
        display: inline-block;
    }
    .page .doing  button{
         
        width: 20px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        position: absolute;
        display:inline-block;
        right: 10px;
        bottom: 14px;
        border-radius: 30%;
        background-color:rgb(204,204,204);
        color:#fff;
    }
    .page .done{
         
        margin-top: 20px;
    }
    .page .done h2{
         
        display: inline-block;
    }
    .page .done .num{
         
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color:#e6e6fa;
        font-weight: bold;
        color: #666;
        margin-left:530px ;
        text-align: center;
        line-height:25px;
    }
    .page .done li{
         
        position: relative;
        display: block;
        margin-top: 20px;
        height: 32px;
        width: 650px;
        padding: 5px;
        background-color: rgb(230,230,230);
        box-shadow: 0 1px 2px rgba(0,0,0,0.07);
        border-left: 5px solid rgb(179,179,179);
        border-radius: 3px;
    }
    /* .page .done  input{ */
    /*      */
    /* } */
    .page .done  span{
         
        font-size: 18px;
        display: inline-block;
        vertical-align: 6px;
        margin-left: 5px;
    }
    .page .done button{
         
        display:inline-block;
        width: 20px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        position: absolute;
        right: 10px;
        bottom: 14px;
        border-radius: 30%;
        background-color:rgb(204,204,204);
        color:#fff;
    }
    .pagebot{
         
        margin-top:20px ;
        margin-left: -110px;
        text-align: center;
        color:rgb(102,102,102);
    }
    .pagebot a{
         
        color:rgb(153,153,153);
    }
    

    你可能感兴趣的:(javascript,js,css,javascript,html)