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

十、JavaScript的应用的习题

news 2025/9/21 0:34:39

题目一

        在网页中显示一个工作中的 “ 数字时钟 ”，如图所示

 运行效果

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟</title><style>.all{width: 660px;height: 350px;margin: 60px auto;text-align: center;font-size: 50px;}#clock{margin: 0 auto;width: 400px;height: 100px;font-size: 100px;text-align: center;font: bold;color: black;}</style><script type="text/javascript">function showTime(clock) {var now = new Date();var hour = now.getHours().toString().padStart(2, '0');var minu = now.getMinutes().toString().padStart(2, '0');var second = now.getSeconds().toString().padStart(2, '0');var time = hour + ":" + minu + ":" + second;clock.innerHTML = time;}window.onload = function(){var clock = document.getElementById("clock");window.setInterval("showTime(clock)",1000);}</script></head><body><div class="all"><h4>数字时钟</h4><div id ="clock"></div></div>	</body>
</html>

代码解析

  1. function showTime(clock)函数：
    • 首先使用var now = new Date();创建了一个Date对象实例，用于获取当前的日期和时间信息。
    • 然后通过now.getHours()、now.getMinutes()和now.getSeconds()分别获取当前时间的小时数、分钟数和秒数，它们返回的是数字类型的值。为了使时间格式在显示时更加规范（保持两位数的格式，例如 01、02 等），使用了toString()方法将获取到的数字转换为字符串，并调用padStart(2, '0')方法进行处理。padStart方法会检查字符串的长度，如果不足指定的长度（这里是 2 位），就在字符串的开头填充指定的字符（这里是'0'）。
    • 最后将格式化后的小时、分钟和秒数通过字符串拼接的方式组合成hour + ":" + minu + ":" + second这样的格式，例如 “09:30:15”，并将这个时间字符串赋值给clock.innerHTML，也就是将其显示在页面中id为clock的那个div元素内，实现时钟时间的更新显示。
  2. window.onload事件处理函数：
    • window.onload是一个在页面所有元素（包括图片、脚本等）加载完成后触发的事件。在这里面，首先通过var clock = document.getElementById("clock");使用document.getElementById()方法获取到页面中id为 “clock” 的div元素，并将其存储在变量clock中，以便后续操作。
    • 接着使用window.setInterval("showTime(clock)", 1000);来启动一个定时器。这里的setInterval函数会每隔指定的时间间隔（单位是毫秒，这里设置为 1000 毫秒，即 1 秒）执行一次传入的函数。不过如前面所述，这种使用字符串形式传递函数调用的方式不太好，它会隐式地使用eval()来解析字符串并执行函数，存在安全风险且不符合最佳实践。理想的做法是传递函数的引用，像window.setInterval(function () { showTime(clock); }, 1000);这样，但原代码的目的就是每隔 1 秒调用一次showTime函数，并传入clock元素对象，让时钟时间能够动态更新，实现每秒显示当前最新时间的效果。

题目二

         制作一个“ 禁止使用鼠标右键 ”操作的网页。当浏览者在页面上右击时，自动弹出一个警告对话框，禁止用户使用右键快捷菜单。

 

