JS實(shí)現(xiàn)簡(jiǎn)單的todoList(記事本)效果
該記事本程序利用HTML+CSS+JavaScript前端三大框架來(lái)實(shí)現(xiàn)。
實(shí)現(xiàn)了記事本的添加，已完成和刪除待辦事項(xiàng)的基本功能。
下面是程序?qū)崿F(xiàn)的全部代碼：
1.實(shí)現(xiàn)效果展示
2.HTML代碼
<head> <meta charset='UTF-8'> <title>TodoList</title>//導(dǎo)入css文件 <link rel='stylesheet' href='http://m.b3g6.com/bcjs/todoList.css' ></head><body><div class='myhead'> <h2>My ToDo List</h2> <table> <tr> <td><input type='text' placeholder='請(qǐng)輸入待辦事項(xiàng)...' id='things'></td> <td> <span onclick='addElement()'>add</span></td> </tr> </table></div> //待辦事項(xiàng)部分，內(nèi)容動(dòng)態(tài)生成 <ul></ul> <div class='test2'></div></body><!--將JavaScript元素放在后面，否則在執(zhí)行JavaScript的時(shí)候，dom樹(shù)還未構(gòu)建，會(huì)出現(xiàn)意想不到的錯(cuò)誤--><script src='http://m.b3g6.com/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.在每個(gè)span后面添加close節(jié)點(diǎn)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é)點(diǎn)的父元素節(jié)點(diǎn) 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屬性可以用來(lái)實(shí)現(xiàn)事件委托，例如將事件綁定在ul上，但是點(diǎn)擊li時(shí)可以被觸發(fā) //tagName是獲取元素的標(biāo)簽名 if (ev.target.tagName === ’LI’){ //toggle方法在被選元素上進(jìn)行hide（）和show（）之間的切換 //classList對(duì)元素的class繼續(xù)操作 ev.target.classList.toggle(’check’)}},false); //4.處理點(diǎn)擊add按鈕，列表中添加一個(gè)待辦事項(xiàng) 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('請(qǐng)輸入待辦事件') } 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' } }}
在實(shí)現(xiàn)程序的時(shí)候，才發(fā)現(xiàn)明明有些代碼都看得懂是什么意思，但是一到自己寫(xiě)的時(shí)候，就想不到應(yīng)該這樣完成。
我覺(jué)得歸根結(jié)底，還是代碼練的不夠多，不能舉一反三，融會(huì)貫通。
因此如果大家在看到這篇文章之后，也想做一個(gè)記事本的效果，建議大家自己動(dòng)手敲一敲，畢竟代碼只有自己動(dòng)手敲了才知道缺陷和錯(cuò)誤在哪里。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JS中6個(gè)對(duì)象數(shù)組去重的方法2. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求3. 資深程序員：給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告！4. 一文帶你徹底理解Java序列化和反序列化5. PHP程序員簡(jiǎn)單的開(kāi)展服務(wù)治理架構(gòu)操作詳解(二)6. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼7. Python基于requests庫(kù)爬取網(wǎng)站信息8. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法9. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能10. python中文本字符處理的簡(jiǎn)單方法記錄
網(wǎng)公網(wǎng)安備