这是官方web版的todolist的一个小小页面 http://www.todolist.cn/
其实会一些简单的js语法跟一些基本的DOM操作完全可以实现。
我这个无法保存数据,至少单纯实现效果。
这里是简单的css样式。
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.q {
width: 300px;
height: 400px;
border-radius: 20px;
border: 1px solid #9f9d9d;
margin: 50px auto;
}
.q1 {
width: 300px;
height: 40px;
border-radius: 20px;
background: black;
}
.qq {
/*background: rgba(255,255,255,0.2);*/
float: left;
margin-left: 15px;
color: white;
height: 40px;
line-height: 40px;
font-size: 18px;
font-weight: bold;
}
.qq1 {
margin-top: 5px;
float: right;
height: 30px;
width: 200px;
/*background: red;*/
position: relative;
overflow: hidden;
}
#a {
position: absolute;
height: 40px;
width: 150px;
top: -5px;
padding-left: 6px;
}
.dong {
width: 300px;
}
.d{
font-weight:bold ;
}
.dd{
width: 300px;
}
.dd li{
width: 300px;
height: 25px;
line-height: 25px;
}
这里开始是html
<div class="q">
<div class="q1">
<div class="qq">Todolist</div>
<div class="qq1">
<input type="text" name="" id="a" value="" />
</div>
</div>
<div class="dong">
<ul class="dd">
<li class="d">正在进行</li>
</ul>
<ul class="dd1">
<li class="d">已经完成</li>
</ul>
</div>
</div>
这里是js开始部分一一讲解。
<script type="text/javascript">
function huoqu(a) {
return document.getElementById(a);
};
function huoclass(a) {
return document.querySelector(a);
};
var aa = huoqu("a");
var v = huoclass(".q1");
var kk;
var dd = huoclass(".dd");
var dd1 = huoclass(".dd1");
a.onkeydown = function(a) {
var evt = window.event || arguments[0];
evt.keyCode == 13 ? (function() {
kk = aa.value;
aa.value = "";
chuangjian();
})() : (function(){return})();
}
var hh;
var kang;
var zi;
var i = 0;
var li = dd.getElementsByTagName("li");
var li1 = dd1.getElementsByTagName("li");
var h = 0;
function chuangjian() {
i += 1;
var cj = document.createElement("li");
cj.style.width = "300px";
cj.style.height = "25px";
cj.style.position = "relative";
cj.setAttribute("v", i);
cj.style.transition = "0.5s";
cj.style.opacity = "0";
var diandian = document.createElement("div");
diandian.style.width = "10px";
diandian.style.height = "10px";
diandian.style.border = "1px solid #9f9d9d";
diandian.style.marginTop = "7px";
diandian.style.marginLeft = "10px";
diandian.style.cursor = "pointer";
diandian.style.float = "left";
diandian.setAttribute("v", i);
diandian.οnmοuseοver=function(){
this.style.background="rgba(0,0,0,0.2)"
}
diandian.οnmοuseοut=function(){
this.style.background="rgba(0,0,0,0)"
}
var shanchu = document.createElement("div");
with(shanchu.style) {
position = "absolute";
right = "10px";
width = "30px";
height = "20px";
border = "1px solid #9f9d9d";
lineHeight = "20px";
color = "black";
fontSize = "12px";
textAlign = "center";
cursor = "pointer"
}
shanchu.setAttribute("v", i);
shanchu.innerHTML = "删除";
var inpzi = document.createElement("div");
inpzi.style.width = "200px";
inpzi.style.height = "25px";
inpzi.style.lineHeight = "25px";
inpzi.style.marginLeft = "20px";
inpzi.style.float = "left";
inpzi.innerHTML = kk;
cj.appendChild(shanchu);
cj.appendChild(diandian);
cj.appendChild(inpzi);
dd.appendChild(cj);
setTimeout(function() {
cj.style.opacity = "1";
}, 100)
shanchu.onclick = function() {
kang = this.getAttribute("v");
hh = Number(kang);
// alert(hh)
if(hh > 0) {
for(var i = 0; i < li.length; i++) {
if(kang == li[i].getAttribute("v")) {
dd.removeChild(li[i]);
}
}
} else {
// alert(1);
for(var i = 0; i < li1.length; i++) {
if(kang == li1[i].getAttribute("v")) {
dd1.removeChild(li1[i]);
}
}
}
}
diandian.onclick = function() {
zi = this.getAttribute("v");
h = Number(zi);
if(h > 0) {
for(var ii = 0; ii < li.length; ii++) {
if(zi == li[ii].getAttribute("v")) {
li[ii].setAttribute("v", -h);
this.setAttribute("v", -h);
shanchu.setAttribute("v", -h);
dd1.appendChild(li[ii]);
}
}
} else {
// alert(zi)
for(var ii = 0; ii < li1.length; ii++) {
if(zi == li1[ii].getAttribute("v")) {
li1[ii].setAttribute("v", -h);
shanchu.setAttribute("v", -h);
this.setAttribute("v", -h)
dd.appendChild(li1[ii]);
}
}
}
}
}
</script>