基于JS和JQuery实现的两种时钟效果（5）

时间：2019-08-31 13:17:42 阅读：50 评论：0 收藏：0 [点我收藏+]

在上几篇博文中介绍了基于js和jQuery实现了表盘时钟，接下来将去实现数码管时钟

数码管时钟-创建工程-基本布局

实现数码管用到的素材：

链接：https://pan.baidu.com/s/1kfb_YskyDzpuRxEtbOWsyg
提取码：e233
创建工程：ClockLed.html

布局完成的显示效果：

技术分享图片

实现该布局的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .ledback{
 8                 background: url(img/LED.png) 0px 0px no-repeat;
 9                 width: 740px;
10                 height: 300px;
11                 margin: auto;
12                 background-size: 100% 100%;
13                 
14             }
15         </style>
16     </head>
17     <body>
18         
19         <div class="ledback"></div>
20     </body>
21 </html>

布局

计划实现:

技术分享图片

首先用三个div来实现上方的布局：

技术分享图片

<div class="ledback">
            <div class="top1"></div>
                <div class="timediv"></div>
                <div class="datediv"></div>
            
            
        </div>

数码管时钟-时间布局

开始出现的效果：

技术分享图片

实现该效果的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .ledback{
 8                 background: url(img/LED.png) 0px 0px no-repeat;
 9                 width: 740px;
10                 height: 300px;
11                 margin: auto;
12                 background-size: 100% 100%;
13                 
14             }
15             .top1{
16                 
17                 width: 100%;
18                 height: 15%;
19                 background-color: red;
20                 opacity: 0.6;
21             }
22             /*基本样式*/
23             .timediv{
24                 
25                 width: 100%;
26                 height: 38%;
27                 background-color: green;
28                 opacity: 0.6;
29             }
30             .timenum{
31                 width: 50px;
32                 height: 100px;
33                 background:url(img/countdown8.png) -38px -13px no-repeat ;
34                 
35                 
36             }
37             
38             /*日期样式*/
39             .datediv{
40                 
41                 width: 100%;
42                 height: 36%;
43                 background-color: blue;
44                 opacity: 0.6;
45             }
46         </style>
47     </head>
48     <body>
49         
50         <div class="ledback">
51             <div class="top1"></div>
52                 <div class="timediv">
53                     <!--显示小时-->
54                     <div class="timenum"></div>
55                     <div class="timenum"></div>
56                     <!--显示冒号-->
57                     <div ></div>
58                     <!--显示分钟-->
59                     <div class="timenum"></div>
60                     <div class="timenum"></div>
61                     <!--显示冒号-->
62                     <div ></div>
63                     <!--显示秒-->
64                     <div class="timenum"></div>
65                     <div class="timenum"></div>
66                 </div>
67                 <div class="datediv"></div>
68             
69             
70         </div>
71     </body>
72 </html>

数字没有并在一排的效果代码

如何使它们并在一行去呢！

有两种方式：使用左浮动和设置内联块元素，设置内联块元素的优点让父元素的内容居中，可以更好的让时分秒进行显示，这样的效果比较好

设置内联块元素的效果：

技术分享图片

使用了后代选择器进行设置内联块元素

display: inline-block;

 1 .timediv{
 2                 
 3                 width: 100%;
 4                 height: 38%;
 5                 background-color: green;
 6                 opacity: 0.6;
 7                 text-align: center;
 8             }
 9             /*后代选择器timediv后代元素第一层div*/
10             .timediv>div{
11                 
12                 display: inline-block;
13                 
14                 
15             }

冒号的显示:由于冒号位于时间显示的第三个孩子和第6个孩子，因此使用后代选择器具体到某一个孩子的书写方式：

技术分享图片

css:

/*冒号的样式*/
            
            .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
                
                
                width: 20px;
                height: 100px;
                background: url(img/dot.png) -52px -13px no-repeat;
            }

并对timediv中所有孩子的div进行斜切：

/*后代选择器timediv后代元素第一层div*/
            .timediv>div{
                
                display: inline-block;
                transform: skewX(-10deg);/*斜切*/
                
                
            }

实现效果图：

技术分享图片

数码管时钟-VerticalAlign样式说明

vertical-align是css中的一种属性，那么它有什么的含义呢？

在Photoshop中是父元素与子元素垂直居中

技术分享图片

先来举个栗子：

为何要特别说明vertical-align呢？因为他经常被误认为子元素内容的居中

技术分享图片

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7     <style>
 8         .app>div{
 9             display: inline-block;
10             vertical-align:  bottom;
11         }
12         .div0{
13             width: 30px;
14             height: 50px;
15             background-color: red;
16         }
17         .div1{
18             width: 30px;
19             height: 70px;
20             background-color: green;
21         }
22         .div2{
23             width: 30px;
24             height: 90px;
25             background-color: blue;
26         }
27         
28     </style>
29     </head>
30     <body>
31         <div class="app">
32         <div class="div0"></div>
33         <div class="div1"></div>
34         <div class="div2"></div>
35             
36         </div>
37     </body>
38 </html>

