» » Use jQuery and CSS3 to create digital clock (CSS3 part)

 

Use jQuery and CSS3 to create digital clock (CSS3 part)

Author: bamboo06 on 25-10-2014, 06:39, views: 3874

7
Digital clock countdown can be applied in some effect WEB, WEB Alarm effects and HTML5-based WEB APP, the article will introduce without the aid of any pictures, showing how to use CSS3 and HTML to create a very nice digital clock effect.


HTML
We first prepare a clock region #clock on the page, and put the figures you want to show on .digits.
<div id="clock" class="light"> 
    <div class="display"> 
        <div class="digits"> 
            ...digits
        </div> 
    </div> 
</div> 

We are ready to show the digital clock format HH: mm: ss, which consists of eight minutes and seconds and two digital delimiter ":" composed figure is composed by seven short bars, such as the number 8 which consists of seven short bars form, we use .d1 ~ .d7 seven in the span element in html to determine the effect of different digital display through the CSS. The following code is added to the .digits, use the value of the class represented 0-9 style from zero to nine, using .dot said interval symbols.
Use jQuery and CSS3 to create digital clock (CSS3 part)
<div class="eight"> 
    <span class="d1"></span> 
    <span class="d2"></span> 
    <span class="d3"></span> 
    <span class="d4"></span> 
    <span class="d5"></span> 
    <span class="d6"></span> 
    <span class="d7"></span> 
</div> 

CSS3
We set each digit span of transparency is 0, that is not visible by default, by the CSS3: before and: after setting features to make the bars represent numbers of corner effects.
#clock .digits div{ 
    text-align:left; 
    position:relative; 
    width: 28px; 
    height:50px; 
    display:inline-block; 
    margin:0 4px; 
} 
 
#clock .digits div span{ 
    opacity:0; 
    position:absolute; 
 
    -webkit-transition:0.25s; 
    -moz-transition:0.25s; 
    transition:0.25s; 
} 
 
#clock .digits div span:before, 
#clock .digits div span:after{ 
    content:''; 
    position:absolute; 
    width:0; 
    height:0; 
    border:5px solid transparent; 
} 
 
#clock .digits .d1{            height:5px;width:16px;top:0;left:6px;} 
#clock .digits .d1:before{    border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} 
#clock .digits .d1:after{    border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} 

Then we will figure corresponds to the span element dl ~ d7, according to figures to determine which bars the display or not display the root, that set its opacity value of 1.
/* 0 */ 
#clock .digits div.zero .d1, 
#clock .digits div.zero .d3, 
#clock .digits div.zero .d4, 
#clock .digits div.zero .d5, 
#clock .digits div.zero .d6, 
#clock .digits div.zero .d7{ 
    opacity:1; 
} 

Finally, according to demo provides complete documentation improvement css code, which you can see a beautiful digital clock, then how to make digital clock really run up, we see the introduction of the next article.

Category: Javascript / CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
21 July 2017 16:59

Christopher Jones

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
appreciate you for genuinely so kind and then for deciding on this kind of informative and useful post. I hope most people are really want such a share on this topic. And also online resource offered the thoughts about paper writing service reviews, Which includes amazing insight on direct access of paper writing.

<
  • 0 Comments
  • 0 Articles
8 January 2018 15:31

Jacob Prowse

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
CSS3 and the 9use jquery can be efficiently used for the making of digital clock that is very advanced in its features and services. The tutorial for making digital clock by using css3 and jquery has been shared by the academic help services for the technology students.

<
  • 0 Comments
  • 0 Articles
18 January 2018 11:12

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing... Natural Food

<
  • 0 Comments
  • 0 Articles
22 January 2018 06:17

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is exciting, nevertheless it is vital for you to visit this specific url: I Love You Quotes

<
  • 0 Comments
  • 0 Articles
25 January 2018 06:43

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
These things are very important, good think so - I think so too... Cocoa Butter

<
  • 0 Comments
  • 0 Articles
30 January 2018 18:45

Harry

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I am a student of computer science and I like to spend time in reading stuff related to it. This post is very informative for me which is about Use jQuery and CSS3 to create digital clock. This website contains a lot of informative stuff for students like me and I will must recommend others to visit here.
Industrial castor wheels for sale in UK

I am happy to be on this website, you have posted very nice tutorial which i like reading. I have gained lot of knowledge which i did not know before.
Garment Racking to hang dresses

<
  • 0 Comments
  • 0 Articles
23 February 2018 16:58

watch

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Although there is rolex replica no black watch color watch in the visual sense of omega replica impact, but carefully watch the black watch that low-key beauty is swiss rolex less than the color of the watch. With the right apparel, but also can have a replica watches uk strong sense of presence.

Information
Comment on the news site is possible only within (days) days from the date of publication.