一、案例要求
要求1:在搜索框输入的文本信息在点击“搜索”按钮之后会在页面下方按搜索时间由近到远显示
要求2:在不输入任何信息时点击“搜索”按钮搜索输入框中的提示文本内容
要求3:再次打开页面时显示之前搜索的内容
要求4:点击“清空”时,清空搜索记录;再次打开页面时也不显示搜索记录
二、思路方法
1.整体思路
- 获取input输入框、button按钮、history div元素节点
- 设置点击事件监听器进行操作
2.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
.container {
width: 400px;
margin: auto;
padding: 20px 10px;
}
.search {
position: relative;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}
input {
padding: 0 20px;
width: 75%;
line-height: 25px;
border-radius: 15px;
font-size: 14px;
outline: none;
border: 1px solid #eaeaea;
}
button {
height: 25px;
border-radius: 8px;
border: none;
position: absolute;
top: 1px;
right: 5px;
color: #ffffff;
background-color: tomato;
}
.nav {
position: relative;
}
span {
cursor: pointer;
position: absolute;
top: 15px;
right: 5px;
}
h3 {
display: inline-block;
}
a {
padding: 0 10px;
margin: 5px;
line-height: 25px;
border-radius: 5px;
color: #fff;
background-color: rgba(91, 94, 92, 0.6);
font-size: 14px;
display: inline-block;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="search clearfix">
<input type="text" placeholder="程序员假发">
<button>搜索</button>
</div>
<div class="nav clearfix">
<h3>搜索记录</h3>
<span>清空</span>
</div>
<div class="history">
</div>
</div>
<script>
let ipt = document.querySelector('input')
let btn = document.querySelector('button')
let history = document.querySelector('.history')
let arr = []
btn.addEventListener('click', function () {
//在输入框没有进行输入时点击了按钮打印提示文本
if (ipt.value == '') {
console.log(ipt.placeholder);
}
//输入内容后点击按钮创建元素节点<a></a>用来显示搜索记录
else {
//获取输入框中输入的文本内容
let value = ipt.value
//创建元素节点<a></a>
let newA = document.createElement('a')
//a标签显示输入框输入的内容
newA.textContent = value
//搜索内容在搜索记录中按搜索时间由近到远显示
history.insertBefore(newA, history.childNodes[0])
//将搜索数据倒序存入数组arr
arr.unshift(value)
//使用本地存储将数据存储到本地
localStorage.setItem('arr', JSON.stringify(arr))
ipt.value = ''
}
})
arr = JSON.parse(localStorage.getItem('arr')) || []
arr.forEach(function (item, index) {
let newA = document.createElement('a')
newA.textContent = item
history.appendChild(newA)
})
let span = document.querySelector('span')
span.addEventListener('click', function () {
history.innerHTML = ''
arr = []
localStorage.removeItem('arr')
})
let a = document.querySelectorAll('a')
a.forEach(function (item) {
item.addEventListener('click', function () {
ipt.placeholder = this.textContent
})
})
</script>
</body>
</html>