You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.5 KiB
JavaScript
87 lines
2.5 KiB
JavaScript
2 months ago
|
(function(factory) {
|
||
|
|
if (typeof define === "function" && define.amd) {
|
||
|
|
// AMD模式
|
||
|
|
define(["jquery"], factory);
|
||
|
|
} else {
|
||
|
|
// 全局模式
|
||
|
|
factory(jQuery);
|
||
|
|
}
|
||
|
|
}(function($) {
|
||
|
|
$.fn.initClock = function(opt){
|
||
|
|
var me = $(this);
|
||
|
|
var placename = opt['placename']?opt['placename']:"北京时间";
|
||
|
|
var xhour=opt['hour']?opt['hour']:0;
|
||
|
|
var clock = [
|
||
|
|
'<ul class="s-clock">',
|
||
|
|
'<li class="s-date"></li>',
|
||
|
|
'<li class="s-seconds"></li>',
|
||
|
|
'<li class="s-hours"></li>',
|
||
|
|
'<li class="s-minutes"></li>',
|
||
|
|
'</ul>'].join('');
|
||
|
|
$(clock).fadeIn().appendTo(me);
|
||
|
|
var h="<div class='numclock'>"+
|
||
|
|
"<div class='placename'>"+placename+"</div>"+
|
||
|
|
"<div class='time'></div>"+
|
||
|
|
"</div>";
|
||
|
|
me.append(h);
|
||
|
|
|
||
|
|
|
||
|
|
Clock();
|
||
|
|
function Clock(){
|
||
|
|
//get the date and time
|
||
|
|
|
||
|
|
var date = new Date().getDate(),//get the current date
|
||
|
|
hours = new Date().getHours(),//get the current hour
|
||
|
|
minutes = new Date().getMinutes(), //get the current minute
|
||
|
|
seconds = new Date().getSeconds();//get the current second
|
||
|
|
if((hours+xhour)>24){
|
||
|
|
date++;
|
||
|
|
}else if((hours+xhour)<0){
|
||
|
|
date--;
|
||
|
|
hours=36+hours+xhour;
|
||
|
|
}
|
||
|
|
hours=hours+xhour;
|
||
|
|
me.find(".s-date").html(date); //show the current date on the clock
|
||
|
|
|
||
|
|
var hrotate = hours * 30 + (minutes / 2);
|
||
|
|
//i.e 12 hours * 30 = 360 degrees
|
||
|
|
|
||
|
|
me.find(".s-hours").css({
|
||
|
|
'transform' : 'rotate('+ hrotate +'deg)',
|
||
|
|
'-moz-transform' :'rotate('+ hrotate +'deg)',
|
||
|
|
'-webkit-transform' :'rotate('+ hrotate +'deg)'
|
||
|
|
});
|
||
|
|
|
||
|
|
var mrotate = minutes * 6; //degrees to rotate the minute hand
|
||
|
|
me.find(".s-minutes").css({
|
||
|
|
'transform' : 'rotate('+ mrotate +'deg)',
|
||
|
|
'-moz-transform' :'rotate('+ mrotate +'deg)',
|
||
|
|
'-webkit-transform' :'rotate('+ mrotate +'deg)'
|
||
|
|
});
|
||
|
|
|
||
|
|
var srotate = seconds * 6;//for the rotation to reach 360 degrees
|
||
|
|
//i.e 60 seconds * 6 = 360 degrees.
|
||
|
|
me.find(".s-seconds").css({
|
||
|
|
'transform' : 'rotate('+ srotate +'deg)',
|
||
|
|
'-moz-transform' :'rotate('+ srotate +'deg)',
|
||
|
|
'-webkit-transform' :'rotate('+ srotate +'deg)'
|
||
|
|
});
|
||
|
|
var thours=hours;
|
||
|
|
if(hours<10){
|
||
|
|
thours = "0"+hours;
|
||
|
|
}
|
||
|
|
var tminutes=minutes;
|
||
|
|
if(minutes<10){
|
||
|
|
tminutes = "0"+hours;
|
||
|
|
}
|
||
|
|
var tseconds=seconds;
|
||
|
|
if(seconds<10){
|
||
|
|
tseconds = "0"+seconds;
|
||
|
|
}
|
||
|
|
me.find(".time").html(thours+":"+tminutes+":"+tseconds );
|
||
|
|
setTimeout(Clock,1000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}))
|