我們先看效果圖
心動了嗎？？快來看看重要的內容
大家關心的代碼咯
HTML的代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery帶日期跟星期時鐘代碼</title>
<!--主要部分-->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div style="height:100px;"></div>
<div class="clock-place"> </div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function(){
$(".clock-place").CodehimClock({
});
});
</script>
</body>
</html>CSS的樣式
m-clock-dale {
width: 250px;
height: 250px;
background: #eee;
background: -webkit-linear-gradient(to right, #ddd, #fff);
background: linear-gradient(to right, #ddd, #fff);
border-radius: 50%;
margin-left: auto;
margin-right: auto;
position: relative;
border: 10px solid #555;
box-sizing: content-box;
box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.4);
}
/* Codehim Clock Size */
.codehim-clock-dale.original{
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
}
.codehim-clock-dale.xlarge{
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
}
.codehim-clock-dale.xsmall{
transform: scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
}
.number{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
border-radius: 50%;
font-size: 13px;
position: absolute;
}
.p3,
.p6,
.p9,
.p12 {
background: #555;
color: #fff;
}
.p1{
right: 72px;
margin-right: -15px;
top: 26px;
}
.p2{
right: 38px;
margin-right: -15px;
top: 63px;
}
.p3{
top: 125px;
margin-top: -15px;
right: 10px;
}
.p4{
right: 38px;
margin-right: -15px;
bottom: 63px;
}
.p5{
right: 72px;
margin-right: -15px;
bottom: 26px;
}
.p6{
left: 125px;
margin-left: -15px;
bottom: 10px;
}
.p7{
left: 72px;
margin-left: -15px;
bottom: 26px;
}
.p8{
left: 38px;
margin-left: -15px;
bottom: 63px;
}
.p9{
top: 125px;
margin-top: -15px;
left: 10px;
}
.p10{
left: 38px;
margin-left: -15px;
top: 63px;
}
.p11{
left: 72px;
margin-left: -15px;
top: 26px;
}
.p12{
left: 125px;
margin-left: -15px;
top: 10px;
}
.clock-center{
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
background: #16a085;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
position: absolute;
top: 125px;
left: 125px;
z-index: 999;
border: 1px solid #16a085;
box-sizing: border-box;
}
/* clock hands */
.seconds-hand,
.minutes-hand,
.hours-hand{
position: absolute;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.seconds-hand{
height: 100px;
width: 2px;
background: red;
left: 125px;
margin-left: -1px;
top: 25px;
z-index: 110;
}
.minutes-hand{
height: 80px;
width: 5px;
background: #348781;
left: 125px;
margin-left: -2.5px;
top: 45px;
z-index: 100;
}
.hours-hand{
height: 70px;
width: 8px;
background: #3D3C3A;
left: 125px;
margin-left: -4px;
top: 55px;
z-index: 90;
border-left: 1px solid rgba(255, 255, 255, 0.1);
box-sizing: border-box;
}
.clock-logo{
position: absolute;
left: 125px;
top: 125px;
width: 80px;
border-radius: 50%;
height: 80px;
padding: 10px;
margin-left: -40px;
margin-top: -40px;
text-align: center;
background: #ccc;
color: #16a085;
font-size: 12px;
text-align: center;
box-sizing: border-box;
z-index: 0;
}
.clock-logo span{
display: block;
font-size: 7px;
color: #333;
margin-top: 26px;
}
.point{
width: 1px;
height: 6px;
background: #999;
display: inline-block;
position: absolute;
z-index: 100;
box-sizing: border-box;
}
.pt4, .pt9, .pt19,
.pt24, .pt34, .pt39,
.pt49, .pt54{
width: 3px;
height: 10px;
}
.pt0 {
top: 1px;
right: 108px;
}
.pt1 {
top: 3px;
right: 96px;
}
.pt2 {
top: 6.5px;
right: 84px;
}
.pt3 {
top: 12px;
right: 72px;
}
.pt4 {
top: 18px;
right: 60px;
}
.pt5 {
top: 25px;
right: 50px;
}
.pt6 {
top: 32px;
right: 42px;
}
.pt7{
top: 40px;
right: 34px;
}
.pt8{
top: 48px;
right: 27px;
}
.pt9 {
top: 60px;
right: 19.5px;
}
.pt10 {
top: 72px;
right: 13.5px;
}
.pt11{
top: 84px;
right: 8px;
}
.pt12 {
top: 95px;
right: 5px;
}
.pt13{
top: 110px;
right: 3px;
}
.pt14 {
top: 123px;
right: 3px;
}
.pt15 {
top: 134px;
right: 4px;
}
.pt16{
top: 145px;
right: 5px;
}
.pt17{
top: 156px;
right: 8px;
}
.pt18 {
top: 169px;
right: 13px;
}
.pt19{
top: 180px;
right: 20px;
}
.pt20 {
bottom: 49px;
right: 26px;
}
.pt21 {
bottom: 39px;
right: 35px;
}
.pt22{
bottom: 31px;
right: 43px;
}
.pt23 {
bottom: 24px;
right: 51px;
}
.pt24 {
bottom: 18px;
right: 61px;
}
.pt25 {
bottom: 12px;
right: 72px;
}
.pt26{
bottom: 6.5px;
right: 84px;
}
.pt27 {
bottom: 3px;
right: 96px;
}
.pt28{
bottom: 1px;
right: 108px;
}
.pt29{
bottom: 0px;
right: 125px;
}
.pt30 {
bottom: 1px;
left: 108px;
}
.pt31{
bottom: 3px;
left: 96px;
}
.pt32{
bottom: 6.5px;
left: 84px;
}
.pt33 {
bottom: 12px;
left: 72px;
}
.pt34{
bottom: 18px;
left: 61px;
}
.pt35{
bottom: 24px;
left: 51px;
}
.pt36{
bottom: 31px;
left: 43px;
}
.pt37{
bottom: 39px;
left: 35px;
}
.pt38{
bottom: 49px;
left: 26px;
}
.pt39{
top: 180px;
left: 20px;
}
.pt40{
top: 169px;
left: 13px;
}
.pt41 {
top: 156px;
left: 8px;
}
.pt42 {
top: 145px;
left: 5px;
}
.pt43{
top: 134px;
left: 4px;
}
.pt44{
top: 123px;
left: 3px;
}
.pt45{
top: 110px;
left: 3px;
}
.pt46 {
top: 95px;
left: 5px;
}
.pt47{
top: 84px;
left: 8px;
}
.pt48{
top: 72px;
left: 13.5px;
}
.pt49 {
top: 60px;
left: 19.5px;
}
.pt50 {
top: 48px;
left: 27px;
}
.pt51 {
top: 40px;
left: 34px;
}
.pt52 {
top: 32px;
left: 42px;
}
.pt53{
top: 25px;
left: 50px;
}
.pt54{
top: 18px;
left: 60px;
}
.pt55{
top: 12px;
left: 72px;
}
.pt56 {
top: 6.5px;
left: 84px;
}
.pt57 {
top: 3px;
left: 96px;
}
.pt58 {
top: 1px;
left: 108px;
}
.pt59{
top: 0px;
left: 125px;
}
.dale-inner,
.glass-border{
border-radius: 50%;
background: transparent;
position: absolute;
box-sizing: border-box;
}
.dale-inner{
border: 4px solid rgba(0, 0, 0, 0.13);
width: 250px;
height: 250px;
box-shadow: inset -4px 14px 25px rgba(255, 255, 255, 1);
}
/* v2 */
.date-box{
background: #666;
color: #fff;
display: inline-block;
position: absolute;
width: 40px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 1px;
border: 1px solid #444;
box-sizing: border-box;
font-size: 9px;
top: 125px;
margin-top: -8px;
right: 43px;
z-index: 30;
}
.date-box .day{
background: #e41;
padding: 1px;
padding-top: 3px;
}
.date-box .date{
line-height: 16px;
padding-left: 2px;
}
.logo-outer1,
.logo-outer{
width: 80px;
height: 80px;
border: 3px solid transparent;
border-radius: 50%;
position: absolute;
top: 125px;
margin-top: -40px;
right: 125px;
margin-right: -40px;
box-sizing: border-box;
}
.logo-outer{
animation: spinnerClockWise 4s linear infinite;
-webkit-animation: spinnerClockWise 4s linear infinite;
border-left: 3px solid #7BCCB5;
}
.logo-outer1 {
border-left: 3px solid #43BFC7 ;
animation: spinnerAntiClockWise 4s linear infinite;
-webkit-animation: spinnerAntiClockWise 4s linear infinite;
}
@keyframes spinnerClockWise {
from{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@keyframes spinnerAntiClockWise {
from{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
to{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
-webkit-@keyframes spinnerClockWise {
from{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
-webkit-@keyframes spinnerAntiClockWise {
from{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
to{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
JS的代碼
(function($){
$.fn.CodehimClock = function(options) {
var setting = $.extend({
showSeconds: true, //隱藏秒針
showDate: true, //隱藏日期和日期
clockSize: "original", //可能的選項 xsmall 和xlarge
}, options);
return this.each(function() {
var clockDale,
secondHand,
minuteHand,
hourHand,
clockCenter,
clockLogo,
smallPoints,
dateSticker,
dayShow,
dateShow,
$time,
$second,
$minute,
$hour,
$csp,
$cmp,
$chp;
$time = new Date();
$second = $time.getSeconds();
$minute = $time.getMinutes();
$hour = $time.getHours();
$csp = 0; //current second position
$cmp = 0; //current minutes position
$chp = 0; //current hour position
//檢查一下現在的位置
for (var y = 6; y <= 360; y +=6){
if ( (y/$second).valueOf() === 6){
$csp = y;
}
if ( (y/$minute).valueOf() === 6){
$cmp = y;
}
}
//檢查一下現在的位置
for (var v = 0; v <= 360; v += 15){
var hoursHand = $hour*30+($minute/2.1).valueOf();
$chp = hoursHand;
}
//創建時鐘結構
clockDale = $div();
secondHand = $div();
minuteHand = $div();
hourHand = $div();
clockCenter = $div();
clockLogo = $div();
dateSticker = $div();
dayShow = $span();
dateShow = $span();
// 時鐘的數字
var r = 1;
do {
var num = $span();
var $thisClass = "number " + "p"+r;
$(num).html(r)
.addClass($thisClass)
.appendTo(clockDale);
r++;
} while( r <= 12 );
setInterval(function(){
var $time = new Date();
var second = $time.getSeconds();
var minute = $time.getMinutes();
var hour = $time.getHours();
//爲秒、分和小時分配值
$csp += 6;
$cmp += 0.10;
$chp += 0.0016666667;
//完成一輪後，重新開始時鐘指針的旋轉
if ($csp >= 360 || second == 0){
$csp = 0;
$chp += 0.10;
}
//旋轉秒針與css3變換
$(secondHand).addClass("seconds-hand")
.css({
'transform' : 'rotate('+ $csp+'deg)',
'transformOrigin' : 'bottom',
'transition' : '0s',
});
//分鐘
$(minuteHand).addClass("minutes-hand")
.css({
'transform' : 'rotate('+$cmp+'deg)',
'transformOrigin' : 'bottom',
});
// 小時
$(hourHand).addClass("hours-hand")
.css({
'transform' : 'rotate('+$chp+'deg)',
'transformOrigin' : 'bottom',
});
},1000);
$(clockDale)
.append(minuteHand)
.append(hourHand)
// applying clock settings
.addClass(setting.clockSize);
if( setting.showSeconds == true){
$(clockDale).append(secondHand);
}
$(clockCenter)
.addClass("clock-center")
.appendTo(clockDale);
$(clockLogo)
.html("logo"+
"<span>logo</span>")
.addClass("clock-logo")
.appendTo(clockDale);
var $stData = [];
for (var st =6; st <= 360; st +=6){
var stRot = {
'transform' : 'rotate('+st+'deg)',
'\-webkit\-transform' : 'rotate('+st+'deg)',
};
$stData.push(stRot);
}
for (var $sr = 0; $sr <= 59; $sr++)
{
smallPoints = $span();
var $thisClass = "point" + " pt"+$sr;
$(smallPoints)
.addClass($thisClass)
.css($stData[$sr])
.appendTo(clockDale);
}
var days = [
"六",
"一",
"二",
"三",
"四",
"五",
"六"
];
var $thisDay = $time.getDay();
var $thisDate = $time.getDate();
var daleinner = $div();
var spinner1 = $div();
var spinner2 = $div();
$(dayShow).html(days[$thisDay])
.addClass("day")
.appendTo(dateSticker);
$(dateShow).html($thisDate)
.addClass("date")
.appendTo(dateSticker);
if (setting.showDate == true){
$(dateSticker)
.addClass("date-box")
.appendTo(clockDale);
}
$(daleinner)
.addClass("dale-inner")
.appendTo(clockDale);
$(spinner1)
.addClass("logo-outer")
.appendTo(clockDale);
$(spinner2)
.addClass("logo-outer1")
.appendTo(clockDale);
$(clockDale)
.addClass("codehim-clock-dale")
.appendTo(this);
function $div(){
return document.createElement("div");
}
function $span(){
return document.createElement("span");
}
});
};
})(jQuery);
記得不要忘記引入Jquer.js哦
簡單的時鐘就這樣做好了，有喜歡的記得關注我哦會不斷地更新哦