第10章 JavaScript的应用作业
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="../img/cat.jpg" 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>