vertical-align例子代码

数码管时钟-日期和星期布局

最终布局的效果：

技术分享图片

日期和星期的布局：

<!--日期布局-->
                <div class="datediv">
                    <!--xxxx年xx月xx日 星期x布局-->
                    <div class="datenum"></div>
                    <div class="datenum"></div>
                    <div class="datenum"></div>
                    <div class="datenum"></div>
                    <div >年</div>
                    <div class="datenum"></div>
                    <div class="datenum"></div>
                    <div >月</div>
                    <div class="datenum"></div>
                    <div class="datenum"></div>
                    <div>日</div>
                    <div class="">星期</div>
                    <div class="datenum"></div>
                    
                    
                    
                    
                    
                </div>

样式：

/*日期样式*/
            .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(img/countdown8.png) -15px -1px no-repeat;
                background-size: 178% 123%;
            }

实现所有数码时钟的布局：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             .ledback{
  8                 background: url(img/LED.png) 0px 0px no-repeat;
  9                 width: 740px;
 10                 height: 300px;
 11                 margin: auto;
 12                 background-size: 100% 100%;
 13                 
 14             }
 15             .top1{
 16                 
 17                 width: 100%;
 18                 height: 15%;
 19                 /*background-color: red;*/
 20                 /*opacity: 0.6;*/
 21             }
 22             /*时间样式*/
 23             
 24             .timediv{
 25                 
 26                 width: 100%;
 27                 height: 38%;
 28                 /*background-color: green;
 29                 opacity: 0.6;*/
 30                 text-align: center;
 31             }
 32             /*后代选择器timediv后代元素第一层div*/
 33             .timediv>div{
 34                 
 35                 display: inline-block;
 36                 transform: skewX(-10deg);/*斜切*/
 37                 
 38                 
 39                 
 40             }
 41             
 42             /*冒号的样式*/
 43             
 44             .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
 45                 
 46                 
 47                 width: 20px;
 48                 height: 100px;
 49                 background: url(img/dot.png) -52px -13px no-repeat;
 50             }
 51             /*时间的数字*/
 52             .timenum{
 53                 width: 50px;
 54                 height: 100px;
 55                 background:url(img/countdown8.png) -38px -13px no-repeat ;
 56                 
 57                 
 58             }
 59             
 60             /*日期样式*/
 61             .datediv{
 62                 
 63                 width: 100%;
 64                 height: 36%;
 65                 /*background-color: blue;*/
 66                 /*opacity: 0.6;*/
 67                 text-align: center;
 68                 
 69             }
 70             
 71             .datediv>div{
 72                 
 73                 display: inline-block;
 74                 transform: skewX(-10deg);/*斜切*/
 75                 font-size: 50px;
 76                 vertical-align: middle;
 77                 color: white;
 78                 
 79                 
 80             }
 81             .datenum{
 82                 width: 39px;
 83               height: 73px;
 84               background:  url(img/countdown8.png) -15px -1px no-repeat;
 85                 background-size: 178% 123%;
 86             }
 87         </style>
 88         
 89         
 90         
 91     </head>
 92     <body>
 93         
 94         <div class="ledback">
 95             <!--占位布局-->
 96             <div class="top1"></div>
 97             
 98             <!--时分秒布局-->
 99                 <div class="timediv">
100                     <!--显示小时-->
101                     <div class="timenum"></div>
102                     <div class="timenum"></div>
103                     <!--显示冒号-->
104                     <div ></div>
105                     <!--显示分钟-->
106                     <div class="timenum"></div>
107                     <div class="timenum"></div>
108                     <!--显示冒号-->
109                     <div ></div>
110                     <!--显示秒-->
111                     <div class="timenum"></div>
112                     <div class="timenum"></div>
113                 </div>
114                 
115                 <!--日期布局-->
116                 <div class="datediv">
117                     <!--xxxx年xx月xx日 星期x布局-->
118                     <div class="datenum"></div>
119                     <div class="datenum"></div>
120                     <div class="datenum"></div>
121                     <div class="datenum"></div>
122                     <div >年</div>
123                     <div class="datenum"></div>
124                     <div class="datenum"></div>
125                     <div >月</div>
126                     <div class="datenum"></div>
127                     <div class="datenum"></div>
128                     <div>日</div>
129                     <div class="">星期</div>
130                     <div class="datenum"></div>
131                     
132                     
133                     
134                     
135                     
136                 </div>
137             
138             
139         </div>
140     </body>
141 </html>

数码时钟布局代码

在下一篇博文中将使用jQuery实现根据当前时间变化数码时钟

基于JS和JQuery实现的两种时钟效果（5）

原文：https://www.cnblogs.com/jiguiyan/p/11438223.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)