运行效果

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>禁止下载</title><style>.container {width: 100%;height: 400px;text-align: center;}img {max-width: 100%;height: auto;}</style>
</head>
<body><div class="container"><img src="img/cat.jpg" alt="猫"></div><script>document.addEventListener('contextmenu', function(event) {event.preventDefault(); // 阻止默认的右键菜单行为alert("禁止下载图片！"); // 弹出警告对话框});</script>
</body>
</html>

代码讲解

1. 事件监听部分

  • document.addEventListener('contextmenu', function(event) {... });：这里使用了addEventListener方法来监听document对象（也就是整个 HTML 文档）上的contextmenu事件。contextmenu事件在用户在页面上点击鼠标右键（触发右键菜单操作）时被触发。通过添加这个监听器，就可以捕获到用户的右键点击行为，并执行相应的自定义逻辑。

2. 阻止默认行为和弹出警告

  • event.preventDefault();：在事件处理函数内部，首先调用了event对象的preventDefault方法。对于contextmenu事件来说，浏览器默认的行为是弹出右键菜单，而这行代码的作用就是阻止浏览器执行这个默认行为，也就是不让右键菜单显示出来，达到限制用户进行常规右键操作（比如通常右键菜单里有保存图片等与下载相关的选项）的目的。
  • alert("禁止下载图片！");：紧接着，使用alert函数弹出一个警告对话框，对话框中显示 “禁止下载图片！” 的提示信息，告知用户当前页面禁止进行图片下载操作，从交互层面上明确传达了页面的限制规则，让用户知晓不能通过常规的右键方式来下载图片。

相关文章：

十、JavaScript的应用的习题

题目一 在网页中显示一个工作中的 “ 数字时钟 ”&#xff0c;如图所示 运行效果 代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>动态时钟</title><style>.all{width: 660px;height: 350px;margin: 60p…...

编程日记 2024/12/6 23:32:21

【Spring】AOP

AOP&#xff08;Aspect Oriented Programming&#xff0c;面向切面编程&#xff09;是一种编程范式&#xff0c;用来帮助开发者更好地组织程序结构。它的主要作用是为现有功能添加增强&#xff0c;而不需要修改原始代码。这与 Spring 框架提倡的“无侵入式编程”相符&#xff0…...

编程日记 2024/12/6 23:30:18

三维地图，智慧城市，商业智能BI，数据可视化大屏（Cesiumjs/UE）

绘图工具 三维地图&#xff1a;Cesiumjs 建模方式&#xff1a;激光点云建模、航拍倾斜摄影建模、GIS建模、BIM建模、手工建模 建模工具&#xff1a;C4D Blender GeoBuilding ArcGIS Cesiumjs <!DOCTYPE html> <html lang"en"> <head><meta …...

编程日记 2024/12/6 23:27:15

鸿蒙Next通过oss上传照片到阿里云

前言 最近在写纯血鸿蒙的APP&#xff0c;需要用到oss上传照片&#xff0c;之前的客户端 Android 和 IOS 都已经实现了&#xff0c;获取的阿里云签名的上传地址是服务端实现的&#xff0c;相信大部分公司都是这样的模式&#xff0c;服务端也是调用阿里云的SDK来实现的&#xff…...

编程日记 2024/12/6 23:24:12

小白爬虫——selenium入门超详细教程

目录 一、selenium简介 二、环境安装 2.1、安装Selenium 2.2、浏览器驱动安装 三、基本操作 3.1、对页面进行操作 3.1.1、初始化webdriver 3.1.2、打开网页 3.1.3、页面操作 3.1.4、页面数据提取 3.1.5、关闭页面 3.1.6、综合小案例 3.2、对页面元素进行操作 3.2.…...

编程日记 2024/12/6 23:22:09

nlp培训重点

1. SGD梯度下降公式 当梯度大于0时&#xff0c;变小&#xff0c;往左边找梯度接近0的值。 当梯度小于0时&#xff0c;减去一个负数会变大&#xff0c;往右边找梯度接近0的值&#xff0c;此时梯度从负数到0上升 2.Adam优化器实现原理 #coding:utf8import torch import torch.n…...

编程日记 2024/12/6 23:21:08

什么是多模态和模态

文章目录 前言一、定义1. 模态 (Modal)2. 非模态 (Non-modal) 二、GUI中1. 模态&#xff08;Modal&#xff09;对话框2. 非模态&#xff08;Modeless&#xff09;对话框 三、模态 vs 非模态 的对比四、何时使用模态和非模态对话框&#xff1f;五、Qt 中 exec() 与 show() 的区别…...

编程日记 2024/12/6 23:20:07

apache中的Worker 和 Prefork 之间的区别是什么?

文章目录 内存使用稳定性兼容性适用场景 Apache中的Worker和Prefork两种工作模式在内存使用、稳定性以及兼容性等方面存在区别 内存使用 Worker&#xff1a;由于使用线程&#xff0c;内存占用较少。Prefork&#xff1a;每个进程独立运行&#xff0c;内存消耗较大。 稳定性 W…...

编程日记 2024/12/6 23:19:06

系统监控——分布式链路追踪系统

摘要 本文深入探讨了分布式链路追踪系统的必要性与实施细节。随着软件架构的复杂化&#xff0c;传统的日志分析方法已不足以应对问题定位的需求。文章首先解释了链路追踪的基本概念&#xff0c;如Trace和Span&#xff0c;并讨论了其基本原理。接着&#xff0c;文章介绍了SkyWa…...

编程日记 2024/12/6 23:18:04

【Python]深入Python日志管理：从logging到分布式日志追踪的完整指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 日志是软件开发中的核心部分，尤其在分布式系统中，日志对于调试和问题定位至关重要。本篇文章将从Python标准库的logging模块出发，逐步探讨日志管理的最佳实践，涵盖日志配置、日志分层、日志格式化等基…...

编程日记 2024/12/6 23:17:03

DHCP Client的工作方式

【运作方式】 一开始Client没有IP资料 DHCPDISCOVER Client发出DHCPDISCOVER广播封包&#xff08;UDP port 67&#xff09;&#xff0c;寻找DHCP Server。 DHCPOFFER Client开始监听UDP port 68 &#xff08;任何&#xff09;DHCP Server收到DHCPDISCOVER封包后&#xff…...

编程日记 2024/12/6 23:16:02

docker-常用应用部署dockerfile模板

文章目录 概述Springboot-Djava.security.egdfile:/dev/./urandom参数说明 vue应用部署nginx.conf配置Dockerfile 概述 本文列举了Java开发中常用如SpringBoot、Vue前端等类型的应用Docker部署所需的DockerFile Springboot FROM anapsix/alpine-java:8_server-jre_unlimited…...

编程日记 2024/12/6 23:15:01

Unity3D学习FPS游戏（13）玩家血量控制

玩家血量控制 血条UI玩家Canvas下的Slider血量逻辑控制 子弹攻击掉血子弹发射者的区分玩家受伤逻辑子弹碰撞检测 效果 血条UI 和之前我们前面介绍的玩家武器弹夹UI的思路是一样的&#xff0c;跟详细的细节可以参考博客Unity3D装弹和弹夹UI显示。 玩家Canvas下的Slider 之前玩…...

编程日记 2024/12/6 23:08:52

TDesign：Switch开关

Switch 开关 文档地址 view TDSwitch(isOn: controller.isDefault, // 默认是否开启状态trackOnColor: AppColors.mainColor,onChanged: ((bool value){controller.onTapSwitch(value);return value;}), ),controller bool isDefault true; // 是否默认 void onTapSwitch(bool…...

编程日记 2024/12/6 23:06:50

AI在SEO中的应用与关键词优化探讨

内容概要 在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术为搜索引擎优化&#xff08;SEO&#xff09;带来了革命性的改变。传统的SEO主要依赖于人为的经验和判断&#xff0c;而AI则通过算法分析海量数据&#xff0c;提供更加精准和高效的方式优化关键词…...

编程日记 2024/12/6 23:05:48

[docker中首次配置git环境与时间同步问题]

11月没写东西&#xff0c;12月初赶紧水一篇。 刚开始搭建docker服务器时&#xff0c;网上找一堆指令配置好git后&#xff0c;再次新建容器后忘记怎么配了&#xff0c;&#xff0c;这次记录下。 一、git ssh指令法&#xff0c;该方法不用每次提交时输入密码 前期准备&#xff0…...

编程日记 2024/12/6 23:01:43

使用lumerical脚本语言创建绘制波导并进行数据分析（纯代码实现）（1）

使用lumerical脚本语言创建绘制波导、配置二维模式求解器、计算模式轮廓、计算有效折射率（neff）和群折射率（ng）随波长的变化关系、计算有效折射率（neff）随波导宽度的变化关系及针对有效折射率法进行相关数据处理（代码均有注释详解）。 一、绘制波导结构 1.1 代码实现 w…...

编程日记 2024/12/6 22:59:40

redis.conf

tracking-table-max-keys tracking-table-max-keys 是 Redis 中的一个配置选项&#xff0c;它与 Key Tracking 功能有关。Key Tracking 是 Redis 6.0 引入的一项功能&#xff0c;用于追踪哪些键在被客户端操作时发生了变化。 tracking-table-max-keys 的作用&#xff1a; 该配置…...

编程日记 2024/12/6 22:58:38

泷羽sec学习打卡-shell命令8

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于shell的那些事儿-shell8 until循环(直到为止)case语句func函数定义实践是检验真理的唯一标准 别问&…...

编程日记 2024/12/6 22:57:37

割草机器人架构设计和技术应用

题目&#xff1a;割草机器人项目的系统架构设计与技术应用 摘要&#xff1a; 随着智能家居和自动化技术的发展&#xff0c;割草机器人作为一种便捷的园艺工具逐渐进入市场。本论文以我参与管理和开发的割草机器人项目为例&#xff0c;详细阐述了项目中采用的关键技术、系统架…...

编程日记 2024/12/6 22:52:32

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/9/19 11:15:46

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/8/21 6:35:28

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/9/20 5:54:33

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/9/13 17:37:48

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/9/2 17:49:26

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/9/14 1:29:18