Digitaluhr mit CSS und jQuery

Mit etwas CSS, jQuery, setInterval() und den JavaScript Zeitfunktionen ist es nicht schwer eine Uhr zusammen zu schustern. Etwas zu finden, wofür man das ganze gebrauchen kann dagegen schon eher – aber egal ;-)

<!DOCTYPE HTML>
<html>
<head>
 <title>Digital Clock with CSS and jQuery</title>
 <meta charset="utf-8">
 <style type="text/css">

 .container {
   margin: 50px auto;
 }

 .clock {
   width: 100%;
   margin: 0 auto;
   padding: 30px;
   color: #444;
 }

 ul {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   list-style: none;
   text-align: center;
 }

 ul li {
   display:inline;
   font-size: 10em;
   text-align: center;
   text-shadow: 0 0 4px #ccc;
 }

 #point {
   position:relative;
   -moz-animation: mymove 1s ease infinite;
   -webkit-animation: mymove 1s ease infinite;
   padding-left: 10px;
   padding-right: 10px;
 }

 @-webkit-keyframes mymove {
   0% {opacity: 1.0; text-shadow: 0 0 10px #ccc; }
   50% {opacity: 0; text-shadow: none; }
   100% {opacity: 1.0; text-shadow: 0 0 10px #ccc; }
 }

 @-moz-keyframes mymove {
   0% {opacity: 1.0; text-shadow: 0 0 10px #ccc; }
   50% {opacity: 0; text-shadow: none; }
   100% {opacity:1 .0; text-shadow: 0 0 10px #ccc; }
 }
 </style>

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {

 var newDate = new Date();
 newDate.setDate(newDate.getDate());

 setInterval( function() {
   var seconds = new Date().getSeconds();
   $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
 },1000);

 setInterval(function() {
   var minutes = new Date().getMinutes();
   $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
 },1000);

 setInterval(function() {
   var hours = new Date().getHours();
   $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
 }, 1000);

 });
 </script>
</head>

<body>
 <div class="clock">
   <ul>
     <li id="hours"> </li>
     <li id="point">:</li>
     <li id="min"> </li>
   </ul>
 </div>
</body>
</html>

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


38 − 34 =