提示框
初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。
效果预览
GIF图太大,请点击链接
HTML 部分
<!-- 任务输入框 -->
<div id="myDIV" class="header">
<h2>任务清单</h2>
<input type="text" id="myInput" placeholder="请输入任务">
<span id="addButton" class="addBtn">添加</span>
</div>
<!-- 任务列表 -->
<ul id="myUL">
<li>七点半起床</li>
<li class="checked">洗漱</li>
<li>去上班</li>
<li>完成报表</li>
<li>和小明吃午饭</li>
<li>去超市</li>
</ul>
CSS 部分
/* 把padding和border算入宽度 */
* {
box-sizing: border-box;
}
/* 消除List里的margin和padding */
ul {
margin: 0;
padding: 0;
}
/* 设置li样式 */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
user-select: none; /*用户不能文本选中*/
}
/* 奇数li颜色不同,为了美观 */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* hover时背景色改变 */
ul li:hover {
background: #ddd;
}
/* 当被选中,文字中加横线 */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* 为被选中的li增加 “对勾” 图标 */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* 关闭按钮样式 */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px
}
.close:hover {
background-color: #f44336;
color: white;
}
/* 头部样式 */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}
/* 清除浮动 */
.header:after {
content: "";
display: table;
clear: both;
}
/* 输入框样式 */
input {
border: none;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
outline: 0;
}
/* “添加”按钮样式 */
.addBtn {
padding: 9px 10px 8px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
JavaScript 部分
(function() {
var i; /*index*/
/*为每个li后面加上关闭按钮*/
function closeBtn() {
var myNodelist = document.getElementsByTagName("li");
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("span");
var txt = document.createTextNode("\u00D7"); /*unicode代码*/
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
}
/*点击关闭按钮,隐藏当前li*/
function closeElement() {
var close = document.getElementsByClassName("close");
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement; /*关闭按钮的父元素 - li*/
div.style.display = "none";
}
}
}
/*点击li的时候,加上.checked,再点击则取消*/
function ifChecked() {
var list = document.querySelector('ul');
list.onclick = function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}
}
/*点击添加时,创建一个新的ul*/
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("请先输入一个具体任务。");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = ""; /*清空输入*/
}
/*初始化list*/
function initList() {
closeBtn();
closeElement();
ifChecked();
}
/*初始化*/
function init() {
var addButton = document.getElementById("addButton");
initList();
/*添加按钮点击时执行*/
addButton.onclick = function() {
newElement();
initList();
}
/*按回车时亦执行*/
document.onkeydown = function(event) {
if(event.keyCode == 13) {
newElement();
initList();
}
}
}
init();
})();
好啦,现在所有的代码都写完啦!
赶快打开浏览器,看看效果吧!
在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。