第十章：作业
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<title>数字时钟</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
font-size: 48px;
margin: 0;
}
.clock {
font-size: 64px;
font-weight: bold;
color: #333;
}
.label {
font-size: 24px;
margin-top: -10px;
color: #666;
}
</style>
</head>
<body>
<h1 class="label">数字时钟</h1>
<div class="clock" id="clock">00:00:00</div>
<script>
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock(); // 初始化时钟
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止右键操作</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.message {
padding: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 8px;
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
img {
max-width: 80%;
height: auto; /* 自适应高度 */
border-radius: 8px;
}
</style>
</head>
<body>
<div class="message">请勿使用鼠标右键！</div>
< img src="img/cat.jpg" alt="猫咪图片" />
<script>
document.body.oncontextmenu = function(event) {
event.preventDefault();
alert("禁止下载图片！");
};
</script>
</body>
</html>
原文地址：https://blog.csdn.net/2402_83970805/article/details/144012718
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！