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

 

题目分析:

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

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

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

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.mzph.cn/news/776184.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js文件同步和异步的引入问题

文章目录 同步加载和异步加载JS模块的加载方法CommonJSES6ES6的<script>标签的加载方式 同步加载和异步加载 同步加载&#xff1a;同步加载是指在主线程上按顺序执行代码&#xff0c;当遇到加载资源&#xff08;例如网络请求、读取文件&#xff09;时&#xff0c;主线程…

循序渐进丨MogDB 对 Oracle DBLink兼容性增强

本特性自 MogDB 5.0.0版本开始引入&#xff0c;支持 Oracle DBLink语法&#xff0c;可以使用符号访问 Oracle 数据库中的表。 示 例 01 环境准备 MogDB 环境 已安装 MogDB 数据库。已安装oracle_fdw插件&#xff0c;具体安装方法参见oracle_fdw安装文档https://docs.mogdb.io/…

自定义你的商店 – 设计WooCommerce商店的新方法

WooCommerce 8.8即将推出&#xff0c;带来了一种无需代码即可创建精美商店的新方法。向“自定义你的商店”问好&#xff0c;这是一项全新功能&#xff0c;将取代“个性化你的商店”入门步骤。 自定义你的商店将利用最新的WordPress站点编辑工具以及酷炫的新Pattern Assembler …

誉天华为认证云计算课程如何

HCIA-Cloud Computing 5.0 课程介绍&#xff1a;掌握华为企业级虚拟化、桌面云部署&#xff0c;具备企业一线部署实施及运维能力 掌握虚拟化技术、网络基础、存储基础等内容&#xff0c;拥有项目实施综合能力 满足企业虚拟化方案转型需求&#xff0c;应对企业日益多样的业务诉求…

AtCoder - ABC 326 - D - ABC Puzzle (DFS)

看了很多题解都是写了一大坨&#xff0c;看起来非常的混乱&#xff0c;然而自己去写的时候又不可避免的写了一坨&#xff0c;只能尽可能的去优化代码可读性。 Time Limit: 4 sec / Memory Limit: 1024 MB 问题陈述 给你一个整数 N N N 和长度为 N N N 的字符串 R R R 和 …

763. 划分字母区间(力扣LeetCode)

763. 划分字母区间 题目描述 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串…

Web开发基本流程

Web是全球广域网&#xff0c;能够通过浏览器访问的网站。我们要访问网站&#xff0c;首先要在浏览器输入对应的域名。 浏览器也是一个程序&#xff0c;京东的网站也是一个程序&#xff0c;在京东那边电脑运行着&#xff0c;我们只是通过浏览器远程访问。京东的程序由三个部分组…

【题目】【网络系统管理】2022 年全国职业院校技能大赛 网络系统管理赛项 模块 A:网络构建

2022 年全国职业院校技能大赛 网络系统管理赛项 模块 A&#xff1a;网络构建 目录 考试说明 … 3 任务描述 … 3 任务清单 … 3 &#xff08;一&#xff09;基础配置 … 3 &#xff08;二&#xff09;有线网络配置 … 4 &#xff08;三&#xff09;无线网络配置 … 5 &…

深入解析MD5哈希算法:原理、应用与安全性

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 本文将深入探讨MD5哈希算法的工作原理、应用场景以及安全性问题。我们将了解MD5如何生成固定长度的哈希值&#xff0c;以及它在数…

PHiSeg:捕捉医学图像分割中的不确定性

PHiSeg&#xff1a;捕捉医学图像分割中的不确定性 摘要引言方法 PHiSeg Capturing Uncertainty in Medical Image Segmentation 摘要 解剖结构和病理的分割本质上是模糊的。例如&#xff0c;结构边界可能不清晰可见&#xff0c;或者不同的专家可能具有不同的注释风格。大多数当…

C++ 之多态虚函数原理及应用

