大体界面搭建
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>习惯打卡</title>
<style>
h3{
color: #666;
text-indent: 2px;
}
.input{
width: 20%;
border-radius: 4px;
height: 35px;
border: 0px;
background-color: #eee;
padding: 2px 5px;
color: #666;
}
.list{
list-style-type: none;
margin: 10px 0;
padding: 0px;
}
.list li{
width: 20%;
padding: 8px 5px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #666;
user-select: none;
}
.list li span.icon{
background-repeat: no-repeat;
display: inline-block;
background-position: left center;
text-indent: 32px;
cursor: pointer;
}
.list li:hover{
background-color: #eee;
}
.list li:hover .delete{
display: inline-block;
}
.list li em{
float: right;
padding-right: 5px;
font-style: normal;
}
.list li .delete{
border: 0;
background-color: transparent;
background-image: url("img/删除.svg");
background-repeat: no-repeat;
text-indent: -9999px;
cursor: pointer;
width: 20px;
display: none;
}
.total{
color: #666;
}
</style>
</head>
<body>
<div id="app">
<!--头部-->
<header>
<h3>习惯打卡</h3>
<input type="text" class="input" placeholder="输入打卡习惯">
</header>
<!--主体-->
<section>
<ul class="list">
<li>
<span class="icon" style="background-image: url('img/calendar.svg')">测试打卡</span>
<em><b>10</b> 天 /共坚持 <button class="delete">删除</button></em>
</li>
<li>
<span class="icon" style="background-image: url('img/calendar.svg')">测试打卡</span>
<em></em>
</li>
<li>
<span class="icon" style="background-image: url('img/calendar.svg')">测试打卡</span>
<em></em>
</li>
</ul>
<p class="total">共有习惯:10个 最大坚持:30天</p>
</section>
</div>
<script src="../js/vue.js"></script>
<script>
const app =new Vue({
el:'#app',
})
</script>
</body>
</html>
效果:
添加本地存储效果
具体代码:
methods:{
//添加习惯
addHabits(){
//时间戳
const time=Date.now()
const habit={
id:time,
url:'url(\'img/calendar.svg\')',
title:this.title,
//打卡统计
count:0,
//写入今天日期
today:''
}
this.habits.unshift(habit)
//数据存储到本地
this.setLocalHabits()
//清空输入框
this.title=''
},
setLocalHabits(){
localStorage.setItem('habits-0',JSON.stringify(this.habits))
}
}
}