第一题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时走动的数字时钟</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: 100vh;
text-decoration: none;
text-align: center;
}
.top{
margin-top: 50px;
}
.main{
height: 120px;
width: 600px;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
#clock{
font-size: 60px;
color: #000;
letter-spacing: 10px;
}
</style>
</head>
<body>
<h1 class="top">数字时钟</h1>
<div class="main">
<div id="clock">12:00:00</div>
</div>
<script type="text/javascript">
let oClock = document.querySelector('#clock');
let addZero = (num) => {
if(num >= 10){
return num;
}else{
return `0${num}`;
}
}
let updateTime = () => {
let now = new Date();
let time = addZero(now.getHours()) + ":" +
addZero(now.getMinutes()) + ":" +
addZero(now.getSeconds());
oClock.innerText = time;
}
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
第二题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>禁止下载</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
width: 512px;
height: 328px;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body onclick="onClick(this)">
<img src="img/cat.jpg"/>
<script type="text/javascript">
function onClick(){
alert("禁止下载图片！")
}
</script>
</body>
</html>