文章目录 多态基本概念和原理虚函数的基本原理和概念虚析构和纯虚析构多重继承中的虚函数小结 多态基本概念和原理 多态的基本概念 **多态是C面向对象三大特性之一** 多态的定义 多态是一种面向对象编程概念&#xff0c;指同一个行为&#xff08;方法&#xff09;在不同的对象上…

Java上机实验报告(4)

实验 &#xff08;4&#xff09; 项目名称&#xff1a;子类与继承-求圆柱和圆锥 一、 实验报告内容一般包括以下几个内容&#xff1a; 实验项目名称 实验4 子类与继承-求圆柱和圆锥实验目的和要求 本实验的目的&#xff1a; &#xff08;1&#xff09;掌握&#xff08;继承&a…

JavaScript 定时器详解

定时器 ​ JavaScript 在浏览器中是单线程执行的&#xff0c;但允许使用定时器指定在某个时间之后或每隔一段时间就执行相应的代码。setTimeout() 用于指定在一定时间后执行某些代码&#xff0c;而 setInterval() 用于指定每隔一段时间执行某些代码。 setTimeout() 方法 ​ …

【前端学习——js篇】5.事件循环

详细&#xff1a;https://github.com/febobo/web-interview 5.事件循环 js是一种单线程语言&#xff0c;同一时间内只能做一件事情&#xff0c;为了避免单线程阻塞的方法就是事件循环。 在javascript当中&#xff0c;所有的任务都可以分为&#xff1a; 同步任务&#xff1a;按…

Windows10 Version22h2 补丁kb5034441更新失败

By wdhuag 20240328 参考: Windows10安装KB5034441更新报错0x80070643_2024-01 适用于 windows 10 version 22h2 安全更新,适合基于 x64 -CSDN博客 windows10&#xff08;KB5034441&#xff09;更新失败报错 0x80070643解决方法_kb5034441更新失败-CSDN博客 如何修复 Windo…

07|Java IO流与网络编程入门教程:通俗易懂,实例丰富

一、IO流概念与应用 什么是IO流? 想象一下水管流水,水从一端流入流出的过程就像是数据在程序中的传输。在Java世界里,IO流就是这样一个抽象概念,它是数据在不同存储介质或网络之间传输的一种方式。简单来说,如果你把数据看作水流,那么IO流就是承载这个水流的管道,它可以…

01.ArcEngine中IField的属性详细描述

目录 0.代码样例 1. AliasName 2.CheckValue 3.DefaultValue 4.Domain 5.DomainFixed 6.Editable 7.GeometryDef 8.IsNullable 9.Length 10.Name 11.Precision 12.Required 13.Scale 14.Type 15.VarType 0.代码样例 IFields fields featureclass…

双通道内存@DDR5多通道内存

文章目录 多通道内存DDR4及以前的内存的双通道DDR5往后的双通道和多通道半位宽4通道组合 其他组合测试 DDR5介绍概览重要Features特点 总结 多通道内存 DDR4及以前的内存的双通道 双通道内存是一种内存架构设计&#xff0c;通过在主板上配置两个或多个独立且同时工作的内存控制…

管理阿里云服务器ECS -- 网站选型和搭建

小云&#xff1a;我已经学会了如何登录云服务器ECS了&#xff0c;但是要如何搭建网站呢&#xff1f; 老王&#xff1a;目前有很多的个人网站系统软件&#xff0c;其中 WordPress 是使用非常广泛的一款&#xff0c;而且也可以把 WordPress 当作一个内容管理系统&#xff08;CMS…

使用yolov9来实现人体姿态识别估计(定位图像或视频中人体的关键部位)教程+代码

yolov9人体姿态识别&#xff1a; 相较于之前的YOLO版本&#xff0c;YOLOv9可能会进一步提升处理速度和精度&#xff0c;特别是在姿态估计场景中&#xff0c;通过改进网络结构、利用更高效的特征提取器以及优化损失函数等手段来提升对复杂人体姿态变化的捕捉能力。由于YOLOv9的…