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

啦啦啦

效果如下地址：

点击打开链接

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;
}

            
            
            

            

            

            
            
            

                选择全部
     

     
                
            
            
        
  

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