蓝桥杯前端Web赛道-新年贺卡

蓝桥杯前端Web赛道-新年贺卡

题目链接：8.新年贺卡 - 蓝桥云课 (lanqiao.cn)

首先看题目要求：

请仔细阅读需要完善代码部分的提示，之后完善 index.js 样式文件中的 TODO 部分，点击书写贺卡，卡片随机展示已经写好的祝福语：

这是题目中我们需要更改的地方

// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
	// TODO 带补充代码 
}

/*
 * @param {*} greetingDisplay  要显示内容的dom元素
 */
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
	// TODO 待补充代码
}

首先我们根据提示得出，这是一个生成随机数的题目，通过生成的随机数，相对应的渲染到页面上。提示给的很明确，要求 writeGreeting()作为生成随机数的函数，show渲染writeGreeting返回的内容。

在js中生成随机数的函数是Math.random() 但是问题是我们应该怎么设置随机数的范围呢？根据题目提供的数组得知，我们需要生成十以内的数字，所以我们可以写成 Math.random()*10 数字的范围就会在0<=x<10内。

但是这样还不够准确，于是我们可以再后面取余greetings的长度，这样生成的随机数的范围就在0<=x<祝福语数组的长度-1

但是此时会出现一个问题，当我们测试Math.random()*10时会发现，这个函数生成的随机数实际上并不都是整数，而是0<=x<10内的小数

所以我们需要用到js中的另外一个函数 Math.floor(),这个函数可获取小于x，且与x最相近的整数，换言之就是会返回当前数的整数位，所以我们需要把这两个函数结合起来一起使用。

Math.floor(Math.random() * 10 % greetings.length)得出的结果即为我们需要的随机数范围

所以在题目中我们应该这样作答

// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
	// TODO 带补充代码 
	return greetings[Math.floor(Math.random()*10%greetings.length)]
}

/*
 * @param {*} greetingDisplay  要显示内容的dom元素
 */
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
	// TODO 待补充代码
	greetingDisplay.innerHTML = writeGreeting()
}

greetings[Math.floor(Math.random()*10%greetings.length)]的计算顺序如下

• Math.random() * 10 % greetings.length: 将上一步得到的随机整数对数组长度取模，得到一个 0 到 greetings.length - 1 之间的随机整数。

• greetings[Math.floor(Math.random() * 10 % greetings.length)]: 使用上一步得到的随机整数作为索引，从数组 greetings 中取出对应的元素（即随机选择一个祝福语）。

• 最后返回随机选择出的祝福语

最后greetingDisplay.innerHTML = writeGreeting()则是把返回的值渲染到页面上。