当前位置: 首页 > news >正文

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

 

题目分析:

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

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

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

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.lryc.cn/news/326910.html

相关文章:

  • 【Redis教程0x08】详解Redis过期删除策略内存淘汰策略
  • 鸿蒙开发 TypeScript 基础语法
  • uniapp 未配置appkey或配置错误的解决
  • 【Android】【Bluetooth Stack】蓝牙电话协议之拨打电话分析(超详细)
  • 记录关于智能家居的路程的一个bug___Segmentation fault(段错误)
  • 由浅到深认识Java语言(39):网络编程
  • PCL 彩色点云RGB转灰度并显示
  • RHEL9部署Docker环境
  • Vue3.0云里雾里
  • idea类已经存在却报错
  • MySQL---视图
  • 策略路由-IP-Link-路由协议简介
  • 数位五五(Java)
  • 蓝桥杯G431RBT6——定时器中使用led冲突以及led与lcd冲突等一系列问题
  • 物联网(IoT)常用的通信协议
  • 关于C/C++,Linux/MacOS/Windows 平台虚拟内存分配
  • 如何在服务器上传/下载文件
  • C++ 之多态虚函数原理及应用
  • 亮数据——让你的IP走出去,让价值返回来
  • spring boot-引入Redis并封装redistemplate操作工具类
  • android 11 SystemUI 状态栏打开之后的界面层级关系说明之一
  • C#___锁(lock)
  • JAVA的sort用法详解(二维数组排序,List<>排序,lambada表达式,自定义类型排序)
  • 数据分析能力模型分析与展示
  • BUG未解之谜01-指针引用之谜
  • 数据库事务编程
  • 专题二_滑动窗口(1)
  • 把本地文件上传到HDFS上操作步骤
  • Leo赠书活动-21期 《一篇讲明白 Hadoop 生态的三大部件》
  • 【Redis】Redis 介绍Redis 为什么这么快?Redis数据结构Redis 和Memcache区别 ?为何Redis单线程效率也高?