简单的数字时钟
程序员文章站
2022-03-26 17:28:47
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.time>div{
float: left;
}
.time{
width: 530px;
/*padding: 0 30px;*/
height: 100px;
background: linear-gradient(#0268C0,#6DABE2);
margin: 0 auto;
}
.time span{
font-size: 55px;
}
*{
color: white;
padding: 0;
margin: 0;
}
.times>span{
font-size: 20px;
}
.left{
padding-left: 20px;
text-align: right;
width: 230px;
line-height: 100px;
}
.right{
margin-top: 15px;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="time">
<div class="left">
<span id="h"></span>
<span>:</span>
<span id="m"></span>
<strong id="s"></strong>
</div>
<div class="right">
<p id="xingqi" style="font-size: 30px;"></p>
<p class="times">
<span id="year"></span>
<span id="moth"></span>
<span id="day" ></span>
</p>
</div>
</div>
<script>
var h = document.getElementById("h")
var m = document.getElementById("m")
var s = document.getElementById("s")
var year = document.getElementById("year")
var moth = document.getElementById("moth")
var day = document.getElementById("day")
var xingqi = document.getElementById("xingqi")
function show(){
var date = new Date();
console.log(date)
var find_h = date.getHours();
var find_m = date.getMinutes();
var find_s = date.getSeconds();
var find_year = date.getFullYear();
var find_moth = date.getMonth();
var find_moth = date.getMonth();
var find_day = date.getDate();
var find_xingqi = date.getDay();
var arr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六",]
h.innerHTML = find_h;
m.innerHTML = find_m;
s.innerHTML = find_s;
year.innerHTML = find_year+"年";
moth.innerHTML = Number(find_moth+1)+"月";
day.innerHTML = find_day+"日";
xingqi.innerHTML = arr[(find_xingqi)]
setTimeout(show,1000);
}
show();
</script>
</body>
</html>
上一篇： prev()的10篇内容推荐