我使用这个jQuery教程制作了一个时钟：
http://tutorialzine.com/2009/12/colorful-clock-jquery-css/
但这款手表需要时间，我会用这个jQuery来获取服务器时间，我怎样才能获得服务器时间呢？
编辑：
script.js
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
$('#fancyClock').tzineClock();
});
jquery.tzineClock.js
(function($){
// A global array used by the functions of the plug-in:
var gVars = {};
// Extending the jQuery core:
$.fn.tzineClock = function(opts){
// "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
// If the selector returned more than one element, use the first one:
var container = this.eq(0);
if(!container)
{
try{
console.log("Invalid selector!");
} catch(e){}
return false;
}
if(!opts) opts = {};
var defaults = {
/* Additional options will be added in future versions of the plugin. */
};
/* Merging the provided options with the default ones (will be used in future versions of the plugin): */
$.each(defaults,function(k,v){
opts[k] = opts[k] || defaults[k];
})
// Calling the setUp function and passing the container,
// will be available to the setUp function as "this":
setUp.call(container);
return this;
}
function setUp()
{
// The colors of the dials:
var colors = ['orange','blue','green'];
var tmp;
for(var i=0;i<3;i++)
{
// Creating a new element and setting the color as a class name:
tmp = $('<div>').attr('class',colors[i]+' clock').html(
'<div class="display"></div>'+
'<div class="front left"></div>'+
'<div class="rotate left">'+
'<div class="bg left"></div>'+
'</div>'+
'<div class="rotate right">'+
'<div class="bg right"></div>'+
'</div>'
);
// Appending to the container:
$(this).append(tmp);
// Assigning some of the elements as variables for speed:
tmp.rotateLeft = tmp.find('.rotate.left');
tmp.rotateRight = tmp.find('.rotate.right');
tmp.display = tmp.find('.display');
// Adding the dial as a global variable. Will be available as gVars.colorName
gVars[colors[i]] = tmp;
}
// Setting up a interval, executed every 1000 milliseconds:
setInterval(function(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
animation(gVars.green, s, 60);
animation(gVars.blue, m, 60);
animation(gVars.orange, h, 24);
},1000);
}
function animation(clock, current, total)
{
// Calculating the current angle:
var angle = (360/total)*(current+1);
var element;
if(current==0)
{
// Hiding the right half of the background:
clock.rotateRight.hide();
// Resetting the rotation of the left part:
rotateElement(clock.rotateLeft,0);
}
if(angle<=180)
{
// The left part is rotated, and the right is currently hidden:
element = clock.rotateLeft;
}
else
{
// The first part of the rotation has completed, so we start rotating the right part:
clock.rotateRight.show();
clock.rotateLeft.show();
rotateElement(clock.rotateLeft,180);
element = clock.rotateRight;
angle = angle-180;
}
rotateElement(element,angle);
// Setting the text inside of the display element, inserting a leading zero if needed:
clock.display.html(current<10?'0'+current:current);
}
function rotateElement(element,angle)
{
// Rotating the element, depending on the browser:
var rotate = 'rotate('+angle+'deg)';
if(element.css('MozTransform')!=undefined)
element.css('MozTransform',rotate);
else if(element.css('WebkitTransform')!=undefined)
element.css('WebkitTransform',rotate);
// A version for internet explorer using filters, works but is a bit buggy (no surprise here):
else if(element.css("filter")!=undefined)
{
var cos = Math.cos(Math.PI * 2 / 360 * angle);
var sin = Math.sin(Math.PI * 2 / 360 * angle);
element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
element.css("left",-Math.floor((element.width()-50)/2));
element.css("top",-Math.floor((element.height()-50)/2));
}
}
})(jQuery)
我需要更改每个.js以获取服务器时间？ 抱歉，我几周前开始使用jQuery，我正在学习，我不知道如何在jQuery中改变伟大的东西。
编辑：
我写了
亲爱的MarZab，我按照你说的去做，但它不起作用，而不是时间在小时内出现“NaN”，而在分钟和秒钟出现相同。
我写道：
var clienttime = new Date();
var servertime = 1368597301000; // *mili*seconds
// snip
setInterval(function () {
var currentTime = new Date();
currentTime.setTime(currentTime.getTime() + servertime.time - clienttime.time);
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
animation(gVars.green, s, 60);
animation(gVars.blue, m, 60);
animation(gVars.orange, h, 24);
}, 1000);
所以我试着把
var clienttime = new Date();
var servertime = 1368597301000; // *mili*seconds
功能内部，但即使这样也行不通。
我需要做什么？
答案 0 :(得分：1)
$（document）.ready（function（）{ setInterval（function（） { var seconds = new Date（）。getSeconds（）; var sdegree = seconds * 6; var srotate =＆＃34;旋转（＆＃34; + sdegree +＆＃34; deg）＆＃34 ;; $（＆＃34;＃sec＆＃34;）。css（{＆＃34; -moz-transform＆＃34;：srotate，＆＃34; -webkit-transform＆＃34;：srotate}）; }，1000）; setInterval（function（） { var hours = new Date（）。getHours（）; var mins = new Date（）。getMinutes（）; var hdegree =小时* 30 +（分钟/ 2）; var hrotate =＆＃34;旋转（＆＃34; + hdegree +＆＃34; deg）＆＃34 ;; $（＆＃34;＃hour＆＃34;）。css（{＆＃34; -moz-transform＆＃34 ;: hrotate，＆＃34; -webkit-transform＆＃34;：hrotate}）;
}, 1000);
setInterval(function ()
{
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({ "-moz-transform": mrotate, "-webkit-transform": mrotate });
}, 1000);
});
</script>
完整说明检查http://asp-net-by-parijat.blogspot.in/2014/09/aspnet-digital-clock-with-jquery-css3.html
答案 1 :(得分：0)
你可以通过php / asp等传递时间。由于传输/渲染延迟，它不会完全同步，但大部分时间都可以正常工作。
然后使用变量并将其与当地时间进行比较。
var clienttime = new Date();
var servertime = 1368597301000; // *mili*seconds
// snip
setInterval(function(){
var currentTime = new Date();
currentTime.setTime(currentTime.getTime()+servertime.time-clienttime.time);