html,js炫彩时钟

最新推荐文章于 2023-01-19 15:41:48 发布

蚂蚁小草

最新推荐文章于 2023-01-19 15:41:48 发布

阅读量864

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/yueruitao/article/details/69388990

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 100%;
background-color: black;
/*开启弹性布局*/
display: flex;
text-align: center;
/*让弹性布局中的子元素水平方向居中对齐，center中心*/
justify-content: center;
/*让弹性布局中的子元素垂直对齐方向居中对齐*/
align-items: center;
overflow: hidden;
/*color: white;*/
}

#time{
color: blue;
font-size: 100px;
font-family: Impact, Charcoal, sans-serif;
text-shadow: 5px 5px 5px #FF0000;
height: 150px;
background: repeating-linear-gradient(gold, violet 20%, green 30%,blue 30%); /* 标准的语法（必须放在最后） */
}
#date{
color: red;
font-size: 60px;

font-family: arial;
text-shadow: 5px 5px 2px #3300FF;
background: repeating-radial-gradient(blue, cyan 10%, green 15%); /* 标准的语法（必须放在最后） */
}
#grad {
height: 1000px;
width: 2300px;
/*设置背景的渐变*/
background: linear-gradient(to right,red,blue,green,blue,red);
}

</style>
</head>
<body>
<div id="grad">
<div>
<p id="time">08:08:08</p>
<p id="date">8年8月8日</p>

</div>
</div>
<script type="text/javascript">
setInterval(updateTime,500);
updateTime();
function updateTime(){
var taday=new Date();
console.log(taday);

var h=taday.getHours();
var m=taday.getMinutes();
var s=taday.getSeconds();//在小于10的数字前加一个0

hours=h<10? '0'+h:h;
minutes=m<10? '0'+m:m;
seconds=s<10? '0'+s:s;
// document.getElementById('time').innerHTML=hours+':'+minutes+':'+seconds;

var years=taday.getFullYear();
var month=taday.getMonth()+1;
var day=taday.getDate();
var week=taday.getDay();

month=month<10 ?'0'+month:month;
day=day<10?'0'+day:day;

switch (week) {
case 0:
week='星期日'
break;
case 1:
week='星期一'
break;
case 2:
week='星期二'
break;
case 3:
week='星期三'
break
case 4:
week='星期四'
break;
case 5:
week='星期五'
break;
case 6:
week='星期六'
break;
}
document.getElementById('time').innerHTML=hours+':'+minutes+':'+seconds;
document.getElementById('date').innerHTML=years+'年'+month+'月'+day+'日'+week;
}
</script>

</script>
</body>
</html>