白桃立体时钟

本文主要是介绍白桃立体时钟，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

这篇关于白桃立体时钟的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！