انجمن کدستانMoisrex

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"> <div class="container">

<div class="app">

<div class="clock">

<div class="clock-inner">

<div class="clock-center"></div> <div id="clock-seconds"></div> <div id="clock-minutes"></div> <div id="clock-hours"></div>

<ul class="clock-numbers">

<li>12</li> <li>3</li> <li>6</li> <li>9</li>

</ul> </div> <!-- end clock-inner --> </div> <!-- end clock --> </div> <!-- end app --> </div> <!-- end container -->

(function() {

var clockSeconds = document.getElementById('clock-seconds'), clockMinutes = document.getElementById('clock-minutes'), clockHours = document.getElementById('clock-hours');

function getTime() {

var date = new Date(), seconds = date.getSeconds(), minutes = date.getMinutes(), hours = date.getHours(),

degSeconds = seconds * 360 / 60, degMinutes = (minutes + seconds / 60) * 360 / 60, degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);'); clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);'); clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);'); }

setInterval(getTime, 1000); getTime(); <script>

p { margin: 0; }

ul { list-style: none; margin: 0; padding: 0;}

/* ---------- GENERAL-CLASSES ---------- */

.container { height: 228px; left: 50%; margin: -124px 0 0 -100px; position: absolute; top: 50%; width: 200px;}

/* ---------- APP ---------- */

.app { text-align: center;}

.app-title { font-size: 24px; font-weight: bold; text-shadow: 0 5px #15181f;}

.clock { background: #1a1d24; border-radius: 35px; -webkit-box-shadow: 0 8px 0 #15181f; box-shadow: 0 8px 0 #15181f; height: 200px; margin-bottom: 24px; position: relative; width: 200px;}

.clock-inner { background: #f9f9f9; border-radius: 50%; height: 160px; left: 50%; margin: -80px 0 0 -80px; position: absolute; top: 50%; width: 160px;}

.clock-center,#clock-seconds,#clock-minutes,#clock-hours { left: 50%; position: absolute; top: 50%;}

.clock-center { background: #1a1d24; border-radius: 50%; height: 12px; margin: -6px 0 0 -6px; width: 12px; z-index: 4;}

#clock-seconds { background: #c40206; border-radius: 2px; height: 60px; margin: -60px 0 0 -1px; -webkit-transform-origin: 1px 60px; -moz-transform-origin: 1px 60px; -ms-transform-origin: 1px 60px; -o-transform-origin: 1px 60px; transform-origin: 1px 60px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); width: 2px; z-index: 3;}

#clock-minutes { background: #aaa; border-radius: 4px; height: 50px; margin: -50px 0 0 -2px; -webkit-transform-origin: 2px 50px; -moz-transform-origin: 2px 50px; -ms-transform-origin: 2px 50px; -o-transform-origin: 2px 50px; transform-origin: 2px 50px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); width: 4px; z-index: 2;}

#clock-hours { background: #1a1d24; border-radius: 4px; height: 40px; margin: -40px 0 0 -2px; -webkit-transform-origin: 2px 40px; -moz-transform-origin: 2px 40px; -ms-transform-origin: 2px 40px; -o-transform-origin: 2px 40px; transform-origin: 2px 40px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); width: 4px; z-index: 1;}

.clock-numbers { color: #888; display: block; font-size: 16px; font-weight: bold; height: 120px; margin: -60px 0 0 -60px; left: 50%; position: absolute; top: 50%; width: 120px;}

.clock-numbers li { height: 20px; line-height: 20px; margin: -10px; position: absolute; text-align: center; width: 20px;}

.clock-numbers li:nth-child(1) { left: 50%; top: 0;}

.clock-numbers li:nth-child(2) { right: 0; top: 50%;}

.clock-numbers li:nth-child(3) { bottom: 0; left: 50%;}