【功能实现】新年贺卡(蓝桥)

 

题目分析:

想要实现一个随机抽取功能

功能拆解:题目给了数组,我们采用生成随机数的方式,随机数作为数组的索引值访问数组的值。

                        并返回获取到的值,将获取到的值插入到页面中。

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

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

这段代码是一个简单的JavaScript模块,它定义了两个函数:showwriteGreeting,并通过 module.exports 导出了这两个函数,使得其他模块可以引入并使用它们。

  1. 函数定义:

    • show(greetingDisplay): 这个函数接受一个参数 greetingDisplay,这个参数应该是一个DOM元素(或者至少有一个 innerHTML 属性的对象)。函数会将 writeGreeting() 的返回值设置为 greetingDisplayinnerHTML
    • writeGreeting(): 这个函数没有给出具体的实现,但从名字和 show 函数中的使用方式来看,它应该返回一个表示问候的字符串。
  2. 模块导出:

    • module.exports = { show, writeGreeting }: 这行代码将 showwriteGreeting 函数作为模块的输出。这意味着,当其他JavaScript文件通过某种机制(如CommonJS的 require 或ES6的 import)引入这个模块时,它们可以访问并使用这两个函数。

使用示例

假设这段代码保存为 greetingModule.js,另一个文件可以使用 require 来引入这个模块,并调用其中的函数:

// 在另一个JavaScript文件中
const greetingModule = require('./greetingModule');
const greetingElement = document.getElementById('greeting');
greetingModule.show(greetingElement);

在这个示例中,greetingElement 是一个DOM元素,其ID为 greeting。通过调用 greetingModule.show(greetingElement)greetingElementinnerHTML 会被设置为 writeGreeting() 函数的返回值。

注意:这里的代码假设在浏览器环境中运行,使用了浏览器的DOM API(如 document.getElementById)。如果在一个没有DOM的环境(如Node.js)中运行,这段代码会抛出错误。

注意事项

  • writeGreeting 函数的实现没有给出,所以在没有具体实现的情况下,show 函数可能无法正常工作。
  • module.exports 是CommonJS的模块导出语法,主要在Node.js中使用。如果你在一个支持ES6模块的环境中工作(如现代浏览器或某些Node.js版本),你可能想使用 export 语法来导出函数。

在这里直接删除了系统自带的最后一行,带上最后一行会报错。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/495549.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TouchGFX之画布

一、画布渲染器 画布控件渲染器(Canvas Widget Renderer,以下简称CWR)是强大的多功能TouchGFX插件,在使用相对较小的存储空间的同时保持高性能,可提供平滑、抗锯齿效果良好的几何图形绘制。TouchGFX使用CWR可绘制复杂…

Redis命令-String命令

4.3 Redis命令-String命令 String类型,也就是字符串类型,是Redis中最简单的存储类型。 其value是字符串,不过根据字符串的格式不同,又可以分为3类: string:普通字符串int:整数类型&#xff0…

【正点原子FreeRTOS学习笔记】————(14)事件标志组

这里写目录标题 一、事件标志组简介(了解)二、事件标志组相关API函数介绍(熟悉)三、事件标志组实验(掌握) 一、事件标志组简介(了解) 事件标志位:用一个位,来…

香港高才通计划abc类的申请材料各不同,附官方续签攻略!

香港高才通计划abc类的申请材料各不同,附官方续签攻略! 作为香港“史上最快获批签证”,高才通计划受到内地精英的热烈欢迎,香港高才通于2022年12月28日开放申请,截至2023年12月31日,香港高才通计划已接获62…

如何应对Android面试官->Android中的类加载机制,手写热修复框架(上)

前言 本章主要介绍 Android 中的类加载机制和 Java 中的类加载机制有什么不同? ClassLoader Android 中的顶层抽象基类也是 java.lang.ClassLoader;可以进入 Android SDK 中提供的 ClassLoader 看一下 可以看到,这个 ClassLoader 是一个抽象…

短视频矩阵系统新的ui迭代上线

短视频矩阵系统是一个复杂的系统,需要保证其稳定性以确保用户的使用体验。以下是一些关键的方法和步骤来确保开发的系统稳定性: 1. **设计合理的架构**:架构的合理性对于系统的稳定性至关重要。系统应设计为可扩展的,并具有良好的…

【JavaWeb】Day17.前端工程化——Vue项目开发流程

Vue项目开发流程 上个文章展示了建立新的Vue项目并打开网页,今天展示项目是如何形成的,即项目的开发流程。 用VScode打开新建的项目 ,render函数创建了虚拟DOM元素,在app.vue中定义。 Vue的组件文件以 .vue结尾,每个组…

TLSR8258 MTU、DLE(PDU)

