啦啦啦
效果如下地址:
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;
}
}