十、JavaScript的应用的习题

题目一

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

 运行效果

代码

<!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函数弹出一个警告对话框,对话框中显示 “禁止下载图片!” 的提示信息,告知用户当前页面禁止进行图片下载操作,从交互层面上明确传达了页面的限制规则,让用户知晓不能通过常规的右键方式来下载图片。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63077.shtml

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

相关文章

leetcode 1853 转换日期格式(postgresql)

需求 表: Days ----------------- | Column Name | Type | ----------------- | day | date | ----------------- day 是这个表的主键。 给定一个Days表&#xff0c;请你编写SQL查询语句&#xff0c;将Days表中的每一个日期转化为"day_name, month_name day, year"…

Day26颜色分类

给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地 对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sort 函数的情况下解决…

网络——HTTP与HTTPS三次握手和四次挥手

HTTP协议本身并不直接处理TCP连接的建立和关闭&#xff0c;这些是由底层的TCP协议来完成的。但是&#xff0c;由于HTTP通常运行在TCP之上&#xff0c;因此理解TCP的三次握手&#xff08;用于建立连接&#xff09;和四次挥手&#xff08;用于关闭连接&#xff09;对于理解HTTP通…

使用历史索引监控 Elasticsearch 索引生命周期管理

作者&#xff1a;来自 Elastic Stef Nestor 大家好&#xff01;在之前的一篇博客中&#xff0c;我们概述了常见的索引生命周期管理 (index lifecycle management - ILM) 问题及其解决方案。此后&#xff0c;我们已将这些常见场景添加到我们的 Elasticsearch 文档中&#xff0c;…

详尽的oracle sql函数

1&#xff0c;CHR 输入整数&#xff0c;返回对应字符。 用法&#xff1a;select chr(65),chr(78) from dual; 2&#xff0c;ASCII 输入字符&#xff0c;返回对应ASCII码。 用法&#xff1a;select ascii(A),ascii(B) from dual; 3&#xff0c;CONCAT 输入两个字符串&#xff0c…

Android 单元测试断言校验方法 org.junit.Assert

判断布尔值 assertTrue assertFalse 判断对象非空 assertNull(object); 案例&#xff1a; PersistableBundle result Util.getCarrierConfig(mockContext, subId);assertNull(result); 判断是否相等 assertEquals("mocked_string", result.toString()); package or…

Python语法之正则表达式详解以及re模块中的常用函数

正则表达式详解及re模块中的常用函数 概念、作用和步骤 概念&#xff1a; 本身也是一个字符串&#xff0c;其中的字符具有特殊含义&#xff0c;将来我们可以根据这个字符串【正则表达式】去处理其他的字符串&#xff0c;比如可以对其他字符串进行匹配&#xff0c;切分&#xf…

Linux 查看系统资源常用命令

目录 Linux 查看系统资源常用命令 一、top 二、htop 三、vmstat 四、iostat 五、mpstat 六、free 七、sar 八、ps 九、pstree 十、lsof 十一、uptime 十二、dmesg 十三、dmidecode 十四、lsblk 十五、blkid 十六、fdisk -l 十七、parted -l 十八、df -h 十…

【计算机网络】实验4:生成树协议STP的功能以及虚拟局域网VLAN

实验 4&#xff1a;生成树协议STP的功能以及虚拟局域网VLAN 一、 实验目的 加深对生成树协议STP的功能的理解。 了解虚拟局域网VLAN。 二、 实验环境 • Cisco Packet Tracer 模拟器 三、 实验内容 1、验证交换机生成树协议STP的功能 (1) 第一步&#xff1a;构建网络拓…

Linux中的常用基本指令(下)

