CSS3数字时钟

2024-04-27 15:11:47

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS3数字时钟</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 type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script type="text/Javascript">$(document).ready(function() {// Create two variable with the names of the months and days in an arrayvar monthNames = [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ]; var dayNames= ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]// Create a newDate() objectvar newDate = new Date();// Extract the current date from Date objectnewDate.setDate(newDate.getDate());// Output the day, date, month and year    $('#Date').html(newDate.getFullYear() + '年' + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getDate() + ' ' + dayNames[newDate.getDay()]);//newDate.getFullYear()年//monthNames[newDate.getMonth()]月//newDate.getDate()日//dayNames[newDate.getDay()]星期setInterval( function() {// Create a newDate() object and extract the seconds of the current time on the visitor'svar seconds = new Date().getSeconds();// Add a leading zero to seconds value$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);},1000);setInterval( function() {// Create a newDate() object and extract the minutes of the current time on the visitor'svar 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'svar 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><li id="hours"> </li>    <li id="point">:</li>    <li id="min"> </li>    <li id="point">:</li>    <li id="sec"> </li></ul></div></body></html>

上一篇：$.ajax()方法详解

下一篇：window.opaen()