$(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));
var styleClass = "st" + ((Math.random().toFixed(1))*10);
$("#" + id).attr("class", styleClass);
; $("#" + id).slideDown("fast");
}
}
function timePlusHour(h) {
var date1 = new Date();
return new Date(date1.getYear(), date1.getMonth(), date1.getDate(), date1.getHours() + h );
}
_____________________________________
body{
background:#E0E0E0;
}
#clock{
width:350px;
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;
}
.st1{
font-family: 'Shadows Into Light', cursive;
font-weight:bold;
}
.st1{
font-family: 'Addiel';
src: url('fonts/addiel.ttf');
font-weight:bold;
}
.st2{
font-family: 'Akka';
src: url('fonts/akka.ttf');
font-weight:bold;
}
.st3{
font-family: 'VICTM';
src: url('fonts/VICTM.otf');
font-weight:bold;
}
.st4{
font-family: 'Baumans';
font-weight:bold;
}
.st5{
font-family: 'Engagement';
font-weight:bold;
}
.st6{
font-family: 'Bonbon';
font-weight:bold;
}
.st7{
font-family: 'Ribeye Marrow';
font-weight:bold;
}
.st8{
font-family: 'Cagliostro', sans-serif;
font-weight:bold;
}
.st9{
font-family: 'Lemon', cursive;
font-weight:bold;
}
______________________________
<!DOCtype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jScript</title>
<link rel="stylesheet" href="stile.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Viga' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ribeye+Marrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cagliostro' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="clock.js"></script>
</head>
<body>
<div id="clock">
<div id="hours" class="st1">
<span>--</span>
</div>
<div id="minutes" class="st2">
<span class="st2">--</span>
</div>
<div id="seconds" class="st4">
<span>--</span>
</div>
</div>
</body>
</html>
Комментариев нет:
Отправить комментарий