$(document).ready(function(){
setInterval("run()",1000);
});
function run(){
var date = new Date();
change("hours", date.getHours());
change("minutes", date.getMinutes());
change("seconds", date.getSeconds());
$("#hours").html(date.getHours());
$("#minutes").html(date.getMinutes());
$("#seconds").html(date.getSeconds());
}
function change(id, date) {
if ($("#" + id + " span").html() != date) {
$("#" + id).hide();
$("#" + id).css("background", '#' + Math.floor(Math.random() * 16777215).toString(16));
$("#" + id).slideDown("fast");
}
}
----------------------------------------------------------------
<!DOCtype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jScript</title>
<link rel="stylesheet" href="stils.css" type="text/css">
<script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="clock">
<div id="hours">
<span>--</span>
</div>
<div id="minutes">
<span>--</span>
</div>
<div id="seconds">
<span>--</span>
</div>
</div>
</body>
</html>
------------------------------------------------------------------
body{
background:#E0E0E0;
}
#clock{
width:318px;
margin:auto;
border:1px solid #C0C0C0;
padding:3px;
background:#FFF;
margin-top:65px;
text-align:center;
}
#clock div{
display:inline-block;
width:30%;
margin:1%;
background:#0061AF;
height:100px;
line-height:100px;
color:#FFF;
font-size:42px;
text-shadow:1px 1px 1px #000;
border:1px solid #E0E0E0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Комментариев нет:
Отправить комментарий