24 Hour Clock

3c1bced4d2ef4f798501757a3b552a94

A simple 24 hour clock.

Parts List

• 1 × Countdown Timer

  1. timer (see snippet below)

• 1 × Text Slots

  1. clock (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• clock

  <style type="text/css">
  #clock {
      position:absolute;
      top:2in;
      width:700px;
      height:150px;
      overflow:hidden;
  }
  
  #clock.TwentyFour {
      left:250px;
  
  }
  
  #clock.Twelve{
      left:160px;
  }
  
  #clock dfn, 
  #clock var {
      height:150px;
      overflow:hidden;
      font-family:arial;
      font-size:85pt;
      display:block;
      text-align:right;
      font-style:normal;
      font-weight:bold;
  }
  
  #clock var.hour {
      position:absolute;
      left:0px;
      top:0px;
      width:140px;
      color:#FFF2C2;
  }
  
  #clock var.minute {
      position:absolute;
      left:170px;
      top:0px;
      width:140px;
      color:#7BAAB0;
  }
  
  #clock var.second {
      position:absolute;
      left:340px;
      top:0px;
      width:140px;
      color:#23201a;
  }
  
  #clock var.ampm {
      position:absolute;
      left:490px;
      top:0px;
      width:170px;
      color:#43403a;
  }
  
  #clock dfn.hm_divider {
      position:absolute;
      left:135px;
      top:-10px;
      width:40px;
      height:150px;
      text-align:left;
      color:#43403a;
  }
  
  #clock dfn.ms_divider {
      position:absolute;
      left:310px;
      top:-10px;
      width:40px;
      text-align:left;
      color:#43403a;
  }
  
  #clock.TwentyFour {
      left:250px;
  
  }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       id="clock"
       class="TwentyFour">
   <var field="hour"
        class="hour">
   </var>
  
   <dfn class="hm_divider">:
   </dfn>
  
   <var field="minute"
        class="minute">
   </var>
  
   <dfn class="ms_divider">:
   </dfn>
  
   <var field="second"
        class="second">
   </var>
  
  </div>

• timer

  <div properties="does_trigger_automatically:true,
                   does_use_local_time:true,
                   triggers_in_milliseconds:1000"
       script="http://js.constructibl.es/specs/Timer.js"
       id="timer"
       spec="1AB7DDEEA4BD428996C746CEA52FAE82">
  </div>

Technical Specifications

Inputs

No inputs are specified.

Outputs

No outputs are specified.