jQuery和css3實現的電子錶效果

antzone發表於2017-04-18
jQueryCSSS3

本章節分享一段程式碼例項，它實現了電子錶效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  background:#202020;
  font:bold 12px Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
  min-width:960px;
  color:#bbbbbb; 
}
a { 
  text-decoration:none; 
  color:#00c6ff;
}
 
h1 {
  font: 4em normal Arial, Helvetica, sans-serif;
  padding: 20px;        
  margin: 0;
  text-align:center;
}
h1 small{
  font:0.2em normal  Arial, Helvetica, sans-serif;
  text-transform:uppercase; 
  letter-spacing:0.2em; 
  line-height:5em;
  display:block;
}
h2 {
  font-weight:700;
  color:#bbb;
  font-size:20px;
}
 
h2, p{
  margin-bottom:10px;
}
 
@font-face {
  font-family: 'BebasNeueRegular';
  src: url('BebasNeue-webfont.eot');
  src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
       url('BebasNeue-webfont.woff') format('woff'),
       url('BebasNeue-webfont.ttf') format('truetype'),
       url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.container {
  width:960px; 
  margin:0 auto; 
  overflow:hidden;
}
.clock{
  width:800px; 
  margin:0 auto; 
  padding:30px; 
  border:1px solid #333; 
  color:#fff; 
}
#Date{ 
  font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; 
  font-size:36px; 
  text-align:center; 
  text-shadow:0 0 5px #00c6ff; 
}
ul { 
  width:800px; 
  margin:0 auto; 
  padding:0px; 
  list-style:none; 
  text-align:center; 
}
ul li { 
  display:inline; 
  font-size:10em; 
  text-align:center; 
  font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; 
  text-shadow:0 0 5px #00c6ff; 
}
#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 20px #00c6ff;}
  50% {opacity:0; text-shadow:none; }
  100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }        
}
@-moz-keyframes mymove {
  0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
  50% {opacity:0; text-shadow:none; }
  100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }        
}
 
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var monthNames=["January","February","March","April","May","June","July","August","September","October","November","December"]; 
  var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
  var newDate = new Date();
  newDate.setDate(newDate.getDate());
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
 
  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">
  <div id="Date"></div>
  <ul>
    <li id="hours"> </li>
    <li id="point">:</li>
    <li id="min"> </li>
    <li id="point">:</li>
    <li id="sec"> </li>
  </ul>
</div>
</body>
</html>

相關文章