Linux常用基本指令 Linux中的基本指令12.head指令13.tail指令简单解释重定向与管道(重要) 14.date指令(时间相关的指令)15.cal指令(不重要)16.find指令(灰常重要&#xff09;17.grep指令(重要)18.which指令和alias指令19.zip/unzip指令&#xff1a;20.tar指令&#xff08;重要&…

服务器数据恢复—硬盘掉线导致热备盘同步失败的RAID5阵列数据恢复案例

服务器存储数据恢复环境&#xff1a; 华为S5300存储中有12块FC硬盘&#xff0c;其中11块硬盘作为数据盘组建了一组RAID5阵列&#xff0c;剩下的1块硬盘作为热备盘使用。基于RAID的LUN分配给linux操作系统使用&#xff0c;存放的数据主要是Oracle数据库。 服务器存储故障&#…

Vue+vite 组件开发的环境准备

一.nodejs安装 进入Node.js 官网&#xff08;Node.js — Run JavaScript Everywhere&#xff09;&#xff0c;点击下载。 双击打开&#xff0c;进行安装 双击打开后&#xff0c;点击 next&#xff08;下一步&#xff09;,后面也是一直点击 next 无其他设置&#xff0c;直到 …

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件libtinfo.so.5的问题

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件libtinfo.so.5的问题 2024/11/29 20:41 缘起&#xff1a;中科创达的高通CM6125开发板的Android10的编译环境需要。 [ 11% 15993/135734] target Java source list: vr [ 11% 15994/135734] target …

react 路由鉴权

权限路由一般两种 1中接口中返回菜单 2 接口中返回权限&#xff0c;前端做匹配 一般都是那种结合&#xff0c;react中没有vue那种钩子函数如何做&#xff1f; 在项目中写一个高阶函数&#xff0c;在高阶函数中判断权限、是否登录等操作app.tsx或者man.tsx中使用 《AuthRouter》…

k8s集群中金丝雀发布 + 声明式资源管理yaml

一、K8S常见的发布方式 旨在降低发布风险并提高发布速度 1、蓝绿发布 两套环境&#xff08;设备&#xff09;交替升级&#xff0c;旧版本保留一定时间便于回滚 优点&#xff1a;对用户无感&#xff0c;是最安全的发布方式&#xff0c;业务稳定 缺点&#xff1a;需要两套系统&…

openssl的运用

一、概述 Opssl是一个用于TLS/SSL协议的工具包&#xff0c;也是一个通用密码库。 包含了国密sm2 sm3 sm4&#xff0c;包含了对称加密&#xff0c;非对称加密&#xff0c;单项散列&#xff0c;伪随机、签名&#xff0c;密码交换&#xff0c;证书等一些算法库。 为了深层次的学习…

基于SpringBoot+Vue的靓车汽车销售网站-无偿分享 (附源码+LW+调试)

目录 1. 项目技术 2. 功能菜单 3. 部分功能截图 4. 研究背景 5. 研究目的 6. 可行性分析 6.1 技术可行性 6.2 经济可行性 6.3 操作可行性 7. 系统设计 7.1 概述 7.2 系统流程和逻辑 7.3 系统结构 8. 数据库设计 8.1 数据库ER图 &#xff08;1&#xff09;材料分…

基于飞腾S2500处理器的全国产加固服务器

近日&#xff0c;西安康德航测电子科技有限公司凭借其深厚的行业底蕴和创新精神&#xff0c;正式推出了基于飞腾S2500处理器的全国产加固服务器。这一产品的问世&#xff0c;不仅标志着我国在信息技术领域的自立自强迈出了坚实的一步&#xff0c;更以其卓越的性能、坚固的设计和…

OpenStack-Glance组件

Glance Glance使用磁盘格式和容器格式基础配置镜像转换 Glance 是 OpenStack 的镜像服务&#xff0c;负责存储、发现和管理虚拟机镜像。它允许用户创建和共享镜像&#xff0c;用于启动虚拟机实例。 Glance 的主要功能 &#xff08;1&#xff09;虚拟机镜像的管理 支持镜像的上…

求助——AssertionError: Attribute pipeline is missing from configuration.json.

我在本地运行Sunsimiao大模型的时候遇到了“AssertionError: Attribute pipeline is missing from configuration.json.”的问题。在网上找了很多问题都没有解决&#xff0c;求助一下广大网友。有什么好的解决方法吗&#xff1f; 本地环境如上所示&#xff0c;不知是哪里出…