前言:在看了TODOlist這個記事列表後,我們通過JavaScript以及jQuery來進行實現這個輕量的記事本。原工具連接：www.todolist.cn,我們進行實現的工具鏈接:www.jcsy.work
此項目未能進行本地存儲數據
效果圖:
一.思路分析:
- 由於考慮到手機端的問題,所以我們的計算單位採用
rem;- 主需的標籤有
a,input,li;- 需要進行節點的操作,使用
createElement;- 判斷鍵盤按下的事件,按下的鍵使用:
onkeyup;
二.簡單實現:
1.HTML:
想要做好一個項目,佈局是關鍵,布好了局才知道怎麼做,我們一起來看看:
<body>
<div class="action">
<div class="bx menu">
<span><a href="javascript:;">JCSYList</a></span>
<input type="text" placeholder="添加WillDO" title="請輸入記事內容">
</div>
</div>
<div class="bx ongoing ing">
<h2>正在進行
<span>0</span>
</h2>
</div>
<div class="bx ongoing success">
<h2>已經完成
<span>0</span>
</h2>
</div>
<footer class="bx">
<p>Write me© 2020 jcsy.work:<span>clear</span></p>
</footer>
</body>
2.CSS:
爲了讓界面看起來美觀,那麼css是必不可少的,一起來看看:
/* css初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 30px;
}
body {
width: 100%;
min-width: 5rem;
max-width: 8.533333rem;
margin: 0 auto;
background-color: #cdcdcd;
}
h2 {
font-size: .266667rem;
}
/* 設置版心 */
.bx {
width: 100%;
margin: 0 auto;
}
/* 設置頂部的樣式 */
.action {
width: 100%;
height: .666667rem;
background-color: #323232;
}
/* 頂部左邊 文字顯示部分 */
.menu span {
float: left;
width: 1.56rem;
height: .44rem;
font-size: .32rem;
line-height: .666667rem;
text-align: center;
}
/* 設置文字樣式 */
.menu span a {
text-decoration: none;
width: 100%;
height: 100%;
color: #dddddd;
}
/* 輸入框樣式的設置 */
.menu input {
float: right;
width: 4.853333rem;
height: .346667rem;
margin-top: .16rem;
border-radius: 5px;
text-indent: 10px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
outline: none;
font-size: .186667rem;
}
/* 正在進行的事項 */
.ongoing h2 {
height: .8rem;
line-height: .8rem;
margin-left: .133333rem;
}
/* 後面計數的 */
.ongoing span {
width: .266667rem;
height: .266667rem;
text-align: center;
line-height: .266667rem;
font-size: .186667rem;
background-color: #E6E6FA;
border-radius: 50%;
float: right;
margin-top: .266667rem;
}
/* 底部的設計 */
footer {
text-align: center;
}
/* 文字的整體字體大小 */
p {
font-size: .186667rem;
}
/* 用於清除整個數據的樣式設計 */
footer span {
cursor: pointer;
color: #999;
}
我們來看看實現的頁面效果:
PC端:
Android端:
3.JS以及jQuery:
- 首先我們需要對頁面中原有的元素進行獲取:
// 獲取到主要的元素
var text = document.querySelector(".menu input");
var ing = document.querySelector(".ing");
var ing_dex = document.querySelector(".ing span");
var clear = document.querySelector("footer span");
var suc_dex = document.querySelector(".success span");
- 接下來當我們按下按鍵時並且進行判斷了之後來進行創建元素：
// 鍵盤的按下事件
document.onkeyup = function(e) {
// 按下的鍵爲回車並且文本框內容不爲空的時候
if (e.keyCode == 13 && text.value != "") {
// 創建的元素
var test = document.createElement("li");
var inp = document.createElement("input");
var test2 = document.createElement("input");
var del = document.createElement("a");
// 整個li的樣式
test.style.backgroundColor = "#ffffff";
test.style.width = "100%";
test.style.height = ".426667rem";
test.style.listStyle = "none";
test.style.borderLeft = " 5px solid #629A9C";
test.style.borderRadius = "3px";
test.style.position = "relative";
ing.appendChild(test);
//用於計數器的計數操作
var len = $(".ing :checkbox").length + 1;
ing_dex.innerHTML = len;
// 選擇框
inp.type = "checkbox";
inp.style.width = ".293333rem";
inp.style.height = ".293333rem";
inp.style.position = "absolute";
inp.style.left = ".133333rem";
inp.style.top = ".066667rem";
inp.style.cursor = "pointer";
test.appendChild(inp);
// 文字顯示區域
test2.type = "text";
test2.style.width = "5.653333rem";
test2.style.height = ".346667rem";
test2.style.position = "absolute";
test2.style.border = "none";
test2.style.left = ".533333rem";
test2.style.top = ".04rem";
// test2.readOnly = "readOnly";
test2.style.fontSize = ".16rem";
test2.style.cursor = "move";
test2.value = text.value;
text.value = "";
test.appendChild(test2);
//後面的按鈕
del.style.position = "absolute";
del.style.top = ".066667rem";
del.style.right = ".066667rem";
del.style.display = "inline-block";
del.style.width = ".346667rem";
del.style.height = ".32rem";
del.style.borderRadius = "50%";
del.style.border = ".08rem double #FFF";
del.style.background = "#CCC";
del.style.lineHeight = ".32rem";
del.style.textAlign = "center";
del.style.color = "#FFF";
del.style.fontWeight = "bold";
del.style.fontSize = ".186667rem";
del.style.cursor = "pointer";
test.appendChild(del);
}
}
- 當按下之後添加節點,然後對節點中的元素進行點擊事件的添加:
// 文本顯示區域
test2.onclick = function() {
//改變鼠標的樣式
test2.style.cursor = "pointer";
}
test2.onmouseleave = function() {
test2.style.cursor = "move";
}
// 點擊全部清除
clear.onclick = function() {
$(".ing li").remove();
$(".success li").remove();
localStorage.clear();
//計數器歸零
ing_dex.innerHTML = 0;
suc_dex.innerHTML = 0;
}
// 點擊每一個li後面的a標籤
$(".ing li a").click(function() {
$(this).parent().remove();
//通過長度來進行計數器的添加
var lenth = $(".ing :checkbox").length;
ing_dex.innerHTML = lenth;
});
// 點擊li元素的前面的選擇框
$(".ing li input[type^=check]").click(function() {
$(this).parent().remove();
$(".success").append($(this).parent());
var len = $(".success :checkbox").length;
suc_dex.innerHTML = len;
var lenth = $(".ing :checkbox").length;
ing_dex.innerHTML = lenth;
$(".success li,input").css("backgroundColor", "#e6e6e6");
//當添加到已完成下面時,取消其選擇框的點擊事件
$(".success li input[type^=check]").click(function() {
return false;
});
// 點擊第二個完成裏面的a
$(".success li a").click(function() {
$(this).parent().remove();
var len = $(".success :checkbox").length;
suc_dex.innerHTML = len;
});
});
這樣簡單的一個計事工具就完成了,添加數據存儲本地的功能,明天進行更新…