白桃立体时钟

2022-01-30 22:06:23 阅读：164 来源： 互联网

标签：156 clock 立体 rgb 白桃 time var 231 时钟

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

白桃立体时钟