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

 

题目分析:

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

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

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

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.rhkb.cn/news/289020.html

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

相关文章

哪款软件适合做书单的背景图片?安利这3款

哪款软件适合做书单的背景图片?在数字化时代,书单作为推广阅读文化、分享书籍信息的重要载体,其视觉效果与内容的吸引力同等重要。一个精美的书单背景图片,不仅能够吸引读者的眼球,还能增强书单的传播效果。因此&#…

Redis 教程系列之Redis 集群配置(十三)

1.Redis集群方案比较 主从模式 在软件的架构中,主从模式(Master-Slave)是使用较多的一种架构。主(Master)和从(Slave)分别部署在不同的服务器上,当主节点服务器写入数据时,同时也会将数据同步至从节点服务器,通常情况下,主节点负责写入数据,而从节点负责读取数据。…

Java I/O

什么是 IO流? 存储和读取数据的解决方案 I: input O: output 流:像水流一样传输数据 IO流的作用? 用于读写数据(本地文件,网络) IO流从 传输方式 分类 字符是给人看的,字节是给计算机看的。 …

八、C#计数排序算法

简介 计数排序是一种非比较性的排序算法,适用于排序一定范围内的整数。它的基本思想是通过统计每个元素的出现次数,然后根据元素的大小依次输出排序结果。 实现原理 首先找出待排序数组中的最大值max和最小值min。 创建一个长度为max-min1的数组count…

Java:反射 reflection ( 概念+相关类+使用方法)

文章目录 一、反射(reflection)1.概念优点:缺点 2.反射的相关类1.Class类1.**反射机制的起源**2.获得类相关的方法3.获得类中属性的相关方法4.获得类中注解相关的方法5.获得类中构造器相关的方法6.获得类中方法相关的方法 2.获取Class对象的三种方法:1.使…

【算法刷题】链表笔试题解析(1)

一、链表分割 题目描述: 链接:链表分割 题目分析: 这题直接处理并不好做,我们可以构建前后两个链表,将小于x值的结点放在链表a内,将其它结点放在链表b内,这样将原链表遍历完后,原链…

JAVA------基础篇

java基础 1.JDK JDK :java development kit JRE:java runtime environment JDK包含JRE java跨平台:因为java程序运行依赖虚拟机,虚拟机需要有对应操作系统的版本,而jre中有虚拟机。 当你想要在Linux系统下运行,则需要…

(数据类型)前端八股文修炼Day1

1.JavaScript有哪些数据类型,它们的区别 JavaScript中有以下种数据类型: 基本数据类型(Primitive Data Types): String:表示文本数据,用单引号()或双引号(…

【C语言】strcmp 的使⽤和模拟实现

前言 这篇文章将要带我们去实现模拟一个strcmp函数 首先我们要知道strcmp函数的定义 strcmp()定义和用法 我们先看一下strcmp在cplusplus网站中的定义 链接: link int strcmp ( const char * str1, const char * str2 );比较两个字符串将 C 字符串 str1 与 C 字符串 str2 …

4.Python数据分析—数据分析入门知识图谱索引(知识体系下篇)

4.Python数据分析—数据分析入门知识图谱&索引-知识体系下篇 一个人简介二机器学习基础2.1 监督学习与无监督学习2.1.1 监督学习:2.1.2 无监督学习: 2.2 特征工程2.3 常用机器学习算法概述2.3.1 监督学习算法:2.3.2 无监督学习算法&#…

数据结构/C++:位图 布隆过滤器

数据结构/C:位图 & 布隆过滤器 位图实现应用 布隆过滤器实现应用 哈希表通过映射关系,实现了O(1)的复杂度来查找数据。相比于其它数据结构,哈希在实践中是一个非常重要的思想,本博客将介绍哈希思想的两大应用,位图…

jmeter常用的函数

20211025白板 课前内容: 参数: 用户定义变量:它是一个全局变量,在启动运行时,获取一次值,在运行过程中,不会动态获取值。 用户定义变量,在启动时获取一次值,在运行过程中…

【Flutter 面试题】 什么是Flutter插件(Plugin)?如何使用和创建插件?

【Flutter 面试题】 什么是Flutter插件(Plugin)?如何使用和创建插件? 文章目录 写在前面口述回答补充说明使用插件创建插件 写在前面 🙋 关于我 ,小雨青年 👉 CSDN博客专家,GitChat…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 3月28日,星期四

每天一分钟,知晓天下事! 2024年3月28日 星期四 农历二月十九 1、 四部门:培育空中摆渡、私人包机等新业态,2030年形成万亿级市场规模。 2、 市监总局发文规范外卖营销防止浪费:不将主食纳入满减优惠展示范围。 3、 多…

Fortinet 核心高管团队访谈:计划在所有产品系列中引入生成式AI

近期,Fortinet 发布了2023 财年第四季度及全年财报,再创骄人业绩!新增客户超 2.5 万,账单收入超 60 亿美元……对此,Fortinet 创始人、董事长兼首席执行官谢青(Ken Xie);首席财务官K…

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(order_num),group by 另一个字段

前端学习<二>CSS基础——05-CSS样式表的继承性和层叠性

本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标…

Ubuntu 系统下安装 Nginx

目录 一、Nginx是什么 ​二、Ubuntu 系统下安装 Nginx 1、安装包下载 2、上传服务器并解压缩 3、依赖配置安装 4、生成编译脚本 ​5、编译 6、开始安装 7、设置为随机自启动 7.1、创建 nginx.service 文件,将以下内容粘贴到文件中 7.2、将 nginx.service…

极简wordpress网站模板

Pithy设计师wordpress网站模板 精练简洁的wordpress模板,设计师或设计工作室展示型网站模板。 https://www.jianzhanpress.com/?p6329

C++哈希hash:位图、布隆过滤器的实现及应用

一、位图实现 1.1位图的原理 所谓位图,就是用每一位来存放某种状态,适用于海量数据,数据无重复的场景。通常是用 来判断某个数据存不存在的。 当我们想查找某一个数据是否存在或者是否处于某种状态时,相比于直接对存放数据的容器…