Create a digital clock with source code download Based on Jquery and CSS3 (CSS3) _ jquery

The digital clock is used in web countdown, web alarm clock effect, and html5-based webapp. This article introduces the download of the source code for creating a digital clock based on jquery and css3, if you are interested, let's take a look at it. If you are interested, you can download the source code.

Download demo source code

The digital clock can be applied to some WEB countdown effects, WEB alarm clock effects, and HTML5-based WEB apps. This article will introduce you without any image, how to Use CSS3 and HTML to create a very beautiful digital clock effect.

HTML

We first prepare a clock area # clock on the page, and place the number to be displayed in. digits.

  
   
... Number
  
 
 

The digital clock format HH: mm: ss we are going to display is composed of eight digits and two delimiters ":". The number is composed of seven short bars, for example, the number 8 consists of seven horizontal bars, which are used in html. d1 ~. D7 seven span elements are used to determine the Display Effect of Different numbers through CSS. Add the following code to the preceding. digits, use the class value from zero to nine to represent the 0-9 numeric style, and use. dot to represent the delimiter.

CSS3

We set the transparency of each number span to 0, that is, it is invisible by default. We use the before and after features of CSS3 to set the effect of the rotation angle for the horizontal bar representing the number.

# Clock. digits p {text-align: left; position: relative; width: 28px; height: 50px; display: inline-block; margin: 0 4px;} # clock. digits p span {opacity: 0; position: absolute;-webkit-transition: 0.25 s;-moz-transition: 0.25 s; transition: 0.25 s;} # clock. digits p span: before, # clock. digits p 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 convert the dl ~ D7: Determine which horizontal bar is displayed or not displayed based on the number, that is, set its opacity value to 1. /* 0 */# clock. digits p. zero. d1, # clock. digits p. zero. d3, # clock. digits p. zero. d4, # clock. digits p. zero. d5, # clock. digits p. zero. d6, # clock. digits p. zero. d7 {opacity: 1 ;}

Finally, according to the complete css document provided by the demo, we can see a beautiful digital clock. For how to make the digital clock really run, please refer to our introduction in the next article.