<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>習慣打卡</title> <style> h3 { color: #666; text-indent: 2px; } .input { width: 98%; border-radius: 4px; height: 35px; border: 0; background-color: #eee; padding: 2px 5px; color: #666; } .list { list-style-type: none; margin: 10px 0; padding: 0; } .list li { 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 { display: inline-block; background-repeat: no-repeat; 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/delete.svg"); background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; width: 20px; display: none; } .total { text-align: center; color: #666; } [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <!--頭部--> <header> <h3>習慣打卡</h3> <input type="text" class="input" @keyup.enter="addHabit" v-model="title" placeholder="請輸入習慣名稱，按回車鍵創建"> </header> <!--主體,加上v-cloak是爲了刷新不顯示代碼，渲染問題--> <section v-cloak> <ul class="list"> <li v-for="(item,index) in habits"> <span class="icon" v-show="today !== item.today" @click="setCount(item.id)" :style="{backgroundImage:item.url}">{{item.title}}</span> <span class="icon" v-show="today === item.today" style="background-image:url('img/success.svg')">{{item.title}}</span> <em><b>{{item.count}}天/共堅持</b><button class="delete" @click="deleteLocalHabit(index)">刪除</button></em> </li> </ul> <p class="total">共有{{total}}個習慣，最多堅持{{max}}天</p> </section> </div> <script src="../js/vue.js"></script> <script> //去掉提示 Vue.config.productionTip = false //Vue實例 const app = new Vue({ el : "#app", //數據 data () { return { title : '', //習慣標題 habits : [], //習慣列表 today : this.getToday() } }, //計算屬性 computed : { //習慣總數 total(){ return this.habits.length }, //最大堅持天數 max(){ //Math取最大值 return Math.max.apply(null,this.habits.map(item => { return item.count })) } }, //實例化後的鉤子 created(){ this.habits = JSON.parse(this.getLocalHabits()) || [] // console.log(this.habits) const date = this.getToday() console.log(date) }, //方法 methods: { //填加一條習慣 addHabit(){ //console.log(this.title) //時間戳 const time = Date.now() //一條習慣對象 const habit = { //id,時間戳 id : time, //隨機的url圖標01-15 url : 'url(img/' + this.getImgName() + '.svg)', //習慣標題 title : this.title, //打卡統計 count : 0, //寫入今天日期 today : '' } //填加到數據列表開頭位置 this.habits.unshift(habit) //console.log(this.habits) //更新到本地存儲 this.setLocalHabits() //清空輸入框 this.title = '' }, //刪除本地儲存 deleteLocalHabit(index){ // console.log(index) // console.log(this.habits[index].title) //後悔機制 if (confirm('確定刪除嗎?')){ //執行刪除 this.habits.splice(index,1) //更新本地存儲 this.setLocalHabits() } }, //01-15圖標隨機數 getImgName(){ //隨機1-15 const name = Math.floor(Math.random() * 15 +1) //判斷個位數 if (name < 10){ return '0' + name }else{ return name } }, //更新到本地存儲 setLocalHabits(){ //本地儲存 localStorage.setItem('habits-0',JSON.stringify(this.habits)) }, //累加打卡量 setCount(id){ //通過id查找匹配對象 const obj = this.habits.find(obj => { return obj.id === id }) //判斷是否已經打卡 if (obj.today !== this.getToday()){ //累加 obj.count++ //設置今天的日期 obj.today = this.getToday() } //更新到本地儲存 this.setLocalHabits() }, //獲取今天年月日 getToday(){ //時間對象 const date = new Date() //返回當天日期 return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDay() }, //獲取本地儲存 getLocalHabits(){ return localStorage.getItem('habits-0') } }, }) </script> </body> </html>