一个简单的todolist，记录我的前端第一步

最新推荐文章于 2024-04-04 09:49:03 发布

黄金贼贼

最新推荐文章于 2024-04-04 09:49:03 发布

阅读量1.3w

点赞数 3

本文链接：https://blog.csdn.net/to_study/article/details/80465505

版权

啦啦啦

效果如下地址：

点击打开链接

body {
    line-height: 1;
    font-family: "Lato", sans-serif;
    background-color: #EFF1F2;
}
.todo{
    width: 70%;
    margin: 1em auto 3em;
    border: 1px solid #efefef;
    background-color:aquamarine;

}
.thing-input {
    border: 1px solid #dedede;
    padding-left: 10px;
    width: 70%;
    height: 35px;
    color: #555;
}
.clearList{
    color: #555;
    background-color:darkkhaki;
    width: 100px;
    height: 38px;
    cursor: pointer;
    font-size: 14px;
}

.listul ul li input,ul, li {
	margin: 0;
	padding: 0;
	border: 0;
}
.list li{
    border: 1px solid #dedede;
    width: 70%;
    height: 35px;
    color: #555;
    font-size: 30px;
    background-color:salmon; 
    list-style:none
}
.list li button{
        background-color: transparent;
	border: 1px solid #3465A4;
	color: #ddd;
	visibility: hidden;
	font-size: 20px;
	font-weight: bold;
}

.list li:hover > button {
	visibility: visible;
}
.list li label {
	display: inline-block;
	width: 70%;
	font-size: 20px;
	line-height: 24px;
	color: #fcfcfc;
	z-index: 2;
	overflow: hidden;
}

<html>
<body οnlοad="initList();">
<div class="todo">
            <input type="text" placeholder="在此输入你将要做的事情按回车键结束" id="thing" class="thing-input" οnkeypress="getKey();">
            <input type="button" value="清除列表" class="clearList" οnclick="delectAll();">
            <br>
            <br>
            <br>
            
            
            <section class="list">
                <input type="checkbox" id="selectall" οnclick="select_cancelAll();">选择全部
     <ul class="list-item" id="listul">
     
                </ul>
            </section>
            
        </div>
  </body>
</html>

function Todo(thing,time){
    this.thing=thing;
    this.time=time;
}
var todo1=new Todo("给老婆打电话","9：00");
var todo2=new Todo("下班去市场买菜","12：00");
var todo3=new Todo("上班","14：00");
var mylist=[todo1,todo2,todo3];
console.log(todo1);
//添加事件,参数用于添加在label标签
function add(labelText){
     //添加li标签
     var para=document.createElement("li");
       var element=document.getElementById("listul");
       element.appendChild(para);
       
       //往新的li标签添加复选框
       var inp=document.createElement("input");
       inp.type="checkbox";
       inp.onclick = isAll;
       
       element.lastChild.appendChild(inp);
       
       //往新的li标签添加label
       var lb=document.createElement("label");
       lb.appendChild(document.createTextNode(labelText));
       element.lastChild.appendChild(lb);
       
       //往新的li标签添加删除按钮
       var butt=document.createElement("button");
       butt.appendChild(document.createTextNode("删除"));
        element.lastChild.appendChild(butt);
       butt.οnclick=function(){
          butt.parentNode.parentNode.removeChild(butt.parentNode);
       };
}
//初始化todolist
function initList(){
    console.log(mylist.length);
    for(var i=0;i<mylist.length;i++){
       add(mylist[i].time+mylist[i].thing);
   }
    
}

//添加
function addListDo(){
    var labelText=document.getElementById("thing").value;
 
    if(labelText==""||labelText==null)return;
    else{
        //调用添加函数
     add(labelText);
       //将输入框重置
    document.getElementById("thing").value="";
    }
    
    }
    
    function getKey()  
{ 
    if(event.keyCode===13){  
    addListDo();
    }     
}  

//删除全部
function delectAll(){
    var listul=document.getElementById("listul");
    listul.innerHTML="";
}

//选择全部的复选框onclick响应事件
function select_cancelAll(){
     var sel=document.getElementById("selectall");
     
     if(sel.checked){
          var item=document.getElementById("listul");
          var items=item.getElementsByTagName("input");
         for(var i=0;i<items.length;i++){
             items[i].checked=true;
         }
     }
     else{
          var item=document.getElementById("listul");
          var items=item.getElementsByTagName("input");
         for(var i=0;i<items.length;i++){
             items[i].checked=false;
     }
 }
}

//是否全部被选中
function isAll(){
  var sel=document.getElementById("selectall");
    if(this.checked==false){
      sel.checked = false;
      return;
    }
  else{
var item=document.getElementById("listul");         
var items=item.getElementsByTagName("input");
          
    for(var i=0;i<items.length;i++){
           if(items[i].checked==false){
             return;
           }
      }
    sel.checked = true;
  }
}

黄金贼贼

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
一个简单的todolist，记录我的前端第一步

啦啦啦效果如下地址：点击打开链接body { line-height: 1; font-family: "Lato", sans-serif; background-color: #EFF1F2;}.todo{ width: 70%; margin: 1em auto 3em; border: 1px solid #efefef; bac...
复制链接

扫一扫