JS實現簡單的todoList(記事本)效果
該記事本程序利用HTML+CSS+JavaScript前端三大框架來實現。
實現了記事本的添加，已完成和刪除待辦事項的基本功能。
下面是程序實現的全部代碼：
1.實現效果展示
2.HTML代碼
<head> <meta charset='UTF-8'> <title>TodoList</title>//導入css文件 <link rel='stylesheet' href='http://www.gepszalag.com/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> //待辦事項部分，內容動態生成 <ul></ul> <div class='test2'></div></body><!--將JavaScript元素放在后面，否則在執行JavaScript的時候，dom樹還未構建，會出現意想不到的錯誤--><script src='http://www.gepszalag.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.在每個span后面添加close節點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表示返回當前節點的父元素節點 var div=this.parentElement div.style.display='none' }} //3.處理任務完成事件var list=document.querySelector('ul')console.log(list)list.addEventListener(’click’,function (ev) {//event.target屬性可以用來實現事件委托，例如將事件綁定在ul上，但是點擊li時可以被觸發 //tagName是獲取元素的標簽名 if (ev.target.tagName === ’LI’){ //toggle方法在被選元素上進行hide（）和show（）之間的切換 //classList對元素的class繼續操作 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' } }}
在實現程序的時候，才發現明明有些代碼都看得懂是什么意思，但是一到自己寫的時候，就想不到應該這樣完成。
我覺得歸根結底，還是代碼練的不夠多，不能舉一反三，融會貫通。
因此如果大家在看到這篇文章之后，也想做一個記事本的效果，建議大家自己動手敲一敲，畢竟代碼只有自己動手敲了才知道缺陷和錯誤在哪里。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備