实现两种时钟效果
572人加入学习
(3人评价)
Future老师带你使用JS和JQuery实现两种时钟效果

完成于2019-07-13 开发工具WebStorm10.0.3 Jquery3.4.2

价格 免费
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            /* background-color:red; */
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            /* background-color:green; */
            /* opacity:0.6; */
            text-align:center;
        }
        /* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 选择timediv下的div,第三个div和第六个div */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            /* background-color:blue; */
            /* opacity:0.6; */
            text-align:center;
        }
        .datediv>div{
            display:inline-block;
            transform:skewX(-10deg);
            font-size:50px;
            vertical-align:middle;
            color:white;
        }
        .datenum{
            width:39px;
            height:73px;
            background:url("./imgs/countdown8.png") -27px -2px no-repeat;
            background-size:241% 118%;
        }
    </style>
</head>
<body>
    <div class="ledback">
        <!-- 占位DIV -->
        <div class="top1"></div>
        <!-- 时分秒布局 -->
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <!-- XXXX年XX月XX日星期X布局 -->
        <div class="datediv">
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">年</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">月</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">日</div>
            <div class="">星期</div>
            <div class="datenum"></div>
        </div>
    </div>
</body>
</html>

 

[展开全文]

授课教师

专注Unity的VR开发

课程特色

下载资料(1)
视频(22)

学员动态