蓝桥杯Web：【功能实现】新年贺卡

【功能实现】新年贺卡

背景介绍
新年马上到了，大家肯定有很多祝福的话语要对自己的亲人朋友说，下面我们一起来制作一张贺卡，让我们把想说的话都写在贺卡上。

准备步骤
在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/ex01card.zip&& unzip ex01card.zip && rm ex01card.zip
copy
下载完成之后的目录结构如下：

├── index.css
├── index.html
└── index.js

其中：

index.css 是本次挑战的样式文件。
index.js 是本次挑战需要补充的 js 文件。
index.html 是贺卡页面。

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

图片描述

要求规定
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
总通过次数: 746 | 总提交次数: 764 | 通过率: 97.6%

题解

考点：js随机函数 Math.random，DOM innerHTML 属性

document.addEventListener('DOMContentLoaded', function () {
	const greetingDisplay = document.getElementById("greeting-display")
	const btn = document.getElementById("btn")
	// 点击开始书写按钮
	btn.addEventListener("click", () => {
		show(greetingDisplay)
	})
})

const greetings = [
	"新年快乐!",
	"接受我新春的祝愿,祝你平安幸福",
	"祝你新年快乐,洋洋得意!",
	"新的一年,新的开始;心的祝福,新的起点!",
	"新年好!祝新年心情好,身体好,一切顺心!",
]

// 随机数函数 从 greetings 随机取一个值并返回
function writeGreeting() {
	// TODO 带补充代码  
	// 生成 0-5的随机数，取值 greetings[index]并返回。
	const index = Math.floor(Math.random()*5)
	const str = greetings[index]
	return str
}

/*
 * @param {*} greetingDisplay  要显示内容的dom元素
 */
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
function show(greetingDisplay) {
	// TODO 待补充代码
	// 通过 innerHTML属性为内容标签赋值随机取出的 str
	const showText = writeGreeting()
	greetingDisplay.innerHTML = showText
}

module.exports = { show, writeGreeting }