效果图如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
@font-face {
font-family: 'YaliHoon';
src: url("../fonts/字魂逍遥行书.woff") format('woff');
}
div {
width: 750px;
height: 140px;
line-height: 140px;
font-family: 'YaliHoon';
font-size: 90px;
box-shadow: 10px -10px 7px rgba(191, 187, 187,0.5) ;
position: absolute;
top: calc(50% - 70px);
left: calc(50% - 350px);
color: blue;
}
</style>
<script>
function getCurrentTime(){
var current = new Date();
var year = current.getFullYear();
var month = current.getMonth() + 1;
var date = current.getDate();
var hour = current.getHours();
var minutes = current.getMinutes();
var seconds = current.getSeconds();
var currentString = year + "-" + month + "-" + date + " " + hour + ":" + minutes + ":" + seconds;
return currentString;
}
function refreshTime(){
document.getElementById('time').innerHTML = getCurrentTime();
}
window.onload = function(){
setInterval(refreshTime,1000);
}
</script>
</head>
<body>
<div id="time">
</div>
</body>
</html>
其中增加了样式,关键部分为<script></script>
和<body></body>
中的内容。
JS代码解释如下:
- getCurrentTime()函数用于获取时间字符串。
- refreshTime()函数用于将时间字符串插入到
<div>
中 - window.onload的作用是说网页一打开就开始执行赋值给它的函数,而该函数的功能就是每隔1000ms就执行一次refreshTime()函数。
解释完成。
样式部分解释如下:
- 通过
@font-face{...}
引入了自定义字体。详细内容参考@font-face -CSS box-shadow
的作用是给边框添加阴影。详细内容参考box-shadow -CSS