<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery+CSS3黑色时钟代码</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6_demo/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6_demo/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.6_demo/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6_demo/jquery.easyui.min.js"></script>
<script language="JavaScript">
$(document).ready(function clock(){
var time = new Date();
var hour = time.getHours();
var minutes = time.getUTCMinutes();
var second = time.getSeconds();
var secondtime = second * 6;
var minutestime = minutes * 6;
var hourtime = hour * 30 + minutes/2;
$(".second").css("-moz-transform","rotate(" + secondtime + "deg)");
$(".minutes").css("-moz-transform","rotate(" + minutestime + "deg)");
$(".hour").css("-moz-transform","rotate(" + hourtime + "deg)");
$(".second").css("-ms-transform","rotate(" + secondtime + "deg)");
$(".minutes").css("-ms-transform","rotate(" + minutestime + "deg)");
$(".hour").css("-ms-transform","rotate(" + hourtime + "deg)");
$(".second").css("-webkit-transform","rotate(" + secondtime + "deg)");
$(".minutes").css("-webkit-transform","rotate(" + minutestime + "deg)");
$(".hour").css("-webkit-transform","rotate(" + hourtime + "deg)");
$(".second").css("-o-transform","rotate(" + secondtime + "deg)");
$(".minutes").css("-o-transform","rotate(" + minutestime + "deg)");
$(".hour").css("-o-transform","rotate(" + hourtime + "deg)");
if(second%2 == 0){
$(".top1").show();
$(".top").hide();
}else{
$(".top1").hide();
$(".top").show();
}
setTimeout(clock,1000)
});
</script>
<style>
.icon_clock{background-image: url("image/clock-icon.png");width: 700px;height:700px;margin: 0 auto;
padding-top:50px; background-repeat: no-repeat}
.hour{background-image: url("image/时针.png");width: 37px;height: 290px;background-repeat: no-repeat;margin-left:326px;;
margin-top: 145px;display: block;position: absolute;z-index: 11;-moz-transform:rotate(45deg);
}
.second{;background-image: url("image/秒针.png");width: 37px;height: 330px;background-repeat: no-repeat;margin-left:326px;;
margin-top: 125px;display: block;position: absolute;z-index: 13;-moz-transform:rotate(900deg);
}
.minutes{background-image: url("image/分针.png");width: 37px;height: 290px;background-repeat: no-repeat;margin-left:326px;;
;margin-top: 145px;display: block;position: absolute;z-index: 12; -moz-transform:rotate(60deg);
}
.top{position: absolute;z-index: 1;background-color: rgba(255, 0, 0, 0);background-image: url("image/12.png");background-repeat: no-repeat;
width: 50px;height: 50px;margin-left: 321px;margin-top: 123px;}
.top1{position: absolute;z-index: 2;background-color: rgba(255, 0, 0, 0);background-image: url("image/12.png");background-repeat: no-repeat;
width: 50px;height: 50px;margin-left: 315px;margin-top: 110px;background-size: 120% 120%;display: none}
.ball{position: absolute;z-index: 2;background-image: url("image/qiu.png");background-repeat: no-repeat;width: 255px;height: 50px;margin-left:215px;margin-top: 260px;
animation:rond 3s infinite;background-color: rgba(255, 0, 0, 0);
-webkit-animation:rond 3s infinite;}
@keyframes rond {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
}
@-webkit-keyframes rond {
0%{-webkit-transform : rotate(0deg);}
100%{-webkit-transform : rotate(360deg);}
}
</style>
</head>
<body>
<div class="icon_clock">
<div class="hour"></div>
<div class="second" id="second"></div>
<div class="minutes"></div>
<div class="top"></div>
<div class="top1"></div>
<div class="ball"></div>
<div class="top1"></div>
</div>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery+CSS3黑色时钟代码.zip
版权申诉
23 浏览量
2023-09-22
00:22:26
上传
评论
收藏 709KB ZIP 举报
jQuery+CSS3黑色时钟代码.zip （349个子文件） 
easyui.css 48KB easyui.css 48KB easyui.css 48KB easyui.css 47KB easyui.css 44KB tabs.css 8KB tabs.css 8KB tabs.css 8KB tabs.css 8KB tabs.css 6KB datagrid.css 5KB datagrid.css 5KB datagrid.css 5KB datagrid.css 5KB datagrid.css 5KB linkbutton.css 4KB linkbutton.css 4KB linkbutton.css 4KB linkbutton.css 4KB linkbutton.css 4KB calendar.css 4KB calendar.css 4KB calendar.css 4KB calendar.css 4KB calendar.css 4KB tree.css 3KB tree.css 3KB tree.css 3KB tree.css 3KB tree.css 3KB panel.css 3KB panel.css 3KB panel.css 3KB panel.css 3KB panel.css 2KB icon.css 2KB menu.css 2KB menu.css 2KB menu.css 2KB menu.css 2KB menu.css 2KB window.css 2KB window.css 2KB window.css 2KB window.css 2KB tooltip.css 2KB tooltip.css 2KB tooltip.css 2KB tooltip.css 2KB tooltip.css 2KB menubutton.css 2KB menubutton.css 2KB menubutton.css 2KB menubutton.css 2KB menubutton.css 2KB layout.css 2KB layout.css 2KB layout.css 2KB layout.css 2KB layout.css 2KB slider.css 2KB slider.css 2KB slider.css 2KB slider.css 2KB slider.css 2KB window.css 2KB searchbox.css 1KB searchbox.css 1KB searchbox.css 1KB searchbox.css 1KB searchbox.css 1KB pagination.css 1KB pagination.css 1KB pagination.css 1KB pagination.css 1KB pagination.css 1KB spinner.css 1KB spinner.css 1KB spinner.css 1KB spinner.css 1KB spinner.css 1KB combo.css 1017B combo.css 1017B combo.css 1017B combo.css 1008B combo.css 1005B accordion.css 838B accordion.css 835B accordion.css 835B accordion.css 829B accordion.css 829B messager.css 804B messager.css 804B messager.css 804B messager.css 801B messager.css 801B propertygrid.css 716B propertygrid.css 716B propertygrid.css 710B propertygrid.css 710B共 349 条
- 1
- 2
- 3
- 4
资源评论
