kloktest

test clock in w3.css

by backnext

HTML

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<title>klokje</title>

<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" type="text/css" href="css3clock.css" />

<body>

  <div id="liveclock" class="outer_face">
    <div class="marker oneseven"></div>
    <div class="marker twoeight"></div>
    <div class="marker fourten"></div>
    <div class="marker fiveeleven"></div>
    <div class="inner_face">
      <div class="hand hour"></div>
      <div class="hand minute"></div>
      <div class="hand second"></div>
    </div>
  </div>
<!--deze als externe file gezet in jsfiddle
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

  </script>
  -->


  <div class="w3-row w3-container" style="margin:5px 0">
    <div class="w3-third w3-container">
      <div class="w3-topbar w3-border-gray w3-padding-top">
        <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4" style="width:100%">
        <h2>test1</h2>
      </div>
    </div>

    <div class="w3-third w3-container">
      <div class="w3-topbar w3-border-gray w3-padding-top">
        <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4" style="width:100%">
        <h2>test2</h2>
      </div>
    </div>

    <div class="w3-third w3-container">
      <div class="w3-topbar w3-border-gray w3-padding-top">
        <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"...

CSS

.outer_face {
  position: relative;
  width: 200px;
  /* width of clock */
  height: 200px;
  /* height of clock */
  border-radius: 200px;
  /* clock round corner radius */
  background: white;
  box-shadow: inset 0 0 10px gray;
  border: 0 solid gray;
  /* thickness of outer border */
}

.outer_face::before,
.outer_face::after,
.outer_face .marker {
  /* time markers syle */
  content: "";
  position: absolute;
  width: 8px;
  /* width of 12-6 and 3-9 markers */
  height: 100%;
  background: black;
  z-index: 0;
  left: 50%;
  margin-left: -4px;
  /* set this value of 1/2 marker width */
  top: 0
}

.outer_face::after {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.outer_face .marker {
  background: gray;
  width: 6px;
  /* width of all other markers */
  margin-left: -3px/* set this value of 1/2 marker width */
}

.outer_face .marker.oneseven {
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg)
}

.outer_face .marker.twoeight {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg)
}

.outer_face .marker.fourten {
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg)
}

.outer_face .marker.fiveeleven {
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg)
}

.inner_face {
  position: relative;
  width: 88%;
  height: 88%;
  background: white;
  -moz-border-radius: 1000px;
  -webkit-border-radius: 1000px;
  border-radius: 1000px;
  z-index: 1000;
  left: 6%;
  /* set this value of 1/2 width value*/
  top: 6%/* set this value of 1/2 height value*/
}

.inner_face::before {
  /* clock center circle small */
  content: "";
  width: 18px;
  /* width of inner circle */
  height:...

JavaScript

/***********************************************
 * CSS3 Analog Clock- by JavaScript Kit (www.javascriptkit.com)
 * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
 ***********************************************/

var $hands = $('#liveclock div.hand')

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f) {
  setTimeout(f, 60)
}


function updateclock() {
  var curdate = new Date()
  var hour_as_degree = (curdate.getHours() + curdate.getMinutes() / 60) / 12 * 360
  var minute_as_degree = curdate.getMinutes() / 60 * 360
  var second_as_degree = (curdate.getSeconds() + curdate.getMilliseconds() / 1000) / 60 * 360
  $hands.filter('.hour').css({
    transform: 'rotate(' + hour_as_degree + 'deg)'
  })
  $hands.filter('.minute').css({
    transform: 'rotate(' + minute_as_degree + 'deg)'
  })
  $hands.filter('.second').css({
    transform: 'rotate(' + second_as_degree + 'deg)'
  })
  requestAnimationFrame(updateclock)
}

requestAnimationFrame(updateclock)