【Html.js——功能实现】新年贺卡（蓝桥杯真题-1768）【合集】

举报
Rossy Yan 发表于 2025/02/14 19:22:10 2025/02/14
【摘要】 新年马上到了，大家肯定有很多祝福的话语要对自己的亲人朋友说，下面我们一起来制作一张贺卡，让我们把想说的话都写在贺卡上。​ 本题已经内置了初始代码，打开实验环境，目录结构如下： wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip

​目录😋

背景介绍

准备步骤

目标要求

要求规定

通关代码✔️

代码解析📑

1. HTML 部分

2. CSS部分

3.JavaScript部分

4. 工作流程 ▶️

测试结果👍

背景介绍

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

准备步骤

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

wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip

下载完成之后的目录结构如下：

├── 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 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

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 带补充代码  
	return greetings[Math.floor(Math.random() * 5)];
}

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

代码解析📑

1. HTML 部分

<!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>
</body>
</html>
  • DOCTYPE 声明：<!DOCTYPE html> 声明这是一个 HTML5 文档。
  • html 元素：是整个 HTML 文档的根元素。
  • head 元素：包含了文档的元数据。
    • meta charset="UTF-8"：指定文档的字符编码为 UTF-8。
    • meta http-equiv="X-UA-Compatible" content="IE=edge"：为 Internet Explorer 浏览器提供兼容性信息，使它以最新的渲染模式工作。
    • meta name="viewport" content="width=device-width, initial-scale=1.0"：确保页面在不同设备上能正确显示，特别是在移动设备上，将视口宽度设置为设备宽度，初始缩放比例为 1。
    • title：设置页面的标题，显示在浏览器的标签页上。
    • link rel="stylesheet" href="index.css"：引入外部的 CSS 文件 index.css 来设置页面的样式。
    • body 元素：包含页面的主要内容。
      • div class="card-name"：一个带有 card-name 类的 div 元素，用于显示 “新年贺卡” 字样。
      • div class="card" id="card"：一个带有 card 类和 id 为 card 的 div 元素，代表贺卡的主体部分。
      • p id="greeting-display"：一个 p 元素，用于显示贺卡的祝福语，它的内容将通过 JavaScript 动态添加。
      • button id="btn"：一个带有 id 为 btn 的按钮，点击该按钮将触发书写贺卡的操作。
      • script src="./index.js"：引入外部的 JavaScript 文件 index.js 来实现动态交互功能。

2. CSS部分

:root {
	--wine-red: #C7375F;
	--bright-red: #D42D2F;
	--dark-green: #344D2F;
	--light-green: #77A047;
	--gold: #FAC57D;
	--snow: #fff;
}

*, html, body {
	margin: 0;
	padding: 0;
}

.card-name {
	color: var(--gold);
	font-size: 32px;
}

body {
	background: var(--wine-red);
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Caveat', cursive;
}

