榜单制作
任务
做个可以点击的榜单，使用数组的方法排序。
排除小于100000的，还要计算总数。
我的成品
image.png
代码：
<!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>
h1 {
text-align: center;
}
.box {
width: 600px;
}
.box4 {
width: 600px;
display: flex;
}
.box1 {
width: 200px;
margin-right: -3px;
border-right: 3px solid #666;
}
.box1 button {
width: 180px;
margin: 10px auto;
height: 40px;
outline: none;
}
.box3 {
height: 30px;
line-height: 30px;
width: 400px;
display: flex;
justify-content: space-between;
padding-left: 10px;
border-left: 3px solid #666;
}
.box6{
background-color: aqua;
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<h1>富豪排行榜</h1>
<div class="box4">
<div class="box1">
<button>增加富豪</button><br>
<button>加倍财富</button><br>
<button>富豪排行</button><br>
<button>仅显示百万+富豪</button><br>
<button>计算全部财富</button><br>
</div>
<div class="box2">
<div class="box3">
<span>姓名</span>
<span>财富</span>
</div>
</div>
</div>
</div>
<script>
const btn = document.querySelectorAll('button')
const box = document.querySelector('.box2')
var fh = []
var rm = ['小王', '小李', '小张', '小杜', '小陈']
var rmb = ''
var np = ''
var Armb = 0
var txt = box.innerHTML
btn[0].addEventListener('click', function () {
for (var i = 0; i < 6; i++) {
np += Math.floor(Math.random() * 10)
}
fh[fh.length] = [rm[Math.floor(Math.random() * 5)],np*1,]
np = ''
fh.forEach(x=>{
rmb += '<div class="box3">'
x.forEach(i=>{
rmb += `<span>${i}</span>`
})
rmb += '</div>'
})
box.innerHTML = txt
box.innerHTML += rmb
rmb = ''
})
btn[2].addEventListener('click',function(){
fh.sort(function(a,b){
return a[1] < b[1]
})
fh.forEach(x=>{
rmb += '<div class="box3">'
x.forEach(i=>{
rmb += `<span>${i}</span>`
})
rmb += '</div>'
})
box.innerHTML = txt
box.innerHTML += rmb
rmb = ''
})
btn[1].addEventListener('click',function(){
fh.forEach(x=>{
x[1] = x[1]*2
})
fh.forEach(x=>{
rmb += '<div class="box3">'
x.forEach(i=>{
rmb += `<span>${i}</span>`
})
rmb += '</div>'
})
box.innerHTML = txt
box.innerHTML += rmb
rmb = ''
})
btn[3].addEventListener('click',function(){
fh = fh.filter(x=>{
return x[1]*1 > 1000000
})
fh.forEach(x=>{
rmb += '<div class="box3">'
x.forEach(i=>{
rmb += `<span>${i}</span>`
})
rmb += '</div>'
})
box.innerHTML = txt
box.innerHTML += rmb
rmb = ''
})
btn[4].addEventListener('click',function(){
fh.forEach(x=>{
Armb += x[1]*1
})
fh.forEach(x=>{
rmb += '<div class="box3">'
x.forEach(i=>{
rmb += `<span>${i}</span>`
})
rmb += '</div>'
})
box.innerHTML = txt
box.innerHTML += rmb + '<div class = "box6">总金额：' + Armb + '元</div>'
rmb = ''
Armb = 0
})
</script>
</body>
</html>
作业2
给一堆数据排序比较，并且渲染在页面上
效果
image.png
代码：
<!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>
</head>
<body>
<div class="box1" >
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>籍贯</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
</tr>
</thead>
<tbody class="box">
</tbody>
</table>
</div>
<script>
const people = [
['王志芳', '河北', 35, '开发', '45000'],
['于光', '山西', 42, '开发', '35000'],
['贾隽仙', '辽宁', 60, '市场', '38000'],
['贾燕青', '吉林', 20, '销售', '40000'],
['刘振杰', '浙江', 40, '开发', '41000'],
['郭卫东', '江苏',49, '销售', '32000'],
['崔红宇', '浙江', 26, '开发', '38000'],
['马福平', '福建', 44, '市场', '46000'],
['冯红', '安徽', 36, '销售', '42000'],
['崔敬伟', '江西', 29, '开发', '34000'],
['穆增志', '山东', 45, '经理', '49000'],
['谢志威', '江苏', 35, '开发', '39000'],
['吕金起', '浙江', 26, '市场', '46000'],
['韩云庆', '浙江', 35, '销售', '40000'],
['鲁全福', '吉林', 54, '市场', '46000'],
['郭建立', '江苏', 23, '开发', '39000'],
['郝连水', '浙江', 43, '销售', '40000'],
['闫智胜', '吉林', 30, '开发', '39000']
]
var box = document.querySelector('.box')
var box1 = document.querySelector('.box1')
people.sort(function(a,b){
return a[2] > b[2]
})
var nb = ''
people.forEach(x=>{
nb += '<tr>'
x.forEach(y=>{
nb += `<td>${y}</td>`
})
nb += '</tr>'
})
box.innerHTML = `<table border = '1'>${nb}</table>`
var num = 0
people.map(x=>{
num += x[4]*1
})
box1.innerHTML+= '<p>平均工资：' + num/people.length + '元</p>'
var vName = ''
people.filter(x=>{
return x[2] > 30
}).map(x=>{
return vName += x[0] + '，'
})
box1.innerHTML += '<p>' + vName + '的年龄超过30'
console.log(people.map(x=>{
return x.filter(function(x,index){
return index < 2
})
}))
</script>
</body>
</html>
作业三
1666350302920.jpg
image.png
我的代码
<!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>
</head>
<body>
<table>
<thead>
<tr>
<th>订单ID</th>
<th>客户ID</th>
<th>发货日期</th>
<th>已发货</th>
<th>已购商品</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const orders = [
{
orderId: '123',
customerId: '123',
deliveryDate: '2020-1-1',
delivered: true,
items: [
{ productId: '123', price: 55 },
{ productId: '234', price: 30 },
]
},
{
orderId: '234',
customerId: '234',
deliveryDate: '2020-1-2',
delivered: false,
items: [
{ productId: '234', price: 30 },
]
},
{
orderId: '345',
customerId: '234',
deliveryDate: '2020-1-5',
delivered: true,
items: [
{ productId: '567', price: 30 },
{ productId: '678', price: 80 },
]
},
{
orderId: '456',
customerId: '345',
deliveryDate: '2020-6-9',
delivered: true,
items: [
{ productId: '789', price: 12 },
{ productId: '890', price: 90 },
],
orderTotal: 102
},
{
orderId: '578',
customerId: '456',
deliveryDate: '2020-7-7',
delivered: true,
items: [
{ productId: '901', price: 43 },
{ productId: '123', price: 55 },
]
},
];
var num = 0
var str = ''
//1)：把orders数组中的数据渲染到DOM中（用表格）
orders.forEach(x=>{
str += `<tr><td>${x.orderId}</td><td>${x.customerId}</td><td>${x.deliveryDate}</td><td>${x.delivered ? '是' : '否'}</td>`
str += '<td><table>'
x.items.forEach(i=>{
str += '<tr>'
str += `<td>${i.productId}</td><td>${i.price}</td>`
str += '</tr>'
})
str += '</td></table>'
str += '</tr>'
})
var box = document.querySelector('tbody')
box.innerHTML = str
//2)在没有发货的订单中查找customerId为234的所有订单(delivered:已发货)
console.log(orders.filter(x=>{
return x.customerId == 234 && !x.delivered
}))
//3）在orders数组的每个元素上添加一个新属性orderTotal:存储订购项items的总金额
orders.forEach(x=>{
x.items.forEach(i=>{
num += i.price
})
x.orderTotal = num
})
//4)查询所有的订单是否已发货
console.log(orders.every(x=>{
return x.delivered
}))
//查询是否有customerId为123的订单？
var nppp = orders.find(x=>{
return x.customerId === '123'
})
console.log(nppp)
//查询是否有productId为123的订单？
console.log(orders.find(x=>{
return x.items.find(i=>{
return i.productId === '123'
})
}))
</script>
</body>
</html>
作业四
image.png
我的代码
<!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>
</head>
<body>
<div class="comments">
<ul>
</ul>
</div>
<script>
const users = [
{ id: '88f24bea-3825-4237-a0d1-efb6b92d37a4', firstName: '志芳', lastName: '王' },
{ id: '2a35032d-e02b-4508-b3b5-6393aff75a53', firstName: '燕青', lastName: '贾' },
{ id: '7f053852-7440-4e44-838c-ddac24611050', firstName: '振杰', lastName: '刘' },
{ id: 'd456e3af-596a-4224-b1dc-dd990a34c9cf', firstName: '卫东', lastName: '郭' },
{ id: '58a1e37b-4b15-47c1-b95b-11fe016f7b64', firstName: '红宇', lastName: '崔' },
{ id: 'b4a306cb-8b95-4f85-b9f8-434dbe010985', firstName: '福平', lastName: '马' },
{ id: '6ee904be-e3b0-41c9-b7a2-5a0233c38e4c', firstName: '红', lastName: '冯' },
{ id: '7f0ce45a-bdca-4067-968b-d908e79276ce', firstName: '敬伟', lastName: '崔' },
{ id: '9e525c2d-6fcd-4d88-9ac4-a44eaf3a43e6', firstName: '增志', lastName: '穆' },
{ id: 'e789565f-fa5a-4d5e-8f6c-dd126cf995be', firstName: '志威', lastName: '谢' },
];
const comments = [
{ userId: '88f24bea-3825-4237-a0d1-efb6b92d37a4', text: '讲个笑话：第四季都已经拍完了，我们还在看第二季第二集' },
{ userId: '7f053852-7440-4e44-838c-ddac24611050', text: '把饥饿调成现在的五倍，拼命的生产跟抢杀，这才是真正的文明发展。而不是乌托邦，无所事事，坐等采访' },
{ userId: 'e789565f-fa5a-4d5e-8f6c-dd126cf995be', text: '我雪原的给水猴干死了=-=，在家狗了两天半当钓鱼佬 最后一点时间想出去看看就给干死了 不过看到最后哥们id在参与名单第一个[嗑瓜子]开心 😲' },
{ userId: '7f053852-7440-4e44-838c-ddac24611050', text: '你是谁呀？我什么时候关注的你？' },
{ userId: 'b4a306cb-8b95-4f85-b9f8-434dbe010985', text: '有个不成熟的小建议，如果还有模拟的话，不要搞国家，随机放人，让玩家自己建国吞并，再搞点遗迹和装备技能，搞个战略rpg模拟' },
{ userId: '9e525c2d-6fcd-4d88-9ac4-a44eaf3a43e6', text: '爷爷，你关注的up更新了 😉' },
{ userId: '6ee904be-e3b0-41c9-b7a2-5a0233c38e4c', text: '感谢巫山，让我追番还有了谈恋爱的感觉' },
{ userId: '9e525c2d-6fcd-4d88-9ac4-a44eaf3a43e6', text: '看着这个视频，男孩无奈道:太太太爷爷，您等的视频来了。我:我去，终于来了，快给我看看，我吊着这口气为的就是这个视频啊！' },
{ userId: '58a1e37b-4b15-47c1-b95b-11fe016f7b64', text: '巫山！我以为你忘了还有更新这回事呢😀' },
{ userId: '6ee904be-e3b0-41c9-b7a2-5a0233c38e4c', text: '居然没说巫山因为操作失误误伤大批旧大陆成员的事' },
];
var ul = document.querySelector('ul')
var str = ''
//题1：把评论渲染到页面上（带用户名和用户ID）
comments.forEach((x,i)=>{
var np = users.find(p=>{
return p.id == x.userId
})
str += `<li>${x.text}_${np.lastName}${np.firstName}_${np.id}</li>`
})
ul.innerHTML = str
//题2：用户马福平的userId是多少？
var mfp = users.find(x=>{
return x.firstName == '福平' && x.lastName == '马'
})
console.log(mfp.id)
//题3：查一查，是谁写了第一条评论？
var ftext = users.find(x=>{
return x.id == comments[0].userId
})
console.log(ftext.lastName + ftext.firstName)
//题4：评论中'你是谁呀？我什么时候关注的你？'是哪个用户写的？
var nm = comments.find(x=>{
return x.text == '你是谁呀？我什么时候关注的你？'
})
var nmm = users.find(x=>{
return x.id == nm.userId
})
console.log(nmm.lastName + nmm.firstName)
//题5：查询没有发表评论的用户列表
var str2 = ''
users.forEach(x=>{
if(comments.every(i=>{
return x.id !== i.userId
})){
str2 += x.lastName + x.firstName + '|'
}
})
var np5 = document.querySelector('.comments')
np5.innerHTML += str2
</script>
</body>
</html>
