题目一
在网页中显示一个工作中的 “ 数字时钟 ”,如图所示
运行效果
代码
<!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>
代码解析
- 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元素内,实现时钟时间的更新显示。
- 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函数弹出一个警告对话框,对话框中显示 “禁止下载图片!” 的提示信息,告知用户当前页面禁止进行图片下载操作,从交互层面上明确传达了页面的限制规则,让用户知晓不能通过常规的右键方式来下载图片。