htmledit_views">
作业1
html"><!DOCTYPE html>
<html lang="zh-CN">
<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
html"><!DOCTYPE html>
<html lang="zh-CN">
<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>
