感覺(jué)藍(lán)橋杯的模擬賽一次比一次難了??
制作不易,代碼都是純手敲,覺(jué)得有幫助的伙伴們記得點(diǎn)個(gè)贊評(píng)論一下,謝謝大家支持??
話不多說(shuō)直接上答案
目錄
1、想不相等
2、三行情書(shū)
3、電影院在線訂票
4、老虎機(jī)
5、星際通訊
6、藍(lán)橋杯排位賽
7、拼出一個(gè)未來(lái)
8、超能英雄聯(lián)盟
HeroList.js
TeamList.js
9、萬(wàn)能合成臺(tái)
10、賬戶驗(yàn)證
1、想不相等
這里有個(gè)坑,題意說(shuō)如果不符合要求要拋出錯(cuò)誤'...',實(shí)際上只需要return即可,不需要用到throw語(yǔ)句,當(dāng)時(shí)這里卡了有一會(huì)
/**
* @param {string} val
* @return {Object}
*/
var expectFn = function(val) {
// TODO
return{
toBe(_val){
return val === _val || 'Not Equal'
},
notToBe(_val){
return val !== _val || 'Equal'
}
}
};
// console.log(expectFn(5).toBe(5)); // true
// console.log(expectFn(5).notToBe(5)); // "Equal"
// 檢測(cè)需要,請(qǐng)勿刪除
module.exports = expectFn;
2、三行情書(shū)
這題要注意的是,span標(biāo)簽原本為行內(nèi)元素,無(wú)法設(shè)置寬高,需要將span轉(zhuǎn)換為塊級(jí)元素
span {
font-size: 20px;
color: #837362;
/* TODO:補(bǔ)充下面的代碼 */
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
p {
color: #837362;
/* TODO:補(bǔ)充下面的代碼 */
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 3;
}
3、電影院在線訂票
/* TODO:
1. 完成數(shù)據(jù)請(qǐng)求,生成電影名,價(jià)格以及座位情況
2. 綁定點(diǎn)擊事件,實(shí)現(xiàn)訂票功能
*/
// 獲取座位區(qū)域節(jié)點(diǎn)
const seatAreaNode = document.getElementById("seat-area");
// 獲取電影名節(jié)點(diǎn)
const movieNameNode = document.getElementById("movie-name");
// 獲取電影票價(jià)節(jié)點(diǎn)
const moviePriceNode = document.getElementById("movie-price");
// 獲取已訂電影票數(shù)量節(jié)點(diǎn)
const count = document.getElementById("count");
// 獲取已訂電影票總價(jià)節(jié)點(diǎn)
const total = document.getElementById("total");
axios('./data.json').then(res=>{
let {data} = res
console.log(data);
movieNameNode.innerText = data.name
moviePriceNode.innerText = data.price
let tpl = ``
data.seats.map(item=>{
tpl+=`<div class="row">{{replace}}</div>`
let _tpl = ''
item.map(_item=>{
_tpl+=_item?`
<div class="seat occupied"></div>
`:`<div class="seat"></div>`
})
tpl = tpl.replace('{{replace}}',_tpl)
})
seatAreaNode.innerHTML = tpl
;[...document.getElementsByClassName('seat')].map(node=>{
if(![...node.classList].includes('occupied')){
node.onclick=function(){
if([...node.classList].includes('selected')){
node.classList.remove('selected')
count.innerHTML = parseInt(count.innerHTML) - 1
total.innerHTML = parseInt(total.innerHTML) - 20
}else{
node.classList.add('selected')
count.innerHTML = parseInt(count.innerHTML) + 1
total.innerHTML = parseInt(total.innerHTML) + 20
}
}
}
})
})
4、老虎機(jī)
這題如果讀懂題意還是很簡(jiǎn)單的,要r1、r2和r3減1即可
// GetResult 中獎(jiǎng)結(jié)果函數(shù),r1,r2,r3 為最后圖片停留位置,以第一列為例,最終顯示的元素是 sevenFirst 下的第 r 個(gè) li 元素。
GetResult(r1, r2, r3) {
// TODO 待補(bǔ)充代碼
let o1 = document.getElementById('sevenFirst').getElementsByTagName('li'),
o2 = document.getElementById('sevenSecond').getElementsByTagName('li'),
o3 = document.getElementById('sevenThird').getElementsByTagName('li'),
oTip = document.getElementsByClassName('textPanel')[0]
if(o1[r1-1].dataset.point == o2[r2-1].dataset.point == o3[r3-1].dataset.point){
oTip.innerHTML ='恭喜你,中獎(jiǎng)了'
}else{
oTip.innerHTML ='很遺憾,未中獎(jiǎng)'
}
}
}
5、星際通訊
這題難度還是比較簡(jiǎn)單的,因?yàn)閏odonTable里的key都是三位數(shù)的
/**
* @param {string} alienMessage 外星人的密文
* @return {string} 翻譯結(jié)果
*/
const translate = (alienMessage) => {
// TODO:待補(bǔ)充代碼
if(!alienMessage)return ""
if(alienMessage.length%3!=0)return"無(wú)效密語(yǔ)"
let strArr = [],
_str = '',
result = ''
for(let strIdx in alienMessage){
_str+=alienMessage[strIdx]
if(_str == 'XXI')break
if(_str.length == 3){
strArr.push(_str)
_str = ''
}
}
result+=(strArr.map(item=>codonTable[item])+'').replaceAll(',','')
if(result=='undefined' || !result)return "無(wú)效密語(yǔ)"
return result
};
6、藍(lán)橋杯排位賽
考察的是echart,直接上答案
const { createApp, ref, onMounted } = Vue;
const app = createApp({
setup() {
const chartsData = ref([]);
onMounted(() => {
// TODO:待補(bǔ)充代碼 請(qǐng)求數(shù)據(jù),并正確渲染柱形圖和地圖
fetch('./mock/map.json').then(res=>res.json()).then(res=>{
let schoolList = []
res.map(item=>{
item.school_power.map((item,idx)=>schoolList.push(item))
})
schoolList.sort((a,b)=>b.power-a.power)
schoolList.length = 10
showChartBar(schoolList);
showChinaMap(res);
})
});
// 展示柱狀圖
const showChartBar = (schoolList) => {
const myChart = echarts.init(document.getElementById('chart'));
let data = chartsData.value.map((item, index) => {
return item.school_power;
});
let result = data.flat(1).sort((a, z) => {
return z.power - a.power;
});
let arr = result.slice(0, 10);
let school = arr.map((item) => {
return item.name;
});
let power = arr.map((item) => {
return item.power;
});
// 指定配置和數(shù)據(jù)
const option = {
xAxis: {
type: 'category',
axisLabel: { interval: 0, rotate: 40 },
// TODO:待修改 柱狀圖 x 軸數(shù)據(jù) -> 前 10 學(xué)校名稱
data: schoolList.map(item=>item.name),
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
series: [
{
// TODO:待修改 柱狀圖 y 軸數(shù)據(jù)->學(xué)校戰(zhàn)力值
data: schoolList.map(item=>item.power),
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
},
itemStyle: {
color: '#8c7ae6',
},
},
],
};
// 把配置給實(shí)例對(duì)象
myChart.setOption(option);
// 根據(jù)瀏覽器大小切換圖表尺寸
window.addEventListener('resize', function () {
myChart.resize();
});
};
// 展示地圖
const showChinaMap = (data) => {
const chinaMap = echarts.init(document.getElementById('chinaMap'));
// 進(jìn)行相關(guān)配置
const mapOption = {
tooltip: [
{
backgroundColor: '#fff',
subtext: 'aaa',
borderColor: '#ccc',
padding: 15,
formatter: (params) => {
return (
params.name +
'熱度值:' +
params.value +
'<br>' +
params.data.school_count +
'所學(xué)校已加入備賽'
);
},
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#464646',
},
subtextStyle: {
fontSize: 12,
color: '#6E7079',
},
},
],
geo: {
// 這個(gè)是重點(diǎn)配置區(qū)
map: 'china', // 表示中國(guó)地圖
label: {
normal: {
show: false, // 是否顯示對(duì)應(yīng)地名
},
},
itemStyle: {
normal: {
borderColor: 'rgb(38,63,168)',
borderWidth: '0.4',
areaColor: '#fff',
},
emphasis: {
//鼠標(biāo)移入的效果
areaColor: 'rgb(255,158,0)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
visualMap: {
show: true,
left: 'center',
top: 'bottom',
type: 'piecewise',
align: 'bottom',
orient: 'horizontal',
pieces: [
{
gte: 80000,
color: 'rgb(140,122,230)',
},
{
min: 50000,
max: 79999,
color: 'rgba(140,122,230,.8)',
},
{
min: 30000,
max: 49999,
color: 'rgba(140,122,230,.6)',
},
{
min: 10000,
max: 29999,
color: 'rgba(140,122,230,.4)',
},
{
min: 1,
max: 9999,
color: 'rgba(140,122,230,.2)',
},
],
textStyle: {
color: '#000',
fontSize: '11px',
},
},
series: [
{
type: 'map',
geoIndex: 0,
// TODO:待修改 地圖對(duì)應(yīng)數(shù)據(jù)
data,
},
],
};
// 把配置給實(shí)例對(duì)象
chinaMap.setOption(mapOption);
};
return {
chartsData,
showChartBar,
showChinaMap,
};
},
});
app.mount('#app');
7、拼出一個(gè)未來(lái)
// 定義拖放事件的處理函數(shù)
function drop(event) {
// 檢查是否拖動(dòng)的拼圖塊不是當(dāng)前目標(biāo)拼圖塊
// draggedPiece 被拖動(dòng)的拼圖塊元素。this 目標(biāo)位置的拼圖塊元素。
if (draggedPiece !== this) {
// TODO:待補(bǔ)充代碼
let saveArr = [
[draggedPiece.children[0].src,draggedPiece.children[0].dataset.id]
,[this.children[0].src,this.children[0].dataset.id]
]
draggedPiece.children[0].src = saveArr[1][0]
draggedPiece.children[0].dataset.id = saveArr[1][1]
this.children[0].src = saveArr[0][0]
this.children[0].dataset.id = saveArr[0][1]
let imgDataIdList = [...document.getElementById('puzzle-container').getElementsByTagName('img')].map(item=>item.dataset.id)
console.log(imgDataIdList);
if(imgDataIdList == '1,2,3,4,5,6,7,8,9'){
document.getElementById('success-message').classList.remove('hide')
document.getElementById('success-message').classList.add('show')
}else{
document.getElementById('success-message').classList.remove('show')
document.getElementById('success-message').classList.add('hide')
}
}
// 重置正在拖動(dòng)的拼圖塊
draggedPiece = null;
}
8、超能英雄聯(lián)盟
這里我只改動(dòng)了兩個(gè)地方
HeroList.js
// TODO:補(bǔ)全代碼,實(shí)現(xiàn)目標(biāo)效果
const HeroList = {
template: `
<div class="hero-list">
<h2>可選英雄</h2>
<ul>
<li class="hero-item" v-for="(item,idx) in list">
<span>{{item.name}}</span>
<span>{{item.ability}}</span>
<span>{{item.strength}}</span>
<button @click="clickEvent(idx)" disabled v-if="item.btnInfo.disabled">
{{item.btnInfo.text}}</button>
<button @click="clickEvent(idx)" v-else="item.btnInfo.disabled">
{{item.btnInfo.text}}</button>
</li>
</ul>
</div>
`,
setup() {
let store = useHeroStore(),
list = ref([])
axios('./js/heroes.json').then(({data})=>{
data.map(item=>{
item.btnInfo = {
text:'添加至隊(duì)伍',
disabled:false
}
})
list.value = data
store.heroes = list.value
})
return{
list,
clickEvent(idx){
list.value[idx].btnInfo.text = '已添加'
list.value[idx].btnInfo.disabled = true
}
}
},
};
// TODOEnd
TeamList.js
// TODO:補(bǔ)全代碼,實(shí)現(xiàn)目標(biāo)效果
const TeamList = {
template: `
<div class="team-list">
<h2>我的隊(duì)伍</h2>
<ul>
<li class="team-item" v-for="(item,idx) in list">
<span>{{item.name}}</span>
<span>{{item.strength}}</span>
<button @click="removeHero(item,idx)">移除</button>
</li>
</ul>
<button class="sort-button" @click="sortStrength">按實(shí)力排序</button>
<p class="total-strength">當(dāng)前隊(duì)伍戰(zhàn)斗力:{{count}} </p>
</div>
`,
setup() {
let store = useHeroStore(),
list = Vue.ref([]),
count = Vue.ref(0)
Vue.watch(()=>store.heroes,nv=>{
count.value = 0
list.value = nv.filter(item=>{
if(item.btnInfo.disabled){
count.value += item.strength
return true
}
})
},{deep:true})
return {
list,
count,
removeHero(item,idx){
store.heroes[item.id-1].btnInfo.text = '添加至隊(duì)伍里'
store.heroes[item.id-1].btnInfo.disabled = false
},
sortStrength(){
list.value.sort((a,b)=>b.strength - a.strength)
},
}
},
};
// TODOEnd
9、萬(wàn)能合成臺(tái)
這題的含金量還是比較高,考察了很多方面的知識(shí)點(diǎn)
這題我選擇用了字符串來(lái)解文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-754217.html
// state 輔助記錄當(dāng)前合成欄內(nèi)容的全局變量
let state = [
['', '', ''],
['', '', ''],
['', '', '']
];
let targetItemName = ''; //輔助記錄當(dāng)前合成欄的可能目標(biāo)合成物品每次 onPickItem 執(zhí)行后,前端界面會(huì)根據(jù)此全局變量的值更改圖標(biāo)
/** 檢查當(dāng)前的合成配方是否能夠合成某個(gè)物品。如果配方合法,返回一個(gè)合成的目標(biāo)物品名,否則返回一個(gè)空字符串。
* @param {*} map 為一個(gè) 3*3 的二維數(shù)組,第一維為物品的每一橫行,第二維為每一橫行物品下的每個(gè)縱列
*/
function checkRecipe(map) {
// TODO:待補(bǔ)充代碼
let rule = structuredClone(window.recipes)
//用字符串來(lái)玩這道題
let rMap = map.map(item=>{
return (item+'').replaceAll(',',' ').trim()
}),
rRule = {},
result = ''
for (let key in rule) {
rRule[key] = []
for (let idx in rule[key]) {
rRule[key][idx] = rule[key][idx].map(item=>(item+'').replaceAll(',',' ').trim())
}
}
for(let key in rRule){
for (const item of rRule[key]) {
let _itemStr = ''
//判斷縱向是否擁有空位
if((rMap+'')[0]==','){
_itemStr = ','+item
}else if((rMap+'')[(rMap+'').length-1]==','){
_itemStr = item+','
}else{
_itemStr = item+''
}
if(_itemStr == rMap)result = key
}
}
return result
}
/** 更新 state 中的物品位置
* @param {string} name 為此次修改為的物品,可能為空字符串(通過(guò)右下角清空),也可能為物品
* @param {Array<Number>} pos 為一個(gè)兩個(gè)元素的數(shù)字?jǐn)?shù)組,分別指示物品的所在橫行與所在縱列
*/
function onPickItem(name, pos) {
// TODO:待補(bǔ)充代碼
state[pos[0]-1][pos[1]-1] = name
targetItemName = checkRecipe(state) || '';
}
10、賬戶驗(yàn)證
這題有個(gè)坑,最后清空了輸入框的值依舊不給過(guò),然后換了一種思路就可以了,上代碼:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-754217.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>賬戶驗(yàn)證</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<link rel="stylesheet" href="./css/element-plus@2.3.7/index.css">
<script src="./js/vue3.global.js"></script>
<script src="./css/element-plus@2.3.7/index.full.js"></script>
<script type="importmap">
{
"imports":{
"vue-demi":"./js/index.mjs",
"vue":"./js/vue.esm-browser.prod.js",
"pinia":"./js/pinia.esm-browser.js"
}
}
</script>
<script src="./js/pinia.esm-browser.js" type="module"></script>
</head>
<body>
<!-- app根組件開(kāi)始 -->
<div id="app">
<div class="header">
<img class="back-btn" src="images/arrow.png" />
<span id="main_title">使用手機(jī)號(hào)登錄</span>
<span class="blank"></span>
</div>
<component :is="showName"></component>
</div>
<!-- app根組件結(jié)束 -->
<!-- phone組件開(kāi)始 -->
<template id="phone">
<div>
<ul class="phone">
<span>輸入手機(jī)號(hào)碼</span>
<li>
<input type="text" v-model="phoneVal" autofocus id="numberInput" />
</li>
<li>
<input type="checkbox" v-model="isSure" name="" id="checkbox" />
<span>已閱讀并同意
<a href="javascript:;">服務(wù)協(xié)議</a>
和
<a href="javascript:;">隱私保護(hù)指引</a>
</span>
</li>
<button id="btn" @click="nextStep">下一步</button>
</ul>
</div>
</template>
<!-- phone組件結(jié)束 -->
<!-- check組件開(kāi)始 -->
<template id="check">
<ul class="number">
<span>輸入短信驗(yàn)證碼</span>
<li class="hassend">已向
<i>{{handlePhoneVal}}</i>
發(fā)送驗(yàn)證碼
</li>
<li class="code-container">
<input type="number" class="code" min="0" max="9" required>
<input type="number" class="code" min="0" max="9" required>
<input type="number" class="code" min="0" max="9" required>
<input type="number" class="code" min="0" max="9" required>
<input type="number" class="code" min="0" max="9" required>
<input type="number" class="code" min="0" max="9" required>
</li>
<a href="javascript:;" id="resend" @click="resentCode">重新發(fā)送</a>
</ul>
</template>
<!-- check組件結(jié)束 -->
<!-- success組件開(kāi)始 -->
<template id="success">
<div class="success">
<ul>
<div>驗(yàn)證成功!</div>
<div>5s后將自動(dòng)跳轉(zhuǎn)</div>
</ul>
</div>
</template>
<!-- success組件結(jié)束 -->
</body>
<script type="module">
import { createPinia, defineStore } from 'pinia'
const { createApp, reactive, toRefs,provide,inject,ref,watch } = Vue
const { ElNotification } = ElementPlus
const app = createApp({
setup() {
let data = reactive({
showName: "phone"
})
// TODO:補(bǔ)全代碼實(shí)現(xiàn)目標(biāo)需求
//定義全局通信數(shù)據(jù)池
const code = ref([])
const phoneVal = ref('')
const createCode = function(){ //隨機(jī)生成二維碼
let res = ''
function *_create(){
let count = 0
while(++count <= 6){
yield Math.floor(Math.random()*10)
}
}
for (const iterator of _create()) {
res+=iterator
}
return res
}
const handlePhone = num =>{
let res = ''
for(let idx in num){
if(idx>2 && idx<num.length-2){
res+='*'
}else{
res+=num[idx]
}
}
return res
}
//將通信數(shù)據(jù)派發(fā)滲透到子組件樹(shù)
provide('code',code)
provide('phoneVal',phoneVal)
provide('createCode',createCode)
provide('data',data)
provide('handlePhone',handlePhone)
return {
...toRefs(data)
}
}
})
app.use(ElementPlus)
app.use(createPinia())
app.component("phone", {
template: "#phone",
setup() {
// TODO:補(bǔ)全代碼實(shí)現(xiàn)目標(biāo)需求
let isSure = ref('')
let phoneVal = inject('phoneVal')
let code = inject('code')
let createCode = inject('createCode')
let data = inject('data')
//驗(yàn)證手機(jī)
function verifyPhone(num){
if(num.length!=11)return false
return ((num[0]==1) && num[1]==8)
}
return {
isSure,
phoneVal,
nextStep(){
if(!isSure.value)
return ElNotification({
title: '發(fā)送失敗',
message: '請(qǐng)先閱讀并同意下方協(xié)議',
type: 'error',
})
if(!verifyPhone(phoneVal.value))
return ElNotification({
title: '發(fā)送失敗',
message: '無(wú)效的手機(jī)號(hào)碼',
type: 'error',
})
code.value = createCode()
ElNotification({
title: '發(fā)送成功',
message: '您在驗(yàn)證碼為'+code.value,
type: 'success',
})
data.showName = 'check'
}
}
}
})
app.component("check", {
template: "#check",
setup() {
// TODO:補(bǔ)全代碼實(shí)現(xiàn)目標(biāo)需求
let phoneVal = inject('phoneVal'),
handlePhoneVal = inject('handlePhone')(phoneVal.value),
data = inject('data'),
code = inject('code'),
createCode = inject('createCode'),
rVal = ''
setTimeout(()=>{ //將代碼放入宏隊(duì)列以此獲取dom,用onMounted也行
let oCodeIptList = [...document.getElementsByClassName('code')]
oCodeIptList[0].focus() //第一個(gè)默認(rèn)聚焦
oCodeIptList.map(item=>{
item.oninput=function(){
if(item.value){ //如果輸入了值就聚焦下一個(gè),否則聚焦上一個(gè)
item?.nextElementSibling && item?.nextElementSibling.focus()
}else{
item?.previousElementSibling && item?.previousElementSibling.focus()
}
rVal = (oCodeIptList.map(item=>item.value)+'').replaceAll(',','') //這里很關(guān)鍵,之前我用了這種方式之后,清空六個(gè)輸入框的檢測(cè)就給通過(guò)了
trackVal(rVal)
}
})
function trackVal(val){
if(val.length>=6){
if(val == code.value){
ElNotification({
title: '驗(yàn)證成功',
message: "歡迎回來(lái)",
type: 'success',
})
data.showName = 'success'
}else{
ElNotification({
title: '驗(yàn)證失敗',
message: "您輸入的驗(yàn)證碼有誤",
type: 'error',
})
;[...document.getElementsByClassName('code')].map(item=>item.value = '') //清空輸入框
;[...document.getElementsByClassName('code')][0].focus() //重新聚焦第一個(gè)
}
}
}
})
return {
handlePhoneVal,
resentCode(){
code.value = createCode()
ElNotification({
title: '發(fā)送成功',
message: '您在驗(yàn)證碼為'+code.value,
type: 'success',
})
}
}
}
})
app.component("success", {
template: "#success"
})
app.mount('#app')
</script>
</html>
到了這里,關(guān)于【藍(lán)橋杯Web】第十五屆藍(lán)橋杯(Web 應(yīng)用開(kāi)發(fā))模擬賽 2 期 | 全部題解的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!