效果展示:
代码:
<!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>
<title>实时时钟显示</title>
<style>
#getTime {
display: flex;
width: 650px;
height: 100px;
border-width: 3px;
border-style: solid;
border-color: gray;
background-color: pink;
border-radius: 15px;
background: url(../img6.jpg) no-repeat ;
text-decoration: none;
color: burlywood;
font-size: 30px;
line-height: 100px;
padding-left: 30px;
}
</style>
</head>
<body>
<div id="getTime">
<script type="text/javascript">
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
document.getElementById("getTime").innerHTML ="今天是:" + year + "年" + month + "月" + dates + "日 " + arr[day]+" "+ h + ":" + m + ":" + s;
};
setInterval("getTime()", 1000);
</script>
</div>
</body>
</html>