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

news/2024/4/27 1:28:47

 

题目分析:

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

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

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

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.cpky.cn/p/11179.html

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

相关文章

蓝桥杯嵌入式学习笔记(6):IIC程序设计

目录 前言 1. IIC基本原理 2. 电路原理 3. 代码编程 3.1 预备工作 3.2 AT24C02写读功能编写 3.2.1 AT24C02写操作实现 3.2.2 AT24C02读操作实现 3.3 MCP4017写读功能编写 3.3.1 MCP4017写操作实现 3.3.2 MCP4017读操作实现 3.4 main.c编写 3.4.1 头文件引用 3.4.…

面试算法-94-将有序数组转换为二叉搜索树

题目 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 平衡 二叉搜索树。 示例 1: 输入:nums [-10,-3,0,5,9] 输出:[0,-3,9,-10,null,5] 解释:[0,-10,5,null,-3,null,9] 也将被视…

Go打造REST Server【二】:用路由的三方库来实现

前言 在之前的文章中,我们用Go的标准库来实现了服务器,JSON渲染重构为辅助函数,使特定的路由处理程序相当简洁。 我们剩下的问题是路径路由逻辑,这是所有编写无依赖HTTP服务器的人都会遇到的问题,除非服务器只处理一到…

Ubuntu 配置 kubernetes 学习环境,让外部访问 dashboard

Ubuntu 配置 kubernetes 学习环境 一、安装 1. minikube 首先下载一下 minikube,这是一个单机版的 k8s,只需要有容器环境就可以轻松启动和学习 k8s。 首先你需要有Docker、QEMU、Hyperkit等其中之一的容器环境,以下使用 docker 进行。 对…

C++第十三弹---内存管理(下)

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】 目录 1、operator new与operator delete函数 1.1、operator new与operator delete函数 2、new和delete的实现原理 2.1、内置类型 2.2、自定义类型 …

通过Appium和Xcode Accessibility Inspector获取iOS应用元素定位的方法

在 iOS 移动应用程序上使用选择器查找元素定位是我们在移动端 UI 自动化测试的先决条件。 但是,由于应用程序内容在原生 iOS 应用程序中的呈现方式,我们可以用来定位应用程序元素的选择器与 Web 浏览器元素有很大不同。 在本文中,我们将了解 …