白桃立体时钟
作者:互联网
html代码:
<div class="container">
<div class="clock"></div>
</div>
css代码:
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
/* 弹性布局 */
display: flex;
/* 百分之百视口高度 */
height: 100vh;
/* 水平垂直居中 */
justify-content: center;
align-items: center;
/* 背景色:白桃色 */
background-color:#eacccc ;
}
.container{
text-align: center;
line-height: 30vh;
width: 80vh;
height: 30vh;
border:2px solid #deafaf;
font-size: 150px;
color:#fff;
/* 文字阴影 实现3D效果 */
text-shadow:0 1px 0 #deafaf,
0 2px 0 #bda8a8,
0 3px 0 #d8a1a1,
0 4px 0 #d59999,
0 5px 0 #d29292,
0 6px 0 #cf8b8b,
0 7px 0 #cc8484,
0 8px 0 #c97d7d,
0 0 5px rgb(231,156,0,0.05),
0 -1px 3px rgb(231,156,156,0.2),
0 9px 9px rgb(231,156,156,0.3),
0 12px 12px rgb(231,156,156,0.3),
0 15px 15px rgb(231,156,156,0.3);
}
</style>
js代码:
<script>
// 日期对象
var time=new Date();
// 获取元素
var clock=document.querySelector('.clock');
function mytime()
{
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;
// 赋值
clock.innerHTML=h+':'+m+':'+s;
}
// 每隔一秒调用一次函数
setInterval(mytime,1000);
</script>
标签:156,clock,立体,rgb,白桃,time,var,231,时钟 来源: https://blog.csdn.net/qq_61838861/article/details/122756356