基于原生js实现的todolist（todomvc）

63 阅读 0 评论 42 点赞

我是靠谱客的博主义气香烟，最近开发中收集的这篇文章主要介绍基于原生js实现的todolist（todomvc），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todolist</title>
<style>
.active {
text-decoration: line-through;
color: #ccc;
}
p {
display: flex;
height: 50px;
width: 100%;
justify-content: space-around;
align-items: center;
border-bottom: 1px solid;
}
#btn {
width: 60px;
height: 30px;
}
#todo {
background: #eee;
border-radius: 5px;
border: 1px solid;
text-align: center;
width: 400px;
height: 600px;
margin: auto;
position: relative;
}
#checkall {
height: 20px;
width: 20px;
}
#message {
height: 30px;
width: 240px;
border-radius: 5px;
}
.message {
width: 80px;
height: 30px;
border-radius: 5px;
}
ul {
width: 100%;
height: 100%;
list-style-type: none;
padding:0;
margin: 0;
}
ul li {
padding:0 20px;
box-sizing: border-box;
list-style-type: none;
text-align: left;
height: 40px;
line-height: 40px;
font-size: 20px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
ul li input {
width: 20px;
height: 20px;
line-height: 40px;
}
ul li #delbtn {
width: 20px;
height: 20px;
color: tomato;
}
.foot{
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
border-top: 1px solid #ccc;
display: flex;
justify-content: space-around;
align-items: center;
color: #888;
}
.foot input{
width: 14px;
height: 14px;
}
#delsuc{
cursor:pointer;
}
a{
text-decoration: none;
color: #888;
}
div ul li .li_msg{
width: 300px;
line-height: 40px;
}
</style>
</head>
<body>
<div id="todo">
<div>
<h3>todolist</h3>
<p>
<input type="checkbox" data-id="checkall" id="checkall">
<label for="checkall">全选</label>
<input type="text" id="message">
<button id="btn">添加</button>
</p>
</div>
<div id="listbox">
</div>
<div class="foot">
<span>
<input type="checkbox" id="seeall">
<label for="seeall">全部</label>
</span>
<span> <input type="checkbox" id="suc">
<label for="suc">已完成</label></span>
<span>
<input type="checkbox" id="un">
<label for="un">未完成</label></span>
<span id="delsuc">删除完成</span>
</div>
</div>
<script>
class Todolist {
constructor() {
this.message = document.getElementById("message")
this.btn = document.getElementById("btn")
this.listbox = document.getElementById("listbox")
this.all = document.getElementById("checkall")
this.delsuc=document.getElementById("delsuc")
this.seeall=document.getElementById("seeall")
this.suc=document.getElementById("suc")
this.un=document.getElementById("un")
this.addEvent()
}
addEvent() {
this.render()
this.checkall()
btn.onclick = () => {
if (this.message.value) {
this.add()
}
}
this.all.onclick = () => {
this.checkdone()
}
this.delsuc.onclick=()=>{
this.deldone()
}
this.suc.onclick=(e)=>{
location.href="#/suc"
if(this.suc.checked==true){
this.seeall.checked=false
this.un.checked=false
}
this.render()
}
this.un.onclick=(e)=>{
location.href="#/un"
if(this.un.checked==true){
this.seeall.checked=false
this.suc.checked=false
}
this.render()
}
this.seeall.onclick=(e)=>{
location.href="#/"
if(this.seeall.checked==true){
this.un.checked=false
this.suc.checked=false
}
this.render()
}
}
add() {
var list = this.getdata() || [];
var obj = {}
obj.state = false;
obj.order = Date.now()
obj.message = this.message.value
list.push(obj)
this.setdata(list)
this.message.value = ""
this.render()
}
getdata() {
return JSON.parse(localStorage.getItem("todolist"))
}
setdata(arr) {
localStorage.setItem("todolist", JSON.stringify(arr))
this.checkall()
}
checkall() {
var list = this.getdata()
if (list.length > 0) {
var allstate = list.every((item) => {
return item.state == true
})
if (allstate) {
this.all.checked = true
}else {
this.all.checked = false
}
}
}
checkdone() {
// console.log(this.all.checked)
var list = this.getdata()
list.forEach((item) => {
item.state = this.all.checked
});
// console.log(list)
this.setdata(list)
this.render()
}
deldone(){
var list=this.getdata()
list=list.filter((item)=>{
return item.state!=true
})
this.setdata(list)
this.render()
}
render() {
var list = this.getdata() || [];
var str = `<ul>`;
var ha=location.hash.slice(2)
// console.log(ha)
if(ha==""){
this.seeall.checked=true
}else if(ha=="suc"){
this.suc.checked=true
list=list.filter((item=>{
return item.state==true
}))
}else if(ha=="un"){
this.un.checked=true
list=list.filter((item)=>{
return item.state==false
})
}
if(this.seeall.checked==true){
this.seeall.parentNode.style.color="#333"
}else{
this.seeall.parentNode.style.color="#888"
}
if(this.suc.checked==true){
this.suc.parentNode.style.color="#333"
}else{
this.suc.parentNode.style.color="#888"
}
if(this.un.checked==true){
this.un.parentNode.style.color="#333"
}else{
this.un.parentNode.style.color="#888"
}
list.forEach((item, index) => {
str += `<li data-id=${item.order}
class=${item.state ? "active" : ""}>
<aside><input type="checkbox" ${item.state ? "checked" : ""}
data-check=${item.order}>
<span data-id=${item.order} class="msg">${item.message}</span></aside>
<input type="button" value="x" id="delbtn"/>
</li>`
});
str += `</ul>`
this.listbox.innerHTML = str
var myul = document.getElementsByTagName("ul")[0]
myul.onclick = (e) => {
var mytype = e.target.getAttribute("class")
if (e.target.type == "button") {
var i = e.target.parentNode.getAttribute("data-id")
var list = this.getdata()
var ix = 0
list.forEach((item, index) => {
if (item.order == i) {
ix = index
}
});
list.splice(ix, 1)
this.setdata(list)
this.render()
}
if (e.target.type == "checkbox") {
e.target.parentNode.parentNode.classList.add("active")
if (e.target.checked == false) {
e.target.parentNode.parentNode.classList.remove("active")
}
var i = e.target.parentNode.parentNode.getAttribute("data-id")
var list = this.getdata()
var ix = 0
list.forEach((item, index) => {
if (item.order == i) {
ix = index
}
});
list[ix].state = !list[ix].state
this.setdata(list)
this.render()
}
}
myul.ondblclick=(e)=>{
if(e.target.tagName=="LI"){
// console.log(e.target)
// console.log(e.target.children[0].children[1].innerHTML)
var li_msg=e.target.children[0].children[1].innerHTML
var edit=`<input type="text" class="li_msg" value=${li_msg} />`
// console.log(edit)
e.target.children[0].children[1].innerHTML=edit
e.target.children[0].children[1].children[0].focus()
e.target.children[0].children[1].children[0].onblur=(e)=>{
// console.log(e.target.value)
edit=e.target.value;
var id=(e.target.parentNode.dataset.id)
let list=this.getdata()
var ix = 0
list.forEach((item, index) => {
if (item.order == id) {
list[index].message=edit
}
});
this.setdata(list)
e.target.parentNode.innerHTML=edit
}
}
}
}
}
new Todolist()
</script>
</body>
</html>