.card {
	width: 300px;
	height: 300px;
	border-radius: 5px;
	background: var(--snow);
	font-size: 35px;
	text-align: center;
	padding: 0.5em;
	position: relative;
	margin-bottom: 1em;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

p {
	position: absolute;
	top: 50%;
	left: 50%;
	font-weight: 700;
	transform: translate(-50%, -50%);
}

button {
	border: none;
	background-color: var(--gold);
	padding: 0.5em 1em;
	border-radius: 5px;
	margin: 0 auto;
}

button:hover {
	cursor: pointer;
}
  • :root 伪类：定义了一些 CSS 自定义属性（变量），这些变量可在整个文档中使用，方便颜色的统一管理和修改。
    • --wine-red、--bright-red 等：存储不同颜色的十六进制值。
  • 通用选择器和元素选择器：
    • *, html, body：将所有元素、html 元素和 body 元素的 margin 和 padding 都设置为 0，用于清除默认的边距和填充。
  • 类选择器和元素选择器：
    • .card-name：将带有 card-name 类的元素的字体颜色设置为 var(--gold)，字体大小为 32 像素。
    • body：将页面的背景颜色设置为 var(--wine-red)，高度设置为视口高度（100vh），使用 Flex 布局，垂直方向排列子元素，居中对齐，字体为 Caveat 字体。
    • .card：定义了贺卡主体的样式，包括宽度、高度、边框半径、背景颜色、字体大小、文本对齐方式、内边距等，同时使用 position: relative 为内部的 p 元素的绝对定位提供参考。
    • p：将 p 元素进行绝对定位，使其水平和垂直居中于 .card 元素内，使用 transform 进行精确的居中偏移。
    • button：设置按钮的样式，无边框，背景颜色为 var(--gold)，添加内边距和边框半径，水平居中。
    • button:hover：当鼠标悬停在按钮上时，将鼠标指针变为手型，增加交互性。

3.JavaScript部分

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 带补充代码  
	return greetings[Math.floor(Math.random() * greetings.length)];
}

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

  • DOMContentLoaded 事件监听：

    • document.addEventListener('DOMContentLoaded', function () {...})：
      • 监听 DOMContentLoaded 事件，确保页面的 DOM 结构完全加载后才执行其中的代码。
      • const greetingDisplay = document.getElementById("greeting-display");：获取 id 为 greeting-display 的元素。
      • const btn = document.getElementById("btn");：获取 id 为 btn 的元素。
      • btn.addEventListener("click", () => {...})：为按钮添加点击事件监听器，当点击按钮时，调用 show 函数并将 greetingDisplay 元素作为参数传递。

  • 数组定义：

    • const greetings = [...]：
      • 定义了一个名为 greetings 的数组，其中包含多个新年祝福语。这些祝福语将被用于显示在贺卡上。

  • writeGreeting 函数：

    • function writeGreeting()：
      • Math.floor(Math.random() * greetings.length)：生成一个 0 到 greetings.length - 1 的随机整数，作为数组的索引。
      • return greetings[Math.floor(Math.random() * greetings.length)];：根据随机索引从 greetings 数组中选取一个祝福语。

  • show 函数：

    • function show(greetingDisplay)：
      • greetingDisplay.innerHTML = writeGreeting();：将 writeGreeting() 函数生成的祝福语更新到 greetingDisplay 元素的 innerHTML 中，从而在页面上显示。

4. 工作流程 ▶️

  1. 页面加载阶段：
    • 浏览器加载 HTML 文件，根据 HTML 结构创建 DOM 树。
    • 同时，浏览器解析 <link rel="stylesheet" href="index.css">，将 CSS 样式应用到相应的元素上，包括页面的背景颜色、元素的布局、字体、大小、颜色等。
    • 页面显示时，会出现一个红色背景，中心位置有一个白色的 card 元素，上面有一个标题 “新年贺卡”，一个空的 p 元素，以及一个金色的按钮。
  2. JavaScript 初始化阶段：
    • 当页面的 DOM 结构加载完成后，触发 DOMContentLoaded 事件。
    • 代码通过 document.getElementById() 找到 id 为 greeting-display 的元素和 id 为 btn 的按钮元素。
    • 为按钮添加点击事件监听器。
  3. 用户交互阶段：
    • 用户点击 “书写贺卡” 按钮。
    • 点击事件触发 show 函数，show 函数调用 writeGreeting 函数。
    • writeGreeting 函数从 greetings 数组中随机选择一个祝福语。
    • show 函数将选取的祝福语更新到 id 为 greeting-display 的 p 元素中，显示在贺卡上。


 

通过 HTML、CSS 和 JavaScript 的协同工作，实现了一个简单的新年贺卡效果。用户可以打开页面，点击按钮，看到不同的新年祝福语显示在贺卡上，给用户带来了简单的交互体验。


测试结果👍

​

在这里插入图片描述

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入