本文基于泰凌微TLSR8258 M1S1 demo。 1.DLE:LE Data Packet Length Extension 中文全称:低功耗蓝牙数据包长度扩展。 这是一个在2014年12月2日正式发布的bluetooth for BLE添加的新特性,以支持在LL Data PDU更长的数据,最大支持…

echarts 3D示例 echart, echarts-gl

echarts官网有很多的炫酷的3D模型 来尝试实现下&#xff0c;使用原本的柱状图或者折线图代码创建echarts示例,使用cdn的方式引入echarts <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewp…

共享WiFi贴码真能赚钱还只是骗局?

最近WiFi贴码的风真的很大&#xff0c;想做的人很多&#xff0c;那么自然怕被骗的人也比比皆是。WiFi贴码真的如大家所说很赚钱&#xff1f;本期就来解答一下WiFi贴码到底能不能挣钱以及它分析是不是骗局的套路。 什么是WiFi贴码&#xff1f; 这边我们从共享wifi的鼻祖微火那了…

PADS导出元器件的值,并且自动摆放在相对的位置上显示

PADS导出元器件的值&#xff0c;并且自动摆放在相对的位置上显示 1. pads 显示出器件信息 点击右键鼠标&#xff0c;点击选择元器件&#xff0c;鼠标框选全部器件 在器件上右击&#xff0c;点击特性 PS&#xff1a;操作的时候&#xff0c;需要保证 器件有相关值的参数存在…

docker在线安装centos7(windows版)

目录 1、docker本地安装2、拉取centos7镜像3、启动容器4、配置SSH以访问centos7 1、docker本地安装 windows安装docker比较简单&#xff0c;官网搜索有个docker desktop装上就完事。 2、拉取centos7镜像 可以登录到docker hub上拉&#xff0c;也可以搜出来对应的centos7镜像…

前端学习<二>CSS基础——06-CSS盒模型详解

盒子模型 前言 盒子模型&#xff0c;英文即box model。无论是div、span、还是a都是盒子。 但是&#xff0c;图片、表单元素一律看作是文本&#xff0c;它们并不是盒子。这个很好理解&#xff0c;比如说&#xff0c;一张图片里并不能放东西&#xff0c;它自己就是自己的内容。…

大会邀请 |北京智慧城市时空信息大会

2024年3月27-28日&#xff0c;2024中关村论坛系列活动一一首届智慧城市时空信息大会将在北京国际财富中心举办&#xff0c;大势智慧作为协办单位出席大会&#xff0c;重点展出公司自主研发的实景三维全自主、全流程系列软硬件产品&#xff0c;并为您带来公司在智慧城市、智慧应…

Linux的VirtualBox中USB设备无法选择USB3.0怎么办?

在VirtualBox中&#xff0c;如果遇到USB设备无法选择 USB 3.0 的问题&#xff0c;可以尝试按照以下步骤来解决&#xff1a; 确保VirtualBox版本支持USB 3.0&#xff1a;首先&#xff0c;你需要确认你的VirtualBox版本是否支持USB 3.0。一些较旧的版本可能不支持&#xff0c;因此…

MappedByteBuffer VS FileChannel:从内核层面对比两者的性能差异

本文基于 Linux 内核 5.4 版本进行讨论 自上篇文章《从 Linux 内核角度探秘 JDK MappedByteBuffer》 发布之后&#xff0c;很多读者朋友私信我说&#xff0c;文章的信息量太大了&#xff0c;其中很多章节介绍的内容都是大家非常想要了解&#xff0c;并且是频繁被搜索的内容&…

vue多语言包i18n

1.安装 如果是vue2直接安装8.2.1版本&#xff0c;否则会出现版本不匹配的错误 npm install vue-i18n8.2.1 --save2.文件编辑 在src目录下创建文件 en.js export const h {system: "Background management system",loginOut:"LoginOut",LayoutSet:Layout …

SQL104 返回产品名称和每一项产品的总订单数(left join..on.. ,group by)

select prod_name,count(order_num) as orders from Products P left join OrderItems OI on OI.prod_id P.prod_id group by prod_name order by prod_name;left join一个数据条多的表 count&#xff08;order_num&#xff09;,group by 另一个字段

解决PATH变量污染的问题

文章目录 解决PATH变量污染的问题概述笔记清空PATH变量之后的系统设置在命令行查看清空后的PATH变量以 gitea-1.17.1-gogit-windows-4.0-amd64.exe 为例以系统命令 where为例备注 - 批处理的后缀最好是batEND 解决PATH变量污染的问题 概述 随着不断安装新软件, 可能多个软件中…

flowable-ui后台显式非中文

把flowable-ui的war包发布后&#xff0c;后台界面显示的是非中文 用的是6.7.2版本&#xff0c;经过了解该版本是有国际化配置文件的&#xff0c;支持中文 猜测可能是浏览器语言导致未显示中文&#xff0c;在控制台输入navigator.language&#xff0c;查看到果然是英文 解决方案…