目录
三、输入价格后失去焦点就展示符合条件的商品,没有符合条件的商品就弹框提示
一、排他思想
<body>
<ul>
<li>白云千载空悠悠</li>
<li>白云千载空悠悠</li>
<li>白云千载空悠悠</li>
<li>白云千载空悠悠</li>
<li>白云千载空悠悠</li>
<li>白云千载空悠悠</li>
</ul>
<script>
//排他思想
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
for (var j = 0; j < lis.length; j++) {
lis[j].style.backgroundColor = ''
}
this.style.backgroundColor = 'red'
}
}
</script>
</body>
二、 动态创建表格,随意删除每条数据
<!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>
tr {
background-color: white;
}
th {
width: 100px;
}
table {
margin: 0 auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<table bgcolor="black" cellspacing="1px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>家庭住址</th>
<th>操作</th>
</tr>
<tbody>
</tbody>
</table>
</div>
<script>
var tbody = document.querySelector('tbody')
var lis = [{ 'name': '张三', 'sex': '男', 'address': '上海1' },
{ 'name': '张三', 'sex': '男', 'address': '上海2' },
{ 'name': '张三', 'sex': '男', 'address': '上海3' },
{ 'name': '张三', 'sex': '男', 'address': '上海4' },
{ 'name': '张三', 'sex': '男', 'address': '上海5' }]
for (var i = 0; i < lis.length; i++) {
var tr = document.createElement('tr') //创建行
for (var k in lis[i]) {
var td = document.createElement('td') //创建列,用于填充lis中的数据
td.innerHTML = lis[i][k]
tr.appendChild(td)
}
var td = document.createElement('td') //创建列
td.innerHTML = '<a href="javascript:;">删除</a>'
tr.appendChild(td) //再创建列,在每行最后添加一列a标签
tbody.appendChild(tr)
}
var as = document.querySelectorAll('a') //删除功能
for (var i = 0; i < as.length; i++) {
as[i].onclick=function(){
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>
三、输入价格后失去焦点就展示符合条件的商品,没有符合条件的商品就弹框提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<span> 请输入手机价格(输入能接受的最高价值):</span>
<input type="text" autofocus>
<ul>
</ul>
</div>
<script>
var arr = [
{
name: '小米',
price: 2999,
},
{
name: '红米',
price: 2000,
},
{
name: '魅族',
price: 2599,
},
{
name: '华为',
price: 7999,
},
{
name: '荣耀',
price: 2899,
},
{
name: '联想',
price: 999,
},
{
name: '三星',
price: 9999,
},
{
name: '苹果',
price: 7999,
},
{
name: '诺基亚',
price: 299,
},
{
name: 'vivo',
price: 2399,
},
{
name: 'oppo',
price: 2499,
},
]
var ul = document.querySelector('ul')
var input = document.querySelector('input')
input.onblur = function () {
ul.innerHTML = '' //输入前先清空
var newArr = arr.filter(function (item) { //筛选低于最高值
return item.price <= input.value
})
if (newArr.length != 0) {
newArr.forEach(function (item) {
var li = document.createElement('li') //创建li用来填充数据
ul.appendChild(li)
li.innerHTML = item.name + item.price
})
} else {
alert('没有符合的')
}
}
</script>
</body>
</html>
四、评论
<!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>
div {
width: 500px;
background-color: rgb(176, 180, 184);
}
/* ul{
background-color: aquamarine;
} */
button {
width: 50px;
height: 25px;
border-radius: 20%;
background-color: coral;
}
input {
display: inline-block;
border-radius: 25%;
height: 30px;
}
p {
background-color: rgb(237, 157, 65);
height: 50px;
padding-top: 10px;
padding-left: 10px;
}
a {
color: rgb(219, 210, 210);
}
a:hover {
color: darkorchid;
}
</style>
</head>
<body>
<div>
<p>
<input type="text"> <button>评论</button>
</p>
<ul>
</ul>
</div>
<script>
var input = document.querySelector('input')
var ul = document.querySelector('ul')
var btn = document.querySelector('button')
btn.onclick = function () {
if (!input.value) {
alert('请输入内容')
} else {
var li = document.createElement('li')
li.innerHTML = input.value + ' ' + '<a>删除</a>' + '<br/>' + getTime()
ul.insertBefore(li, ul.children[0])
}
input.value = ''
var la = document.getElementsByTagName('a')
for (var i = 0; i < la.length; i++) {
la[i].onclick = function () {
ul.removeChild(this.parentNode)
}
}
}
function getTime() {
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return year + '-' + month + '-' + day + '-' + ' ' + hour + ':' + minute + ':' + seconds
}
</script>
</body>
</html>
<!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>
div{
width: 50px;
height: 50px;
background-color: gray;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>古诗</div>
<div>散文</div>
<div>小说</div>
<div>故事</div>
<div>阅读</div>
<script>
var divs=document.querySelectorAll('div')
for(var i=0;i<divs.length;i++){
divs[i].onmouseover=function(){
this.style.backgroundColor='red'
this.style.color='white'
}
divs[i].onmouseout=function(){
this.style.backgroundColor='gray'
this.style.color='black'
}
}
</script>
</body>
</html>