最近再学习了一下es6语法,跟着学习了一个小demo
黑马前端js高级(含es6)–pink老师](https://www.bilibili.com/video/BV17y4y1J7L1?p=41) 主要完成了p41到p44的练习
直接上代码吧…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.top{
width: 700px;
height: 50px;
margin: 10px auto;
}
input{
width: 80px;
}
.main{
width:700px;
height: 1000px;
margin: 0 auto;
text-align: center;
padding: 30px;
}
</style>
</head>
<body>
<div class="top">
按照价格查询:
<input type="text" class="start" />-<input type="text" class="end"/>
<button class="seach">搜索</button>
按照名称查询:<input type="text" class="product"/>
<button class="query">查询</button>
</div>
<div class="main">
<table border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>产品价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
// 商品的数组
var data=[{
id:'1',
name:'iphone',
price:2000
},
{
id:'2',
name:'thinkpad',
price:6000
},
{
id:'3',
name:'notebook',
price:4000
},
{
id:'4',
name:'mac',
price:10000
}
]
// 获得一些dom元素
var tbody=document.querySelector('tbody');
var seach=document.querySelector('.seach');
var query=document.querySelector('.query');
var start=document.querySelector('.start');
var product=document.querySelector('.product');
var end=document.querySelector('.end');
// 没有封装之前的遍历
// data.forEach((val)=>{
// // console.log(val)
// tr=document.createElement('tr');
// tr.innerHTML='<td>'+val.id+'</td>'+
// '<td>'+val.name+'</td>'+'<td>'+val.price+'</td>';
// tbody.appendChild(tr)
// }),
//把遍历的方法封装一下,并渲染一下页面
function setDate(mydate){
// 先清空原来tobody里面的内容
tbody.innerHTML=' ';
mydate.forEach((val)=>{
// console.log(val)
tr=document.createElement('tr');
tr.innerHTML='<td>'+val.id+'</td>'+
'<td>'+val.name+'</td>'+'<td>'+val.price+'</td>';
tbody.appendChild(tr)
}
)
}
// 遍历数组
setDate(data);
seach.addEventListener('click',function(){
// 过滤符合条件的新数组
var newdata=data.filter(function(value){
return value.price>=start.value&& value.price<=end.value;
})
// console.log(newdata)
// 把新数组进行再次遍历
setDate(newdata)
})
// 根据商品名称查找元素
query.addEventListener('click',function(){
var arr=[];
data.some((val)=>{
// some方法找到该元素后就会终止循环,效率更高
if(val.name===product.value){
arr.push(val)
return true;
//终止循环
}
});
setDate(arr)
})
</script>
</body>
</html>
里面的css样式的确写的很粗糙,但主要是进行一些js练习的。。。