首页 > 编程语言 >第十章 JavaScript的课后练习

第十章 JavaScript的课后练习

时间:2024-11-24 16:34:44浏览次数:7  
标签:img seconds JavaScript 第十章 hours 右键 var 课后练习 minutes

1.在网页中显示一个工作中的“数字时钟”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字时钟</title>
		<style type="text/css">
			div{
				font-size: 150px;
				text-align: center;
			}
			.div{
				font-size: 90px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="div">数字时钟</div>
		<div id="clock"></div>
		<script>
		        setInterval(function () {
		            var now = new Date();
					//得到时
		            var hours = now.getHours();
					//得到分
		            var minutes = now.getMinutes();
					//得到秒
		            var seconds = now.getSeconds();
					//三元运算符 :条件? 值1 : 值2
		            hours = hours < 10? "0"+hours:hours;
		            minutes = minutes < 10? "0"+minutes:minutes;
		            seconds = seconds < 10? "0"+seconds:seconds;
					//不断更新时间
		            document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
		        }, 1000);
		    </script>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>禁止使用鼠标右键</title>
		<style type="text/css">
			img{
				width: 600px;
				height: 400px;
				margin-left: 300px;
			}
		</style>
	</head>
	<body>
			<img src="/src/assets/logo.svg" id="img"/>
			
		<script type="text/javascript">
			var img=document.getElementById("img");
			//右键对图片的监听事件,onLoad:页面加载完时触发右键监听事件
			window.onload=function(){
			img.addEventListener("contextmenu",function(e){
				e.preventDefault();
				alert("禁止下载图片!");
			});
			}
		</script>
	</body>
</html>

标签:img,seconds,JavaScript,第十章,hours,右键,var,课后练习,minutes
From: https://blog.csdn.net/KO2131855283/article/details/143998950

相关文章

  • 第十章JavaScript的应用
    10.1JavaScript概述10.1.1JavaScript简介         JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言,能够与HTML(超文本标记语言)、Java语言一起在Web页面中与Web客户交互,它无须经过先将数据传给服务器端(Server)、再传回来的过程,而......
  • HTML学生个人网站作业设计:动漫网站设计——樱桃小丸子(6页) HTML+CSS+JavaScript 简单
    一、......
  • 一个基于原生 JavaScript 的简约消息提示插件,非常轻量,不依赖于任何第三方库或框架,使其
    在现代的Web开发中,提供良好的用户反馈是至关重要的。消息提示是其中一种最常见的方式之一,它可以用来向用户传达重要信息、警告或成功状态。然而,为了简化开发者的工作并提供一种轻量级、易于集成的解决方案,Dream-Msg应运而生。Dream-Msg是一个基于原生JavaScript的简约......
  • JavaScript基础简介
    内嵌内嵌JS指的是将JavaScript代码直接写在HTML文件的<script>标签中,通常放在<head>或<body>标签内。这种方式使得JavaScript代码与HTML结构紧密联系在一起,便于在单个HTML文件中进行简单的交互和动态效果实现。代码:效果:外嵌外嵌JS指的是将JavaScript代码写在独立的.js文......
  • 使用 JavaScript 的 XMLHttpRequest 或 Fetch API 发送 HTTP 请求时,GET 请求和 POST
    使用JavaScript的XMLHttpRequest或FetchAPI发送HTTP请求时,GET请求和POST请求处理参数的方式不同,这与HTTP协议的设计有关GET请求的参数特点:GET请求的参数通过URL传递。原因:URL表现方式:GET请求的主要目的是从服务器获取资源。URL是资源的唯一标识,因此GET......
  • C++,Java,Python,Javascript实现二分查找算法
    二分查找算法是一种在有序数组中查找特定元素的搜索算法。它的基本思想是将数组分成两半,通过比较中间元素与目标值来决定是在左半部分还是右半部分继续查找,从而逐步缩小查找范围直到找到目标值或者确定目标值不存在于数组中。下面是使用C++、Java、Python和JavaScript实现二......
  • [Javascript] Lazy Overriding
    Let'sseethefollowingcodefunctioncopyText(text){if(navigator.clipboard){navigator.clipboard.writeText(text);}else{constinput=document.createElement('input');input.setAttribute('value',text);......
  • 【前端】javaScript
    目录一、简述JS1.1引入方式二、基础语法2.1变量2.2数据类型2.3运算符2.4对象2.4.1数组2.4.2函数2.4.3对象三、JQuery3.1引⼊依赖3.2JQuery语法3.3JQuery选择器3.4JQuery事件3.5操作元素3.6常用方法一、简述JSjavaScript:JS:JavaScript(简称JS)......
  • 第十章JavaScript的应用
    10.1JavaScript概述10.1.1JavaScript简介JavaScript是一种基于对象(0bject)和事件驱动(EventDriven)并具有安全性能的脚本语言,能够与HTML(超文本标记语言)、Java语言一起在Web页面中与Web客户交互它无须经过先将数据传给服务器端(Server)、再传回来的过程,而直接可以由客......
  • 深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
    目录深入理解JavaScript中的Array.find()方法:原理、性能优势与实用案例详解一、引言:为什么要使用Array.find()二、Array.find()的使用与技巧1、基础语法2、返回值3、使用技巧三、Array.find()的优势与实际应用案例1、利用返回引用的优势修改数据2、查找嵌套数据......