function getweather() {
//TODO：请补充代码
// 定义一个空数组 追加渲染的数据
var rows = []
$.ajax({
url: 'js/weather.json',
type: "get",
success: function (data) {
// console.log(data.result);
datalist = data.result
// console.log(datalist);
// datalist.forEach(item => {
// console.log(item);
// rows.push(`<div class="item" id="Monday">
// <img src="${item.weather_icon}">
// <div class="item-mess">
// <div>${item.weather}</div>
// <div>${item.temperature}</div>
// <div>${item.winp}</div>
// <div>
// <span>${item.days}</span>
// <span>${item.week}</span>
// </div>
// </div>
// </div>`)
for (var item of datalist) {
console.log(item);
rows.push(`<div class="item" id="Monday">
<img src="${item.weather_icon}">
<div class="item-mess">
<div>${item.weather}</div>
<div>${item.temperature}</div>
<div>${item.winp}</div>
<div>
<span>${item.days}</span>
<span>${item.week}</span>
</div>
</div>
</div>`)
}
// 因为题目要求不能动dom结构，所以要把原来的结构全部清空，再追加rows里面的内容
$('.week-weather').empty().append(rows.join(''))
// });
}
})
}
getweather();
解题思路：这题主要就是先用ajax请求到数据，然后定义一个空数组，去存放渲染出来的数据，这里可以用for each或者for of循环都可通过，切记一个细节，因为题目要求不能动html里面的dom结构，把数据给week-weather的时候一定先清空原始写死的数据再追加进去。
2.知乎首页数据动态化
<template>
<div class="list">
<div
class="list-item" v-for="(item,index) in datalist" :key="index"
>
<img
class='list-pic'
:src='item.imgUrl'
/>
<div class="list-info">
<p class='title'>{{item.title}}</p>
<p class='desc'>{{item.desc}}</p>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
// 定义一个空数组，存放请求到数据
datalist:[]
};
},
created(){
axios.get('./static/data/list.json').then(res=>{
this.datalist=res.data.data.listInfo
console.log(this.datalist);
})
},
</script>
解题思路：在created里面请求到数据，然后定义一个空数组存放请求的数据，用v-for遍历数组， 再把写死的地方改成动态的的就可以了，就算简单的vue渲染数据。
3.实现卡号绑定功能
function bind(cardno, password) {
//Todo:补充代码
$.ajax({
url:'js/cardnolist.json',
type:"get",
success:function(data){
// 把请求到数据给一个变量
let datalist = data.cardnolist
// console.log(datalist[0].cardno);
// for循环遍历这个数组，用for in或者普通的for循环都可
for (const i in datalist) {
if(cardno==datalist[i].cardno&&password==datalist[i].password){
$('#tip2').addClass('fade')
$('#tip1').removeClass('fade')
break;
}else{
$('#tip1').addClass('fade')
$('#tip2').removeClass('fade')
break;
}
}
}
})
}
解题思路：用Ajax请求到数据，也可以不用Ajax，用get,axios都可，只要能请求到数据都行，我们需要的数据是一个数组。然后把请求到数据给一个变量，遍历这个数组，判断用户输入的值是否等于数据里面的值，然后再相应添加和删除fade类就可。
4.【功能实现】搜一搜呀
核心代码：
return this.postList.filter(item=>
item.title.includes(this.search)
解题思路：对存放卡片的postList写一个过滤方法，拿到标题title之后，用includes方法筛选this.search
5.宝贵的一票
$(".add").click(function () {
// TODO 待补充代码
// 获取list的长度
let c1 = $('.list').children().length
// 在添加选项时，先判断里面是否有两个数据，有就添加上删除的符号
if (c1 === 2) {
$('.list').children().each((index, item) => {
$(item).append(`<div class="col-sm-1">
<!-- 删除图标 -->
<img class="del-icon" src="./images/x.svg" alt="" />
</div>`)
})
}
if (c1 < 2) {
$('.list').append(initRender(`选项${c1 + 1}`))
console.log(initRender(`选项${c1 + 1}`));
} else {
$('.list').append(`<div class="mb-3 row item">
<label class="col-sm-2 col-form-label txt">选项${c1 + 1}</label>
<div class="col-sm-9">
<input type="text" class="form-control" />
</div>
<div class="col-sm-1">
<!-- 删除图标 -->
<img class="del-icon" src="./images/x.svg" alt="" />
</div>
</div>`)
}
});
$(document).on("click", ".del-icon", function () {
// TODO 待补充代码
$(this).parents('.row').remove()
let c1 = $('.list').children().length
//法一
$('.list').children().each((index,item)=>{
$(item).children('label').text(`选项${index+1}`)
if($('.list').children().length<=2){
$(item).children()[2].remove()
}
})
});
//法二 第二个方法相对第一个来说更简洁更好理解一点
// if($('.list').children().length<=2){
// $('.col-sm-1').remove()
// }
//这里也可以用箭头函数 用了箭头函数就不能用this
// $(".list").children("div").each(function(i,val){
// $(this).children("label").text((`选项${i + 1}`))
// })
})()
);
解题思路：首先先获取到list的长度，也就是我们需要添加的数据的长度，根据题意，实现点击新增一个选项，当页面中选项大于2个时，选项跟随删除按钮，在新增选项前先判断一下页面是否已经有两个选项，已有两个选项的话就加上删除按钮，然后再增加新的选项（这里直接把题目给dom结构cv即可，选项的长度也就是当前list的长度加一），小于两个选项就不显示删除按钮，至于怎么不显示删除按钮，细心观察会发现题目给的代码已经有了（initRender(选项${c1 + 1})），直接cv即可，删除按钮的话有个细节就是删除选项后，左侧的选项号需要刷新一下，这题虽然是个10分题，但是代码量挺多，内部逻辑不是很难。
7.水果叠叠乐
解题思路：这题的考点就是怎么生成一个范围内n个随机数，对Math函数熟悉的话很容易做出来，细节就是需要判断是否有重复的数据
$("#card li").on("click", function () {
// TODO: 待补充代码
// console.log( $(this));
let c1 = $('#box li').length
// 超过七个不添加
if(c1===7) return
// 因为不能操作元素本身，所以要克隆一份
$('#box').append($(this).clone())
$(this).hide()
// 获取当前点击元素的data-id attr()是获取元素的属性
let data = $(this).attr('data-id')
// 定义一个计数器
let flag=0
// 用jquery的eacg遍历box里面的li 这里切记不能用箭头函数，箭头函数会改变this的指向
$('#box li').each(function(){
// 如果box里面li的data-id等于当前点击的data-id,flag++
if(data==$(this).attr('data-id')){
flag++
}
})
if(flag==3){
// 当flag等于3时，再次遍历box里面的li,把box里面li的data-id等于当前点击的data-id相同的删除
$('#box li').each(function(){
if(data==$(this).attr('data-id')){
$(this).remove()
}
})
// 计数器归零，不归零也可以检测通过
flag=0
}
// console.log($('#card li').attr('data-id'));
});
解题思路：这题解题思路都写注释了，有个坑，就是不能直接追加到box里面，不能都它本身，得克隆一份。
8.粒粒皆辛苦
axios.get('./data.json').then(res => {
// console.log(res.data.data);
let data = res.data.data
let source = [
["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
["小麦"],
["大豆"],
["马铃薯"],
["玉米"],
]
for(let item in data){
// console.log(data[item].wheat);
source[1].push(data[item].wheat)
source[2].push(data[item].soybean)
source[3].push(data[item].potato)
source[4].push(data[item].corn)
}
option.dataset.source=source
myChart.setOption(option);
console.log(source);
})
解题思路：这题实际上就算考的转换数据类型，这里是先自己写好了题目所需要的数据格式，然后把请求到的数据往里追加，其实这题可以直接自己手写数据硬塞进去，如果比赛发现可以手写数据的，又刚好没啥思路的情况下，那么不要犹豫，手写数据追加进去，很好用！！！
9.芝麻开门
题目要求
/ TODO：待补充代码
// 转化为dom
div.innerHTML=template
// 通过 appendChild 方式插入到 body 中
document.querySelector('body').appendChild(div)
//mPrompt 函数必须返回一个 promise 对象
return new Promise((rel,rej)=>{
// 给确定按钮添加一个监听事件
document.querySelector('#confirm').addEventListener('click',function(){
// 在对话框中的输入框中输入文字后，点击确认按钮，对话框消失，
// promise 返回成功，promise 成功的值为输入的值。
// 获取input中输入的值
let str = document.querySelector('input').value
rel(str)
// 删除对话框
document.querySelector('.modal').remove()
})
document.querySelector('#cancel').addEventListener('click',function(){
rej(false)
document.querySelector('.modal').remove()
})
})
解题思路：这题一开始觉得挺难的，考到了我不擅长的promise，但是后来仔细跟着题意走，发现也不是那么难，这里我给按钮加的是addEventListener（）监听点击事件，如果是单纯的点击事件也可以通过检测。
10.大电影
//jQuery解法
$('.card-body-option img').on('click', function () {
if ($(this).attr('src') === './images/hollow.svg') {
$(this).attr('src', './images/solid.svg')
$('#toast__container').css("display", "block")
setTimeout(() => {
$('#toast__container').css("display", "none")
}, 2000);
$('.toast__close img').on('click',function(){
$('#toast__container').css("display", "none")
})
} else {
$(this).attr('src', './images/hollow.svg')
}
})
//原生js写法
let img = document.querySelector('.card-body-option-favorite').querySelector('img')
let src1=img.getAttribute('src')
img.addEventListener('click',function(){
if(src1==='./images/hollow.svg'){
img.src='./images/solid.svg'
src1 = './images/solid.svg';
document.querySelector('#toast__container').style.display='block'
setTimeout(() => {
document.querySelector('#toast__container').style.display='none'
}, 2000);
let close=document.querySelector('.toast__close')
close.onclick=function(){
document.querySelector('#toast__container').style.display='none'
}
}else if(src1==='./images/solid.svg'){
img.src='./images/hollow.svg'
src1 = './images/hollow.svg';
}
})
解题思路：这题其实逻辑并不难，注意些细节就好了，我自己在做的时候就因为图片的路径没有加./一直通过不了，找了好久；原生js解法需要的注意的点就是执行完if之后要手动该一下它的路径才能实现切换，如果不加这句
src1 = ‘./images/solid.svg’;就只能点击一次。
11.消失的token
先看代码
var app = new Vue({
el: '#app',
store,
data() { },
computed: {
welcome() {
return $store.getters.welcome
},
username() {
return $store.getters['user/username']
},
token() {
return store.getters['user/token']
}
},
methods: {
// 回车/点击确认的回调事件
login(username) {
username && this.$store.commit('user/login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
username && this.$store.commit('say', '登录成功，欢迎你回来！')
}
}
})
这里考到vuex的一些基础语法以及命名空间，先看到index.js下的的代码
const store = new Vuex.Store({
modules: {
//模块名base对应的BaseModule,user对应的是UserModule
base: BaseModule,
user: UserModule,
},
})
window.$store = store
再看到UserModule.js和BaseModule.js下的代码
const UserModule = {
// 开启了命名空间功能
// '模块名/模块中的getters或mutations'
namespaced: true,
state: () => ({
username: '',
token: null,
}),
getters: {
username(state) {
return state.username
},
token(state) {
return state.token
}
},
mutations: {
login(state, { username, token }) {
state.username = username
state.token = token
},
},
}
const BaseModule = {
state: () => ({
welcome: '请输入用户名登录系统'
}),
getters: {
welcome(state) {
return state.welcome
},
},
mutations: {
say(state, content) {
state.welcome = content
},
},
actions: {}
}
//BaseModule
const BaseModule = {
state: () => ({
welcome: '请输入用户名登录系统'
}),
getters: {
welcome(state) {
return state.welcome
},
},
mutations: {
say(state, content) {
state.welcome = content
},
},
actions: {}
}
可以看到只有UserModule 开启了命名空间的功能(namespaced: true),语法（‘模块名/模块中的getters或mutations’），因为开启了命名空间的功能，所以我调用的时候就要使用一些相关的语法，还有一个就细节在上面需要注册一下store
12.渐变色背景生成器
const inputs = document.querySelectorAll(".controls input");
const gradient = document.querySelector('.gradient')
console.log(inputs[0]);
inputs[0].addEventListener('change',function(){
gradient.style.setProperty('--color1',inputs[0].value)
})
inputs[1].addEventListener('change',function(){
gradient.style.setProperty('--color2',inputs[1].value)
})
解题思路：这题就是给两个输入框绑定一个监听事件，重要的是得知道setProperty的用法，知道它的用法就很简单，不然用原生js去改变它的背景很麻烦。
13.绝美宋词
<body>
<div id="app">
<h1 style="text-align: center">输入关键字，找一首词</h1>
<!-- TODO：待补充代码 -->
<div class="search-form">
<!-- 用@input 每输入一个字都会出发该事件 -->
<input @input="search" type="text" id="search" v-model="val" class="search" placeholder="词牌名 词句 词人" />
<ul class="suggestions">
<!-- 每一首完整词句用一个 li 包裹 -->
<!-- v-for遍历深拷贝的数据 -->
<li v-for="(item,index) in datalist" :key="index">
<!-- 将匹配到的数据高亮显示，用v-html是因为它不会解析HTML代码 -->
<span class="poet" v-html="highlight(item.poetry_content)"> </span>
<span class="title" v-html="highlight(item.title+'-'+item.author)"></span>
</li>
</ul>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
// TODO：待补充代码
data() {
return {
// 定义一个双向绑定input框输入的值
val: "",
// 定义list存放源数据
list: [],
// 存放深拷贝后的数据
datalist:[]
}
},
created() {
axios.get('./data.json').then(res => {
// console.log(res.data);
this.list = res.data
})
},
methods: {
// 过滤方法
search(item) {
// 对源数据进行深拷贝3
this.datalist=JSON.parse(JSON.stringify(this.list))
// 保证输入框不能为空
if (this.val) {
// 对输入的值进行过滤，
this.datalist = this.datalist.filter(item => {
return item.title.includes(this.val) || item.poetry_content.includes(this.val) || item.author.includes(this.val)
})
} else {
// 如果为空则不展示数据
this.datalist = []
}
},
highlight(str) {
// $& -- 表示全部匹配组匹配的结果
//用replaceAll方法替换匹配到的数据
return str.replaceAll(this.val,`<span class="highlight">$&</span>`)
}
}
})
</script>
</body>
解题思路：第一小问的数据请求没什么可说的了，第二小问是要实时显示词牌名，对拿到的数据进行一个过滤就好了，切记一个细节，不能改变源数据，可以定义一个新的数组存放数据或者对请求的数据进行深拷贝，两者都差不多，最后是要对input框输入的值进行一个高亮展示，这里写一个highlight方法，用replaceAll去替换全部关键字。
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
