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

news2024/9/28 15:27:20

 

题目分析:

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

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

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

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.coloradmin.cn/o/1550900.html

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

相关文章

Diffusion添加噪声noise的方式有哪些?怎么向图像中添加噪声?

添加噪声的方式大致分为两种,一种是每张图像在任意timestep都加入一样的均匀噪声,另一种是按照timestep添加不同程度的噪声 一、在任意timestep都加入一样的noise batch_size 32x_start torch.rand(batch_size,3,256,256) noise torch.randn_like(x_…

【spring】@Autowired注解学习

Autowired介绍 Spring框架是Java领域中一个非常重要的企业级应用开发框架,它提供了全面的编程和配置模型,旨在帮助开发者更快速、更简单地创建应用程序。在Spring框架中,Autowired是一个非常重要的注解,它用于实现依赖注入&#…

保研线性代数机器学习基础复习1

1.什么是代数(algebra)? 为了形式化一个概念,构建出有关这个概念的符号以及操作符号的公式。 2.什么是线性代数(linear algebra)? 一项关于向量以及操作向量的公式的研究。 3.举一些向量的例子&#x…

我的编程之路:从非计算机专业到Java开发工程师的成长之路 | 学习路线 | Java | 零基础 | 学习资源 | 自学

小伙伴们好,我是「 行走的程序喵」,感谢您阅读本文,欢迎三连~ 😻 【Java基础】专栏,Java基础知识全面详解:👉点击直达 🐱 【Mybatis框架】专栏,入门到基于XML的配置、以…

C语言运算符和表达式——赋值运算符

目录 变量的定义 赋值运算符 赋值表达式 如何给变量赋值 变量的定义 声明变量的名字和类型 变量的类型决定了 *占用内存空间的大小 *数据的存储形式 *合法的表数范围 *可参与的运算种类 *变量名标识了内存中的一个存储单元 问题:未被初始化的变量的值是什么&a…

yolov8 pose keypoint解读

yolov8进行关键点检测的代码如下: from ultralytics import YOLO# Load a model model YOLO(yolov8n.pt) # pretrained YOLOv8n model# Run batched inference on a list of images results model([im1.jpg, im2.jpg]) # return a list of Results objects# Pr…

PCL拟合并绘制平面(二)

使用RANSAC拟合点云平面 1、C实现2、效果图 普通的点云平面拟合方式在一般情况下可以得到较好的平面拟合效果,但是容易出现平面拟合错误或是拟合的平面不是最优的情况。此时就需要根据自己的实际使用情况,调整平面拟合的迭代次数以及收敛条件。 使用RAN…

浏览器工作原理与实践--调用栈:为什么JavaScript代码会出现栈溢出

在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript引擎先会对其进行编译,并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范。 那么接下来我们就来明确下,哪些情况下代码才算是“一段”代码&am…

TheMoon 恶意软件短时间感染 6,000 台华硕路由器以获取代理服务

文章目录 针对华硕路由器Faceless代理服务预防措施 一种名为"TheMoon"的新变种恶意软件僵尸网络已经被发现正在侵入全球88个国家数千台过时的小型办公室与家庭办公室(SOHO)路由器以及物联网设备。 "TheMoon"与“Faceless”代理服务有关联,该服务…

46秒AI生成真人视频爆火,遭在线打假「换口型、声音」

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站 每天给大家更新可用的国内可用chatGPT资源 更多资源欢迎关注 是炒作还是真正的 AI 视频能力进化? AI 生成视频已经发展到这个程度了吗? 前段时间,英国王室凯特…

每天能提醒自己做事的app有哪个?

在忙碌的日常生活和工作中,我们时常面临各种任务和琐事。一旦处理不及时,很容易导致遗忘,进而给自己带来不必要的麻烦和损失。因此,拥有一款能够高效提醒我们做事的提醒app显得尤为重要。 敬业签就是这样一款实用的提醒软件。它不…

零基础10 天入门 Web3之第1天

10 天入门 Web3 Web3 是互联网的下一代,它将使人们拥有自己的数据并控制自己的在线体验。Web3 基于区块链技术,该技术为安全、透明和可信的交易提供支持。我准备做一个 10 天的学习计划,可帮助大家入门 Web3: 想要一起探讨学习的…

【氮化镓】位错对氮化镓(GaN)电子能量损失谱(EEL)的影响

本文献《Influence of dislocations on electron energy-loss spectra in gallium nitride》由C. J. Fall等人撰写,发表于2002年。研究团队通过第一性原理计算,探讨了位错对氮化镓(GaN)电子能量损失谱(EEL)…

python——修改注册表

如图:想要修改Public的值为2.2.1.1 import winreg# 定义要修改的键和新值 key_path rSOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList key_name Public new_name 2.2.1.1# 打开指定的键 # 注意此处是注册表路径拼接,此处是HKEY_LOCAL_MACH…

docker部署ubuntu

仓库: https://hub.docker.com/search?qUbuntu 拉一个Ubuntu镜像 docker pull ubuntu:18.04 查看本地镜像: docker images 运行容器 docker run -itd --name ubuntu-18-001 ubuntu:18.04 通过ps命令可以查看正在运行的容器信息 docker ps 进入容器 最…

Obsidian插件:增加目录栏 flating toc

一、插件介绍 增加目录栏 插件市场搜索 flating toc安装即可 二、使用 写文档时候可以看到左边默认出现目录 可以自己配置一些相关设置 最后也可以安装一下插件样式设置插件,自己按照自己喜好调整

leetcode —— 5.最长回文子串

题目: 给你一个字符串 s,找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同,则该字符串称为回文字符串。 示例 1: 输入:s "babad" 输出:"bab" 解释:"…

基础数据结构(蓝桥杯Python组)

链表 基础概念 链表可以快速插入、删除元素,用于存储数据。 每个节点维护两个部分:数据域和指针域数据域就是节点所存储的数据,指针其实就是下标(next,节点的下一个节点在哪)链表维护head和tail,每次从ta…

学浪视频提取

经过调查,学浪这个学习平台越来越多人使用了,但是学浪视频官方没有提供下载按钮,为了让这些人能够随时随地的观看视频,于是我钻研学浪视频的下载,终于研究出来了并且做成软件批量版 下面是学浪视频提取的软件,有需要的自己下载一下 链接:https://pan.baidu.com/s/…

由浅到深认识Java语言(36):I/O流

该文章Github地址:https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.c…