第十章 JavaScript的应用课后习题

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

参考代码:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟</title>
	<style>
		.all{
			width: 600px;
			height: 300px;
			margin: 100px auto;
			text-align: center;
			font-size: 50px;
		}
		#clock{
			margin-top: 50px;
			margin-left: 100px;
			width: 400px;
			height: 100px;
			font-size: 100px;
			text-align: center;
			font: bold;
			color: black;
		}
		.text{
			font-size: 30px;
			font-weight: bold;
		}
	</style>
	<script type="text/javascript">
			function showTime(clock){
				var now = new Date();
				var hour = now.getHours();
				var minu = now.getMinutes();
				var second = now.getSeconds();
				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">
			<p>数字时钟</p >
			<div id ="clock"></div>
		</div>	
	</body>
</html>

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

参考代码:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>禁止下载</title>
		<style>
			img{
				width: 600px;
				height: 400px;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<p id="img">
			<img src="img/cat.jpg" />
		</p >
		<script type="text/javascript">
			var demo=document.getElementById("img");
			demo.oncontextmenu=a;
			function a(){
				alert("禁止下载图片!");
			}
			document.addEventListener('contextmenu',function(b){
				b.preventDefault();  //阻止上下文菜单
			});
		</script>
	</body>
</html>
相关推荐
小莞尔9 分钟前
【51单片机】【protues仿真】 基于51单片机八路抢答器系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
小桥风满袖21 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
少年阿闯~~25 分钟前
CSS3的新特性
前端·javascript·css3
我是菜鸟0713号30 分钟前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_32 分钟前
QT(4)
开发语言·汇编·c++·qt·算法
Brookty36 分钟前
【JavaEE】线程安全-内存可见性、指令全排序
java·开发语言·后端·java-ee·线程安全·内存可见性·指令重排序
百锦再1 小时前
[特殊字符] Python在CentOS系统执行深度指南
开发语言·python·plotly·django·centos·virtualenv·pygame
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
会开花的二叉树1 小时前
继承与组合:C++面向对象的核心
java·开发语言·c++