The final exam is coming. We need a review schedule. Combined with what we have learned recently, we have made such a small work of html+css+js.
Added caching: refresh / close schedule will not disappear~
My personal blog: https://www.kimiye.xyz
Portal: Memo Web
Update on July 7, 2019 (press shift+F5 to refresh in case of interface error)
- Add up and down move buttons (it was found that the priority of ToDoList could not be reflected in the final review, so it was added)
- Fix bug with a blank item by default
html code is very simple
1 table
1 div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Memorandum - Memo Web</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/page-index.css"> </head> <body> <table id="memoTable"> <tr> <th>Indexes</th> <th>content</th> <th> </th> </tr> <!-- <tr> <td>1</td> <td>High number</td> <td><a href="javascript:;">Delete</a></td> </tr> <tr> <td>2</td> <td>Big things</td> <td><a href="javascript:;">Delete</a></td> </tr> <tr> <td>3</td> <td>Mode electricity</td> <td><a href="javascript:;">Delete</a></td> </tr> --> </table> <div id="addDiv"> <p>Add new record</p> <span>content:</span> <input type="text" id="inputText"> <button id="addButton">Add to</button> </div> <script src="js/function.js"></script> </body> </html>
css code is not complicated
It mainly deals with the border and spacing.
/* Table style */ table{ background-color: #e9e9e9; /* Centered */ margin: 50px auto; /* Frame */ border-top: 1px solid black; border-right: 1px solid black; /* Text centered */ text-align: center; } th{ font-weight: bold; } th,td{ /* Frame */ border-bottom: 1px solid black; border-left: 1px solid black; /* spacing */ padding: 5px 10px; } /* Hyperlink styles */ a{ color: blue; text-decoration: none; } a:hover{ color: red; } /* div style */ div{ background-color: #e9e9e9; width: 300px; /* Centered */ margin: 50px auto; /* Frame */ border: 1px solid black; } div p{ text-align: center; margin: 5px 0px; } div span{ margin-left: 5px; margin-right: 5px; } div input{ padding: 2px 5px; width: 225px; } div button{ display: block; margin: 5px auto; }
js code
The function is encapsulated
// To update function update() { var allTr = document.getElementsByTagName("tr"); for(var i=1; i<allTr.length; i++) allTr[i].children[0].innerHTML = i; } // Delete record function del() { var tr = this.parentNode.parentNode; var index = tr.children[0].innerHTML; if(confirm("Determine delete index as"+index+"Records??")) { tr.parentNode.removeChild(tr); update(); } return false; } // Increase record function add() { var input = document.getElementById("inputText"); var table = document.getElementById("memoTable"); var tr = document.createElement("tr"); if(input.value == "") return; tr.innerHTML = "<td>" + table.children.length + "</td><td>" + input.value + "</td><td><a href=\"javascript:;\">Delete</a></td>"; tr.getElementsByTagName("a")[0].onclick = del; table.appendChild(tr); input.value = ""; } // Key response event function onKeyPress() { var keyCode = null; if(event.which) keyCode = event.which; else if(event.keyCode) keyCode = event.keyCode; if(keyCode == 13) { add(); return false; } return true; } // Bind click response event function band() { var btn = document.getElementById("addButton"); btn.onclick = add; var input = document.getElementById("inputText"); input.onkeypress = onKeyPress; window.onbeforeunload = write; } // Read local cache function read() { var str = localStorage.getItem("CONTENT"); var content = str.split("|$|"); // console.log(str); // console.log(content); var table = document.getElementById("memoTable"); for(var i=0; i<content.length; i++) { var tr = document.createElement("tr"); tr.innerHTML = "<td>" + table.children.length + "</td><td>" + content[i] + "</td><td><a href=\"javascript:;\">Delete</a></td>"; tr.getElementsByTagName("a")[0].onclick = del; table.appendChild(tr); } } // Write to local cache // Only one object can be written, so you need to encapsulate everything in one string. function write() { var allTr = document.getElementsByTagName("tr"); var str = ""; for(var i=1; i<allTr.length-1; i++) str += allTr[i].children[1].innerHTML + "|$|"; str += allTr[allTr.length-1].children[1].innerHTML localStorage.setItem("CONTENT",str); } // ------------------------------------------ band(); read();
js notes:
Get parent element: obj.parentNode Add child element method (focus on creating child elements): father.appendChild(son); Delete child element method: father.removeChild(son); <-> son.parentNode.removeChild(son); DOM Event onclick - mouse click onkeypress --- key press On before unload -- refresh / close the web page Read local cache: localStorage.getItem(key_name); Write to local cache: localStorage.setItem(key_name,value); String split: Str.split (string / regular expression);