【功能实现】新年贺卡

介绍

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

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

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

其中：

index.css 是本次挑战的样式文件。
index.js 是本次挑战需要补充的 js 文件。
index.html 是贺卡页面。选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】。初始效果如下：

目标

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

规定

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

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>

<body>
	<div class="card-name">新年贺卡</div>
	<div class="card" id="card">
		<p id="greeting-display"></p>
	</div>
	<button id="btn">书写贺卡</button>

	<script src="./index.js"></script>
	<script>
		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() {
	let index=Math.floor(Math.random()*5)
	return greetings[index]
}

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

module.exports = { show, writeGreeting }






	</script>
</body>

</html>

文章版权声明 1、本网站名称：曙光博客
2、本站永久网址：pqblog.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ86512进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

学习经验

【蓝桥杯】新年贺卡

【功能实现】新年贺卡

介绍

准备

目标

规定

请登录后发表评论