榜單制作
任務(wù)
做個(gè)可以點(diǎn)擊的榜單，使用數(shù)組的方法排序。
排除小于100000的，還要計(jì)算總數(shù)。
我的成品
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>加倍財(cái)富</button><br>
<button>富豪排行</button><br>
<button>僅顯示百萬(wàn)+富豪</button><br>
<button>計(jì)算全部財(cái)富</button><br>
</div>
<div class="box2">
<div class="box3">
<span>姓名</span>
<span>財(cái)富</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>
作業(yè)2
給一堆數(shù)據(jù)排序比較，并且渲染在頁(yè)面上
效果
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, '開(kāi)發(fā)', '45000'],
['于光', '山西', 42, '開(kāi)發(fā)', '35000'],
['賈雋仙', '遼寧', 60, '市場(chǎng)', '38000'],
['賈燕青', '吉林', 20, '銷售', '40000'],
['劉振杰', '浙江', 40, '開(kāi)發(fā)', '41000'],
['郭衛(wèi)東', '江蘇',49, '銷售', '32000'],
['崔紅宇', '浙江', 26, '開(kāi)發(fā)', '38000'],
['馬福平', '福建', 44, '市場(chǎng)', '46000'],
['馮紅', '安徽', 36, '銷售', '42000'],
['崔敬偉', '江西', 29, '開(kāi)發(fā)', '34000'],
['穆增志', '山東', 45, '經(jīng)理', '49000'],
['謝志威', '江蘇', 35, '開(kāi)發(fā)', '39000'],
['呂金起', '浙江', 26, '市場(chǎng)', '46000'],
['韓云慶', '浙江', 35, '銷售', '40000'],
['魯全福', '吉林', 54, '市場(chǎng)', '46000'],
['郭建立', '江蘇', 23, '開(kāi)發(fā)', '39000'],
['郝連水', '浙江', 43, '銷售', '40000'],
['閆智勝', '吉林', 30, '開(kāi)發(fā)', '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 + '的年齡超過(guò)30'
console.log(people.map(x=>{
return x.filter(function(x,index){
return index < 2
})
}))
</script>
</body>
</html>
作業(yè)三
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>發(fā)貨日期</th>
<th>已發(fā)貨</th>
<th>已購(gòu)商品</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數(shù)組中的數(shù)據(jù)渲染到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)在沒(méi)有發(fā)貨的訂單中查找customerId為234的所有訂單(delivered:已發(fā)貨)
console.log(orders.filter(x=>{
return x.customerId == 234 && !x.delivered
}))
//3）在orders數(shù)組的每個(gè)元素上添加一個(gè)新屬性orderTotal:存儲(chǔ)訂購(gòu)項(xiàng)items的總金額
orders.forEach(x=>{
x.items.forEach(i=>{
num += i.price
})
x.orderTotal = num
})
//4)查詢所有的訂單是否已發(fā)貨
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>
作業(yè)四
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: '衛(wèi)東', 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: '講個(gè)笑話：第四季都已經(jīng)拍完了，我們還在看第二季第二集' },
{ userId: '7f053852-7440-4e44-838c-ddac24611050', text: '把饑餓調(diào)成現(xiàn)在的五倍，拼命的生產(chǎn)跟搶殺，這才是真正的文明發(fā)展。而不是烏托邦，無(wú)所事事，坐等采訪' },
{ userId: 'e789565f-fa5a-4d5e-8f6c-dd126cf995be', text: '我雪原的給水猴干死了=-=，在家狗了兩天半當(dāng)釣魚佬 最后一點(diǎn)時(shí)間想出去看看就給干死了 不過(guò)看到最后哥們id在參與名單第一個(gè)[嗑瓜子]開(kāi)心 ??' },
{ userId: '7f053852-7440-4e44-838c-ddac24611050', text: '你是誰(shuí)呀？我什么時(shí)候關(guān)注的你？' },
{ userId: 'b4a306cb-8b95-4f85-b9f8-434dbe010985', text: '有個(gè)不成熟的小建議，如果還有模擬的話，不要搞國(guó)家，隨機(jī)放人，讓玩家自己建國(guó)吞并，再搞點(diǎn)遺跡和裝備技能，搞個(gè)戰(zhàn)略rpg模擬' },
{ userId: '9e525c2d-6fcd-4d88-9ac4-a44eaf3a43e6', text: '爺爺，你關(guān)注的up更新了 ??' },
{ userId: '6ee904be-e3b0-41c9-b7a2-5a0233c38e4c', text: '感謝巫山，讓我追番還有了談戀愛(ài)的感覺(jué)' },
{ userId: '9e525c2d-6fcd-4d88-9ac4-a44eaf3a43e6', text: '看著這個(gè)視頻，男孩無(wú)奈道:太太太爺爺，您等的視頻來(lái)了。我:我去，終于來(lái)了，快給我看看，我吊著這口氣為的就是這個(gè)視頻??！' },
{ userId: '58a1e37b-4b15-47c1-b95b-11fe016f7b64', text: '巫山！我以為你忘了還有更新這回事呢??' },
{ userId: '6ee904be-e3b0-41c9-b7a2-5a0233c38e4c', text: '居然沒(méi)說(shuō)巫山因?yàn)椴僮魇д`誤傷大批舊大陸成員的事' },
];
var ul = document.querySelector('ul')
var str = ''
//題1：把評(píng)論渲染到頁(yè)面上（帶用戶名和用戶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：查一查，是誰(shuí)寫了第一條評(píng)論？
var ftext = users.find(x=>{
return x.id == comments[0].userId
})
console.log(ftext.lastName + ftext.firstName)
//題4：評(píng)論中'你是誰(shuí)呀？我什么時(shí)候關(guān)注的你？'是哪個(gè)用戶寫的？
var nm = comments.find(x=>{
return x.text == '你是誰(shuí)呀？我什么時(shí)候關(guān)注的你？'
})
var nmm = users.find(x=>{
return x.id == nm.userId
})
console.log(nmm.lastName + nmm.firstName)
//題5：查詢沒(méi)有發(fā)表評(píng)論的用戶列表
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>
