今回は todolist の JS 実装について詳しく説明します。 todolist の JS 実装の注意点 について、実際のケースを見てみましょう。
この記事では、ネイティブ JavaScript を使用した todolist 関数の実装に関連する知識ポイントを紹介します。これを必要とする友人はそれを学ぶことができます。
このプロジェクトでは、主にdom、イベント、イベントトリガー間の論理関係、キャッシュへの書き込みとキャッシュの取得方法を制御するjsを練習できます。
主な機能:
ToDo 項目にユーザー入力を追加します
Todo リストを分類することができ、ユーザーは ToDo 項目を完了したグループに分類することを確認します
Todo リスト内の各項目は、そして、編集者
は、ユーザー入力データをlocalStorageローカルキャッシュに書き込み、入力データを保存します
ドメイン名のローカルキャッシュをクリアし、すべてのtodolistアイテムをクリアできます
特定の機能の実装
HTML コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist-prime</title>
<link rel="stylesheet" href="yuansheng.css" rel="external nofollow" >
</head>
<body>
<header>
<section>
<label for="add_list">My todolist</label>
<input type="text" id="add_list" name="add_list" placeholder="type here" required>
</section>
</header>
<p class="content">
<h1>未完成<span id="todocount"></span></h1>
<ol id="todolist">
</ol>
<h1>已完成<span id="donecount"></span></h1>
<ol id="donelist">
</ol>
</p>
<p id="clear">
<span style="white-space:pre;"> </span><button id="clearbutton"><h3>全部清除</h3></button>
</p>
<script src="todolist-prime.js"></script>
</body>
</html>
ログイン後にコピー
JS コードと分析
ユーザーが入力したデータを保存する配列オブジェクトを作成します。 配列内の各項目はオブジェクトです。 「done」属性はユーザー入力データのラベルとして理解でき、主に「todo」値を分類するために使用されます。
ユーザーがデータの入力を完了するたびに、キャッシュが更新され、入力ボックスが初期化される必要があります。
function addTodolist(e) {
var obj_list = {
todo: "", //用于存储用户输入的数据
done: false //初始化用户输入的数据属性，以便对用户待办事项进行分类
};
document.getElementById("add_list").value = document.getElementById("add_list").value.trim();
if (document.getElementById("add_list").value.length === 0){
alert("不能为空");
return;
}
obj_list.todo = document.getElementById("add_list").value;
todolist.push(obj_list);
saveData(todolist);
document.getElementById("add_list").value = ""; //初始化输入框
load(); //将用户输入的数据添加至dom节点
document.getElementById("add_list").focus();
}ログイン後にコピー
入力データを dom ノードに追加し、入力データ属性 (「done」) の値に従って分類します。
<span style="font-size:14px;">function load(){
var todo = document.getElementById("todolist"),
done = document.getElementById("donelist"),
todocount = document.getElementById("todocount"),
donecount = document.getElementById("donecount"),
todoString = "",
doneString = "",
todoCount = 0,
doneCount = 0;
document.getElementById("add_list").focus();
todolist = loadData();
//todolist数组对象里若包含用户输入数据，则将其添加至dom节点；若为空对象，则初始化页面。
if (todolist != null){
for (var i=0; i<todolist.length; i ++){
if(!todolist[i].done){
todoString += "<li>"
//通过onchange事件，复选框值有改变则调用update函数，并改变输入数据“done”属性的布尔值，这样
//下次load()后，这段数据会进入不同的分组，未完成的事项分入已完成事项组，已完成事项分入未完成事项组
//点击事项调用edit函数
//点击“-”，调用remove函数
+ "<input type='checkbox' onchange='update("+i+", \"done\", true)'>"
+ "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>" +
"<a onclick='remove("+i+")'>-</a>" +
"</li>"; //将每次用户输入的数据，通过节点<p>利用id标记，以便后续编辑功能定位
todoCount ++;
}
else{
doneString += "<li>"
+ "<input type='checkbox' "
+ "onchange='update("+i+", \"done\", false)' checked>"
+ "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>"
+ "<a onclick='remove("+i+")'>-</a>"
+ "</li>";
doneCount ++;
}
}
todo.innerHTML = todoString;
done.innerHTML = doneString;
todocount.innerHTML = todoCount;
donecount.innerHTML = doneCount;
}
else {
todo.innerHTML = "";
done.innerHTML = "";
todocount.innerHTML = 0;
donecount.innerHTML = 0;
}
}</span>ログイン後にコピー
項目をクリックして編集イベントをトリガーし、編集可能なフォームコントロールを段落に挿入し、更新関数を通じてユーザーが入力した値でtodolist配列に保存されているデータを更新します
function edit(i) {
var p = document.getElementById('p-' + i),
pContent = p.innerHTML,
inputId;
//通过upadate函数对todolist数组相应项进行更新，将用户输入的内容写入到todolist数组相应项的todo属性中
function confirm() {
if (inputId.value.length === 0) {
p.innerHTML = pContent;
alert("内容不能为空");
}
else {
update(i, "todo", inputId.value); //修改事项内容后，更新数组里对应项"todo"属性的值，以便更新dom节点
}
}
//结合keypress事件，按下enter键，调用confirm函数
function enter(e) {
if (e.keyCode == 13){
confirm();
}
}
p.innerHTML = "<input type='text' id='input-"+i+"' value='"+pContent+"'>";
inputId = document.getElementById('input-'+i);
inputId.focus();
inputId.setSelectionRange(0, inputId.value.length);
inputId.onblur = confirm; //表单控件失去焦点，调用confirm函数，即对页面内容进行更新
inputId.onkeypress = enter; //对按键事件进行监控
}ログイン後にコピー
対応する属性を変更します配列 todolist 内の項目 (「todo」または「done」) を更新してロードします
function update(i, field, value) {
todolist[i][field] = value;
saveData(todolist);
load();
}ログイン後にコピー
対応する項目を削除してロードします
function remove(i) {
todolist.splice(i, 1);
saveData(todolist); //相同名称的缓存会覆盖，更新缓存
load();
}ログイン後にコピー
ユーザーデータをローカルキャッシュに保存します
function saveData(data) {
localStorage.setItem("mytodolist", JSON.stringify(data)); //JS对象转换成JSON对象存进本地缓存
}ログイン後にコピー
ローカルキャッシュがある場合は、ローカルキャッシュからデータを取得しますデータを todolist に割り当てるため、ページを更新します ユーザー データはまだ存在します
function loadData() {
var hisTory = localStorage.getItem("mytodolist");
if(hisTory !=null){
return JSON.parse(hisTory); //JSON对象转换为JS对象
}
else { return []; }
}ログイン後にコピー
ローカル キャッシュをクリアします
function clear() {
localStorage.clear();
load();
}ログイン後にコピー
一連のイベントを監視します
window.addEventListener("load", load); //页面加载完毕调用load函数
document.getElementById("clearbutton").onclick = clear;
document.getElementById("add_list").onkeypress = function (event) {
if(event.keyCode === 13){
addTodolist();
}
};ログイン後にコピー
CSS
body {
margin: 0px;
padding: 0px;
font-size: 16px;
background-color: gainsboro;
}
header {
height: 50px;
background-color: cornflowerblue;
}
header section {
margin: 0 auto;
width: 40%;
}
header section label {
float: left;
line-height: 50px; /*设置line-height和包含块高度一致，以实现行内元素垂直居中*/
font-size: 20px;
}
#add_list {
float: right;
margin-top: 11px;
width: 60%;
height: 24px;
border-radius: 5px;
box-shadow: 0 1px 0 black;
font-size: 18px;
text-indent: 10px;
}
h1 {
position: relative;
}
h1 span {
position: absolute;
top: 1px;
right: 5px;
display: inline-block;
width: 23px;
height: 23px;
border-radius: 23px; /*创建圆形标记*/
line-height: 23px;
font-size: 18px;
text-align: center;
background: #E6E6FA;
}
.content {
width: 40%;
margin: 0 auto;
}
li {
position: relative;
margin-bottom: 10px;
border-radius: 5px;
padding: 0 10px;
height: 32px;
box-shadow: 0 1px 0 black;
line-height: 32px;
background-color: burlywood;
list-style: none;
}
ol li input {
position: absolute;
top: 4px;
left: 10px;
width: 20px;
height: 20px;
cursor: pointer;
}
p{
margin: 0;
}
ol li p {
display: inline;
margin-left: 35px;
}
ol li p input{
top: 5px;
margin-left: 35px;
width: 70%;
height: 14px;
font-size: 14px;
line-height: 14px;
}
ol li a {
position: absolute;
top: 8px;
right: 10px;
display: inline-block;
border: 1px;
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 32px;
line-height: 10px;
color: red;
font-weight: bolder;
cursor: pointer;
background-color: gray;
}
#clear {
width: 100px;
margin: 0 auto;
}
#clearbutton {
border-color: red;
border-radius: 5px;
box-shadow: 0 1px 0 yellow;
cursor: pointer;
}
button h3{
font-size: 13px;
line-height: 13px;
}ログイン後にコピー
最終的な実装効果
この記事の事例を読んだ後は、その方法をマスターしたことになります。さらに興味深い内容については、中国語 Web サイトの php のその他の関連記事に注目してください。
推奨読書:
反応ネイティブはフェッチを使用して画像をアップロードします
JSをパッケージ化するためにimportとrequireを使用します
反応イベントでこれをバインドするいくつかの方法
以上がtodolistのJS実装の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
