1. 相不相等
var expectFn = function(val) {
// TODO
return{
toBe:function (value){
if(val===value){
return true
}else return "Not Equal"
},
notToBe:function (value){
if(val!==value){
return true
}else return "Equal"
}
}
};2. 三行情书
span {
font-size: 20px;
color: #837362;
/* TODO：补充下面的代码 */
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: #837362;
/* TODO：补充下面的代码 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}3. 电影院在线订票
目标
请在 js/script.js 文件中补全代码，最终实现订票功能。具体需求如下：
- 实现异步数据读取和渲染功能，使用
axios请求./data.json（必须使用该路径请求，否则可能会请求不到数据）的数据。- 将电影名字
name渲染到 id 为movie-name的节点中。 - 将电影售价
price渲染到 id 为movie-price的节点中。 - 将座位信息
seats渲染到 id 为seat-area的节点中，二维数组中每一个子数组代表一行，0 代表没有被他人占位，1 代表已经被订购。
- 将电影名字
每一行生成的 DOM 节点格式如下：
<!-- 每一行节点都使用 row class 包裹 -->
<div class="row">
<!-- 每个座位都具有 seat 的 class -->
<div class="seat"></div>
<!-- 如果座位被占了，则相应设置 occupied class -->
<div class="seat occupied"></div>
<!-- ...... -->
</div>
完成后的页面布局效果如下：
- 实现座位选择和总价计算的功能:
- 被别人订过的座位不能再被选择。
- 座位被选中后，状态更新，为相应的座位添加选中样式（即
selected），并更新已选择的座位数和总价。 - 自己所选择的座位可以被取消，并更新已选择的座位数和总价。
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）：
题解
// 1.完成数据请求，生成电影名，价格以及座位情况
let data={}
axios.get('./data.json').then((res)=>{
console.log(res);
data=res.data
movieNameNode.innerHTML=data.name
moviePriceNode.innerHTML=data.price
for(let i=0;i<data.seats.length;i++){
let row= document.createElement('div')
row.className='row'
data.seats[i].forEach(element => {
let seat= document.createElement('div')
seat.className = 'seat'
row.appendChild(seat)
if(element){
seat.classList.add('occupied')
}else{
seat.addEventListener('click',()=>{
if(seat.className=='seat selected'){
seat.classList.remove('selected')
num-=1
count.innerHTML=num
total.innerHTML=num*20
}else{
seat.classList.add('selected')
num+=1
count.innerHTML=num
total.innerHTML=num*20
}
})
}
});
seatAreaNode.appendChild(row)
}
})4. 老虎机
目标
找到 js/index.js 中的 GetResult 函数，完成此函数，实现以下目标：
点击开始后，可以通过 GetResult的三个参数 r1、r2、r3 计算出滚动后每一列图片的停留位置。当最后停留的图片都相同时，意味着玩家中了大奖！文字框（class = textPanel）显示“恭喜你，中奖了”，否则显示：“很遗憾，未中奖”。
参数介绍：r1、r2、r3 表示的是三列元素下的 li 的最后停留位置，分别对应第一列（id=sevenFirst）、第二列（id=sevenSecond）、第三列（id=sevenThird）。以第一列为例，最终显示的元素是 sevenFirst 下的第 r 个 li 元素。请使用显示的 li 元素的 data-point 属性判断三张图片是否相同。当 data-point 属性对应的值相同时，说明这三张图片相同。
在完成之后，请点击“开始”按钮，以下是未中奖和中奖的效果：
题解
// GetResult 中奖结果函数，r1,r2,r3 为最后图片停留位置，以第一列为例，最终显示的元素是 sevenFirst 下的第 r 个 li 元素。
GetResult(r1, r2, r3) {
// TODO 待补充代码
//.getAttribute('data-point') 是获取指定子元素的名为 'data-point' 的属性的值。
if (sevenFirst.children[r1 - 1].getAttribute('data-point') == sevenSecond.children[r2 - 1].getAttribute('data-point') && sevenFirst.children[r1 - 1].getAttribute('data-point') == sevenThird.children[r3 - 1].getAttribute('data-point')) {
textPanel.innerHTML = '恭喜你，中奖了'
} else {
textPanel.innerHTML = '很遗憾，未中奖'
}
}5. 星际通讯
目标
完善 index.js 中的 translate 函数，完善其中的 TODO 部分：
translate 函数接收一个字符串参数 alienMessage，其中包含一系列外星人的密文。函数根据特定的翻译规则将密文翻译成人类语言，并返回翻译后的结果字符串。外星人密文翻译规则存放在 codonTable 变量中。
注意：翻译后的结果字符串之间不能有空格。
特殊条件：
- 密文如果为空，直接返回空字符串。
- 如果密文任意一处无法翻译或遇到找不到对应翻译的密文，则返回字符串
无效密语。 - 如果密文中出现了特殊密文对应的翻译结果是
stop，则停止翻译，返回之前已翻译的结果（不包括对应stop的密文）
以下为提供部分测试用例，通过测试用例不代表通过全部测试，请确保代码的通用性：
| 测试用例 | 输入字符串 | 预期输出 |
|---|---|---|
| 1 | IIXIIIXIV | 人类你好交个朋友 |
| 2 | VIIIIIXIV | 哈喽你好交个朋友 |
| 3 （只翻译 stop 之前的密语） | IIXIIIXXIXIV | 人类你好 |
| 4 （只翻译 stop 之前的密语） | IIXXXIIIIXIV | 人类 |
| 5 | IIXxIIIXIV | 无效密语 |
| 6 | ax4 | 无效密语 |
| 7 | '' | '' |
const translate = (alienMessage) => {
// TODO：待补充代码
let str=''
if(alienMessage.length===0){
console.log(alienMessage.length);
return str;
}else{
for(let i=0;i<alienMessage.length;i+=3){
let key=alienMessage.slice(i,i+3)
if(codonTable[key]){
if(key!='XXI'){
str+=codonTable[key]
}else{
return str
}
}else{
return '无效密语'
}
}
}
return str
};6. 蓝桥排位赛
目标
请在 js/index.js 文件中补全代码，具体需求如下：
- 完成数据请求（数据来源
./mock/map.json），map.json中存放的数据为省市对应的学校数据，使用到的字段介绍如下：
| 参数 | 类型 | 说明 |
|---|---|---|
| name | string | 省/市名称 |
| school_count | number | 加入备赛的学校数量 |
| value | number | 热度值 |
| school_power | object | 战力存放对象，其中 name 为学校名称，power 为战力值 |
- 根据请求的数据正确完成左侧热力地图。
- 右侧战力榜中柱形图中，根据
power字段的值对所有学校进行排序，取出排在前 10 名的学校，从左到右降序排列。
-
完成后运行起来，效果如下：
题解
onMounted(() => {
// TODO:待补充代码 请求数据，并正确渲染柱形图和地图
let mapar=[]
let barshow=[]
showChartBar();
showChinaMap();
axios.get("./mock/map.json").then(res=>{
let das=res.data
das.forEach(e=>{
let maps={
name:e.name,
school_count:e.school_count,
value:e.value
}
mapar.push(maps)
barshow.push(e.school_power)
})
// console.log(mapar);
})
let barshow2=barshow.flat()
// barshow2.reverse()
console.log(barshow2);
let result2=[]
let result3=[]
for(let i=0;i<10;i++){
result2.push(barshow2[i].name)
result3.push(barshow2[1].power)
}
showChinaMap(mapar)
});
7. 拼出一个未来
目标
完善 js/index.js 的 TODO 部分，实现以下目标：
- 将拖动的拼图块与目标拼图块的图片进行交换，这包括交换图片的
src属性和data-id属性。待补充代码的drop函数中现有的两个变量解释如下：draggedPiece：代表被拖动的拼图块的图片元素的父元素。this：代表当前目标位置的拼图块的图片元素父元素。
拼图成功后的 DOM 如下，图片 src、alt、data-id 均按照 1-9 顺序排列
<div class="puzzle-container" id="puzzle-container">
<div class="puzzle-piece" draggable="true">
<img src="./images/img1.png" data-id="1" />
</div>
<div class="puzzle-piece" draggable="true">
<img src="./images/img2.png" data-id="2" />
</div>
<!-- ... 省略部分代码 -->
<div class="puzzle-piece" draggable="true">
<img src="./images/img9.png" data-id="9" />
</div>
</div>
- 显示/隐藏成功消息：拼图成功则设置成功消息元素（
id=success-message）的class名为show，否则该元素的class名为hide。（注意：成功消息元素同时有且只能有一个class名）
完成后效果如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
