admin管理员组文章数量:1444890
【JavaScript——函数编写】悠然画境（蓝桥杯真题
背景介绍
作为一名人工智能训练师，你需要使用
artDataArray数组中提供的指定语料进行训练，你可以用其中的词来组成任何句子来进行智能绘画的训练。
准备步骤
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
代码语言：javascript代码运行次数：0运行复制├── css
├── images
├── index.html
├── effect.gif
└── js
└── index.js其中:
index.html是主页面。css是样式文件夹。images是图片文件夹。js/index.js是待补充的 js 文件。effect.gif是项目最终完成的效果图。
在浏览器中预览 index.html 页面效果如下：
目标效果
请在 js/index.js 文件中的 TODO 部分，完善 generateAndDisplayImages 函数，实现以下目标：
根据函数参数 imageCount 和 selectedText 与已提供 artDataArray 数组中的图片相关词语进行规则匹配，并返回匹配度最高的图片数组。最佳匹配的规则为，文本内容中包含对应图片 tag 的数量最多则为匹配度最高，放在数组前面，如果多张图片匹配度相同，则任意选择匹配到的图片。
函数参数说明
imageCount表示图片数量。selectedText表示文本内容。
artDataArray 数组说明
artDataArray 数组中每个元素为对象，包含两个属性：imageurl 和 tags。其中，imageUrl 表示图片路径，tags 表示跟图片相关的词语，词语通过、 进行分隔。
匹配度示例：
匹配条件 | Tags | 匹配度 |
|---|---|---|
一只 湖蓝色的 知更鸟 | 知更鸟、湖蓝色、十分可爱、皮克斯渲染 | 2 |
一只湖蓝色的 知更鸟 | 知更鸟、剪纸风格、个性的眉毛 | 1 |
一只湖蓝色的知更鸟 | 沙滩、遮阳伞、人、包 | 0 |
注意：测试时请使用已提供数据 tags 中的词语进行组句测试。
示例 1：
如用户输入“一只湖蓝色的知更鸟”，选择生成图片数量为 1，函数的返回值如下：
代码语言：javascript代码运行次数：0运行复制[
{ imageUrl: "images/img1.png", tags: "知更鸟、湖蓝色、十分可爱、皮克斯渲染" }
];因为这条 tags 中的词语与文本内容，匹配量最多，匹配到了 “知更鸟”、“湖蓝色”，匹配到是数量为 2，其他 “知更鸟” 相关的图片匹配的数量为 1。
示例 2：
如用户输入“一只湖蓝色的知更鸟”，选择生成图片数量为 3，函数的返回值如下：
代码语言：javascript代码运行次数：0运行复制[
{ imageUrl: "images/img1.png", tags: "知更鸟、湖蓝色、十分可爱、皮克斯渲染" },
{ imageUrl: "images/img2.png", tags: "知更鸟、个性的眉毛、模糊毛皮" },
{ imageUrl: "images/img3.png", tags: "知更鸟、剪纸风格、个性的眉毛" }
];最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
要求规定
- 请勿修改
js/index.js文件外的任何内容。 - 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
判分标准
- 本题完全实现题目目标得满分，否则得 0 分。
通关代码✔️
代码语言：javascript代码运行次数：0运行复制// 获取滑块、生成按钮、图片数量显示元素、右侧面板、错误信息元素
const slider = document.querySelector('.slider');
const generateButton = document.querySelector('.generate-button');
const imageCountSpan = document.getElementById('imageCount');
const rightPanel = document.querySelector('.right-panel');
const errorMessage = document.querySelector('.error-message');
const sliderDots = document.querySelectorAll('.slider-dot');
function updateSliderDots(value) {
sliderDots.forEach((dot, index) => {
if (index < value) {
dot.style.backgroundColor = '#007bff'; // Blue
} else {
dot.style.backgroundColor = '#bbb'; // Gray
}
});
}
// 初始化图片数量为滑块的值
imageCountSpan.innerText = slider.value;
// 初始化绘画风格和文本
let imageCount = slider.value;
let selectedText = "";
// 监听滑块值变化事件
slider.addEventListener('input', () => {
imageCount = slider.value;
// 更新显示的图片数量
imageCountSpan.innerText = slider.value;
updateSliderDots(Number(imageCount))
});
// 监听绘画文本输入事件
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
selectedText = textarea.value;
// 如果文本不为空，隐藏错误信息
if (selectedText) { errorMessage.style.display = 'none'; }
});
// 监听生成按钮点击事件
generateButton.addEventListener('click', () => {
// 获取生成的图片数量
// 如果文本为空，显示错误信息并返回
if (!selectedText) return errorMessage.style.display = 'block';
// 生成最佳图片的匹配数组
imgAry = generateAndDisplayImages(imageCount, selectedText);
console.log(imgAry)
// 渲染 DOM
let str = ``
imgAry.forEach((el) => {
str += `
<img src='${el.imageUrl}' />
`
})
rightPanel.innerHTML = str
});
// 假设生成的绘画数据数组为 artDataArray
const artDataArray = [
{ "imageUrl": "images/img1.jpg", "tags": "知更鸟、湖蓝色、十分可爱、皮克斯渲染" },
{ "imageUrl": "images/img2.jpg", "tags": "知更鸟、个性的眉毛、模糊毛皮" },
{ "imageUrl": "images/img3.jpg", "tags": "知更鸟、剪纸风格、个性的眉毛" },
{ "imageUrl": "images/img4.jpg", "tags": "知更鸟、油画、十分可爱、特殊的羽毛" },
{ "imageUrl": "images/img5.jpg", "tags": "男性、卡通、书、桌子" },
{ "imageUrl": "images/img6.jpg", "tags": "男性、卡通、玩具、眼镜" },
{ "imageUrl": "images/img7.jpg", "tags": "男性、卡通、玩具" },
{ "imageUrl": "images/img8.jpg", "tags": "男性、卡通、书" },
{ "imageUrl": "images/img9.jpg", "tags": "沙滩、遮阳伞、散步" },
{ "imageUrl": "images/img10.jpg", "tags": "沙滩、椰子树、一群人" },
{ "imageUrl": "images/img11.jpg", "tags": "沙滩、遮阳伞、人、包" },
{ "imageUrl": "images/img12.jpg", "tags": "沙滩、回忆、相框" }
]
/**
* @param {*} imageCount 生成的图片数量
* @param {*} selectedText 用户输入的文本
*/
function generateAndDisplayImages(imageCount, selectedText) {
let imgAry = [] // 定义最佳匹配的图片数组
// TODO：待补充代码
imgAry = artDataArray.map(items=>{
const count = items.tags.split('、').filter(item=>{
return selectedText.includes(item)
}).length
return {...items,weight:count}
}).sort((a,b)=>{return b.weight-a.weight}).slice(0,imageCount)
//TODO：END
return imgAry;
}代码解析
本文标签： JavaScript函数编写悠然画境（蓝桥杯真题
版权声明：本文标题：【JavaScript——函数编写】悠然画境（蓝桥杯真题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1748213601a2827254.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论