修改的一个Css + JS制作的数字时钟

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css + JS制作的数字时钟代码</title>
<style type="text/css">
body{
background:#202020;
font:bold 12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:960px;
color:#bbbbbb; 
}
.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:8em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }
.sz{ width:120px; display:block; float:left; height:100px; overflow: hidden;}
.dt{ width:30px; margin-top:-6px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Create two variable with the names of the months and days in an array
    var monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
    var dayNames = ["周日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    // Create a newDate() object
    var newDate = new Date();
    // Extract the current date from Date object
    newDate.setDate(newDate.getDate());
    // Output the day, date, month and year    
    $('#Date').html(newDate.getFullYear() + '年' + (newDate.getMonth() + 1) + "月" + newDate.getDate() + "日" + "  " + dayNames[newDate.getDay()]);
    setInterval(function() {
        // Create a newDate() object and extract the seconds of the current time on the visitor's
        var seconds = new Date().getSeconds();
        // Add a leading zero to seconds value
        $("#sec").html((seconds < 10 ? "0": "") + seconds);
        $(".dot").fadeIn();
        $(".dot").fadeOut();
    },
    1000);
    setInterval(function() {
        // Create a newDate() object and extract the minutes of the current time on the visitor's
        var minutes = new Date().getMinutes();
        // Add a leading zero to the minutes value
        $("#min").html((minutes < 10 ? "0": "") + minutes);
    },
    1000);
    setInterval(function() {
        // Create a newDate() object and extract the hours of the current time on the visitor's
        var hours = new Date().getHours();
        // Add a leading zero to the hours value
        $("#hours").html((hours < 10 ? "0": "") + hours);
    },
    1000);
});
</script>
</head>
<body>
<div class="clock">
<div id="Date"></div>
<ul style="width:440px; height:100px;">
<li id="hours" class="sz">88</li>
    <li id="point" class="sz dt">:</li>
    <li id="min" class="sz">88</li>
    <li id="point" class="sz dt"><span class="dot">:</span></li>
    <li id="sec" class="sz">88</li>
</ul>
</div>
</body>
</html>
  • 88
  • :
  • 88
  • :
  • 88

posted on 2012-09-29 16:47  relax  阅读(1642)  评论(0编辑  收藏  举报