Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="clock">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
     <li>11</li>
     <li>12</li>
   </ul>
   <div class="hour hand"></div>
   <div class="minute hand"></div>
   <div class="second hand"></div>
 </div>
</body>
</html>
 
/* variables */
@radius:   200;
@innerRadius: 180;
@diameter: 400px;
@PIPI: `Math.PI*2`;
@PI2: `Math.PI/2`;
@hourWidth: 110;
@minuteWidth: 140;
@secondWidth: 160;
​
/* Handy mixins */
.rotate (@deg) {
    -webkit-transform: rotate(@deg);
    -moz-transform:      rotate(@deg);
    -ms-transform:       rotate(@deg);
    -o-transform:        rotate(@deg);
}
.transform-origin (@x:center, @y:center) {
    -webkit-transform-origin: @x @y;
    -moz-transform-origin:    @x @y;
    -ms-transform-origin:     @x @y;
    -o-transform-origin:      @x @y;
}
.box-shadow (@string) {
    -webkit-box-shadow: @string;
    -moz-box-shadow:    @string;
    box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:    @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:     @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
/* The clock itself */
​
.clock {
  width: @diameter;
  height: @diameter;
  position: relative;
  font: 18px monospace;
  font-weight: bold;
  color:#444;
  border: 12px solid #666;
  border-radius: 50%;
  background: #F0F0F0;
  .drop-shadow(0px, 4px);
  margin:0px auto;
}
​
/* Clock numbers */
.clock ul {
  padding: 0;
  margin: 0;
}
.clock li {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 10px;
  height: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
​
.numpos(@i) when (@i > 0) {
  .clock li:nth-child(@{i}) {
    top: ~`@{radius}+@{innerRadius}*Math.sin(@{PIPI}*@{i}/12-@{PI2})-10+'px'`;
    left: ~`@{radius}+@{innerRadius}*Math.cos(@{PIPI}*@{i}/12-@{PI2})-10+'px'`;
  }
  .numpos((@i - 1))
}
.numpos(12);
​
/* Clock hands */
.clock .hand {
  height: 4px;
  background: #000;
  position: absolute;
  .transform-origin(0, 0);
  top:@radius*1px-2;
  left:@radius*1px;
  .drop-shadow();
}
.clock .hand:before {
  content: " ";
  background: black;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  left: -6px;
  border-radius: 500%;
}
.clock .hour {
  width: @hourWidth*1px;
}
.clock .minute {
  width: @minuteWidth*1px;
}
.clock .second {
  height: 2px;
  width: @secondWidth*1px;
  top:@radius*1px-1;
}
​
.hourpos(@i, @j) when (@j >= 0) {
  .clock[data-hour="@{i}"][data-minute="@{j}"] .hour {
    .rotate((360*((@i+@j/60)/12)-90)*1deg);
  }
  .hourpos(@i, (@j - 1));
}
.hourloop(@n) when (@n >= 0) {
  .hourpos(@n, 60);
  .hourloop((@n - 1))
}
.hourloop(12);
​
.minutepos(@i) when (@i>= 0) {
  .clock[data-minute="@{i}"] .minute {
    .rotate((360*(@i/60)-90)*1deg);
  }
  .minutepos((@i - 1));
}
.minutepos(60);
​
​
.secondpos(@i) when (@i>= 0) {
  .clock[data-second="@{i}"] .second {
    .rotate((360*(@i/60)-90)*1deg);
  }
  .secondpos((@i - 1));
}
.secondpos(60);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sugendranpro
0viewers