JS實現(xiàn)簡單的todoList(記事本)效果
該記事本程序利用HTML+CSS+JavaScript前端三大框架來實現(xiàn)。
實現(xiàn)了記事本的添加，已完成和刪除待辦事項的基本功能。
下面是程序?qū)崿F(xiàn)的全部代碼：
1.實現(xiàn)效果展示
2.HTML代碼
<head> <meta charset='UTF-8'> <title>TodoList</title>//導(dǎo)入css文件 <link rel='stylesheet' href='http://m.4tl426be.cn/bcjs/todoList.css' ></head><body><div class='myhead'> <h2>My ToDo List</h2> <table> <tr> <td><input type='text' placeholder='請輸入待辦事項...' id='things'></td> <td> <span onclick='addElement()'>add</span></td> </tr> </table></div> //待辦事項部分，內(nèi)容動態(tài)生成 <ul></ul> <div class='test2'></div></body><!--將JavaScript元素放在后面，否則在執(zhí)行JavaScript的時候，dom樹還未構(gòu)建，會出現(xiàn)意想不到的錯誤--><script src='http://m.4tl426be.cn/bcjs/todoList.js' type='text/javascript'></script></html>
3.CSS代碼
@font-face { font-family: ’iconfont’; /* Project id 2680005 */ src: url(’//at.alicdn.com/t/font_2680005_2v81j5og00f.woff2?t=1626424842361’) format(’woff2’), url(’//at.alicdn.com/t/font_2680005_2v81j5og00f.woff?t=1626424842361’) format(’woff’), url(’//at.alicdn.com/t/font_2680005_2v81j5og00f.ttf?t=1626424842361’) format(’truetype’);} body { margin: 0; padding: 0;}*{ box-sizing: border-box;}.myhead{ background-color: lightpink; text-align: center; padding: 5px 0px 10px 0px; color: aliceblue; } table{ margin: 0 auto;} #things{ width: 180px; height: 30px; border-radius: 3px; outline: none; border: solid 1px white; } #add{ display: inline-block; width: 80px; height: 30px; background-color: gainsboro; color: grey; border-radius: 3px; line-height: 30px; } #add:hover{ cursor: pointer; background-color:darkgrey ; color: grey; }ul{ margin: 0px; padding: 0px;} ul li{ list-style: none; /*text-align: center;*/ position: relative; padding-left:40px; height: 40px; line-height: 40px; } ul li:nth-child(odd) { background-color: #f9f9f9;} ul li:hover{ cursor: pointer; background-color: #dddddd;} ul li.check{ background-color: #888888; text-decoration: line-through; color: #f9f9f9;} ul li.check::before{ content: ’’; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px;}.close{ position: absolute; right: 0px; top: 0px; padding: 0px 20px; font-size: 16px;}.close:hover{ background-color: #f44336; color: white;}
4.Javascript代碼
//1.在每個span后面添加close節(jié)點var myNodelist=document.getElementsByTagName('li') for (var i=0;i<myNodelist.length;i++){ var span=document.createElement('span'); var txt=document.createTextNode('u00D7'); span.className='close'; span.appendChild(txt); myNodelist[i].appendChild(span); } //2.處理刪除事件var close=document.getElementsByClassName('close')for (var i=0;i<close.length;i++){ close[i].onclick=function () { //parentElement表示返回當(dāng)前節(jié)點的父元素節(jié)點 var div=this.parentElement div.style.display='none' }} //3.處理任務(wù)完成事件var list=document.querySelector('ul')console.log(list)list.addEventListener(’click’,function (ev) {//event.target屬性可以用來實現(xiàn)事件委托，例如將事件綁定在ul上，但是點擊li時可以被觸發(fā) //tagName是獲取元素的標(biāo)簽名 if (ev.target.tagName === ’LI’){ //toggle方法在被選元素上進行hide（）和show（）之間的切換 //classList對元素的class繼續(xù)操作 ev.target.classList.toggle(’check’)}},false); //4.處理點擊add按鈕，列表中添加一個待辦事項 function addElement(){ var things=document.getElementById(’things’).value // alert(localStorage.setItem('mutodolist',JSON.stringify(things))) var li=document.createElement(’li’) var t=document.createTextNode(things) if (things == ’’) { alert('請輸入待辦事件') } else { list.appendChild(li) li.appendChild(t) } var span=document.createElement(’span’) var txt=document.createTextNode(’u00D7’) span.className=’close’ span.appendChild(txt) li.appendChild(span) for (var i=0;i<close.length;i++) { close[i].onclick=function () { var div=this.parentElement div.style.display='none' } }}
在實現(xiàn)程序的時候，才發(fā)現(xiàn)明明有些代碼都看得懂是什么意思，但是一到自己寫的時候，就想不到應(yīng)該這樣完成。
我覺得歸根結(jié)底，還是代碼練的不夠多，不能舉一反三，融會貫通。
因此如果大家在看到這篇文章之后，也想做一個記事本的效果，建議大家自己動手敲一敲，畢竟代碼只有自己動手敲了才知道缺陷和錯誤在哪里。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. CSS hack用法案例詳解2. css進階學(xué)習(xí) 選擇符3. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera4. 使用css實現(xiàn)全兼容tooltip提示框5. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案6. 使用純HTML的通用數(shù)據(jù)管理和服務(wù)7. css代碼優(yōu)化的12個技巧8. 告別AJAX實現(xiàn)無刷新提交表單9. HTML DOM setInterval和clearInterval方法案例詳解10. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)
網(wǎng)公網(wǎng)安備