摘要:本篇教程介绍了JavaScript基础教程之记忆小便签,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript基础教程之记忆小便签,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
<
这是一个小小的网页记忆便签,长这个样子。
一、怎么用
可以用它来记录自己的待办事项,首先在任务栏输入要添加的事项名称,点击添加事项就会自动加入待办列表里。
然后在事件列表里。可以对该事件进行操作,如果已经完成了这件事,点击事件名,事件就会被划掉(再次点击取消划线)。点击事件右侧的小叉,这个事件就会被完全删掉。
二、如果实现
HTML结构:
<div id="todoList">
<div class="todoList-header">
<h2>待办事项</h2>
<div class="todoList-operation">
<input type="text" id="add-task-input" placeholder="任务名称">
<button id="js-add-task" type="button">添加任务</button>
</div>
</div>
<ul class="todoList-content">
<li class="task checked">
<p class="text">观看《我不是药神》</p>
<span class="close">x</span>
</li>
<li class="task">
<p>准备工作汇报资料</p>
<span class="close">x</span>
</li>
<li class="task">
<p>背十个英文单词</p>
<span class="close">x</span>
</li>
<li class="task">
<p>三组腹肌撕裂者训练</p>
<span class="close">x</span>
</li>
</ul>
</div>
CSS:
* {
box-sizing: border-box;
}
ul, li, p{
margin: 0;
padding: 0;
list-style: none;
}
#todoList {
width: 80%;
max-width: 460px;
margin: 20px auto;
}
.todoList-header {
background-color: #c7eb62;
padding: 10px 30px 30px;
color: #434343;
text-align: center;
}
.todoList-operation {
position: relative;
padding-right: 110px;
}
.todoList-header input {
width: 100%;
padding: 10px;
font-size: 16px;
vertical-align: middle;
}
.todoList-header button {
position: absolute;
right: 0;
top: 0;
width: 110px;
border: none;
background: #d9d9d9;
text-align: center;
font-size: 16px;
padding: 10px;
}
.todoList-header button:hover {
background-color: #bbb;
}
.todoList-content li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 50px;
background: #eee;
font-size: 18px;
transition: 0.2s;
}
.todoList-content li:hover {
background: #ddd;
}
.todoList-content li.checked {
text-decoration: line-through;
}
.todoList-content li.checked::before {
content: ‘‘;
position: absolute;
border-color: #0eb312;
border-style: solid;
border-width: 0 4px 4px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 16px;
width: 7px;
}
.todoList-content .close {
position: absolute;
color: #000;
right: 0;
top: 0;
padding: 12px 15px 12px 15px;
}
.todoList-content .close:hover {
background-color: #f44336;
color: white;
}
Javascript
(一) 添加待办事项
主要流程是: 点击添加任务按钮——将预先设置的HTML模板及输入框里的文字,添加进事件列表里。最后再清空输入框里的文字。
var addTask = document.getElementById(‘js-add-task‘);
var taskInput = document.getElementById(‘add-task-input‘);
var task = document.getElementsByClassName(‘task‘);
var close = document.getElementsByClassName(‘close‘);
var todolist = document.querySelector(‘.todoList-content‘);
addTask.onclick = function (){
if(taskInput.value.length > 0){
var cont = ‘<li class="task">‘ + ‘<p>‘ + taskInput.value + ‘</P>‘ + ‘<span class="close">x</span>‘;
var elem = document.createElement(‘li‘);
var newElem = todolist.appendChild(elem);
newElem.outerHTML = cont;
taskInput.value = ‘‘;
} else {
alert(‘请输入任务名称‘);
}
};
(二)事项列表
已经处理的事项分为两种:1、点击添加划线。 2、点击取消划线。
点击事件项,对事件项<li>元素的class属性进行判定如果已经被打上checked的标记,取消划线;如果没有,则添加check标记。
由于事件处理器里的事件对象使用的是实际点击对象(event.target),就会造成点击到<li>元素的子元素,为此再额外增加一条判断,如果是子元素(由于<span>也是<li>的子元素,所以要先确定点击的目标是<p>),就找到它的父元素,再执行点击事件项的判断。
最后,判断点击如果是<span>,则删掉这一条事件项。
大功告成!
todolist.addEventListener(‘click‘, function(event){
switch(event.target.className){
case ‘task checked‘:
event.target.setAttribute(‘class‘, ‘task‘);
break;
case ‘task‘:
event.target.setAttribute(‘class‘, ‘task checked‘);
break;
}
if(event.target.nodeName == ‘P‘){
switch(event.target.parentNode.className){
case ‘task checked‘:
event.target.parentNode.setAttribute(‘class‘, ‘task‘);
break;
case ‘task‘:
event.target.parentNode.setAttribute(‘class‘, ‘task checked‘);
break;
}
} else if(event.target.nodeName == ‘SPAN‘) {
this.removeChild(event.target.parentNode);
}
}, false);
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号