关于javascript时钟的信息

如何在javascript表格中显现时钟

没什么几种不几种，关键就在原理。

成都创新互联公司主要从事做网站、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务和平,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

你要什么效果？没有猜错的话，你要的是时间一秒一秒跳动的？

Date()就能得到一个时间对象，当然，JS是客户端的，你直接Date()得到的也是客户端的时间。也就是说，你把你的电脑时间调成1970-7-7 12:01:35，他显示的就是这个时间。如果你要服务器端的时间，可以用服务器端语言把时间当成字符串写到js的一个变量里。比如，PHP用 var t=new Date('?=date('Y');?','?=date('m')-1;?','?=date('j');?','?=date('G');?','?=date('i');?','?=date('s');?');

这样JS里就有一个t的时间了。你再document.write(t)就可以看到服务器端的时间了。

如果你要一秒一秒跳动的，就需要一个一秒钟改变一次的函数，我随便写了个：

function timer(){

t=new Date(t.getTime()+1000);

document.getElementById("time").innerHTML=t.toLocaleString();

}

然后你每秒调用一次

setInterval(timer,1000);

这样系统就会自动每秒自动往上加了。。

JS时间，要注意两点：

1、ie和firefox在处理时间函数时，有一些区别，要兼容两种浏览器的话一定要注意

2、使用JS的一些函数，可以免去你算时间的一些麻烦。如果你想自己去把时间一秒一秒加，就会很麻烦，比如，60进制，润年，2月的天数等等。。但是用t=new Date(t.getTime()+1000)还有t.toLocaleString()，你就不需要管这么多了，而且完全准确的。

只要读一次服务器时间就可以了，每秒在时间上加一，与服务器时间基本会一致。

javascript这个数字时钟总是延时一秒钟显示怎么办？？

setInterval(function aa(){}）；

这里的aa不是全局的。因此下面直接调用的那个没执行。方法是将aa的定义，挪到setInterval外面，setInterval(aa,1000)，下面也在onload里调用aa()，应该就可以了。

另外，javascript的计时不是很准，所以你会发现秒数有可能会跳，比如，当前秒是1，毫秒数是999，下次执行是1000毫秒后，但有可能是1001毫秒才执行，所以直接跳到3秒了，解决的办法是将刷新频率调高，比如间隔为500毫秒，这样就不会有跳秒的现象。但还会有秒的变化与实际不符的感觉，调整到200-250左右，人就基本感觉不出来了。

javascript动态显示时间

html

head

title时钟特效/title

script type="text/javascript"

function disptime(){

var today = new Date()； //获得当前时间

var hh = today.getHours()； //获得小时、分钟、秒

var mm = today.getMinutes()；

var ss = today.getSeconds()；

/*设置div的内容为当前时间*/

document.getElementById("myclock").innerHTML="h1现在是:"+hh+":"+mm+":"+ss+"h1"；

/*

使用setTimeout在函数disptime()体内再次调用setTimeout

设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示

*/

var myTime=setTimeout("disptime()"，1000)；

}

/script

/head

body onload="disptime()"

div id="myclock"/div

/body。

如何用javascript实现一个时钟？

function init(){

clock();

setInterval(clock,1000);

}

function clock(){

var now = new Date();

var ctx = document.getElementById('canvas').getContext('2d');

ctx.save();

ctx.clearRect(0,0,150,150);

ctx.translate(75,75);

ctx.scale(0.4,0.4);

ctx.rotate(-Math.PI/2);

ctx.strokeStyle = "black";

ctx.fillStyle = "white";

ctx.lineWidth = 8;

ctx.lineCap = "round";

// Hour marks

ctx.save();

for (var i=0;i12;i++){

ctx.beginPath();

ctx.rotate(Math.PI/6);

ctx.moveTo(100,0);

ctx.lineTo(120,0);

ctx.stroke();

}

ctx.restore();

// Minute marks

ctx.save();

ctx.lineWidth = 5;

for (i=0;i60;i++){

if (i%5!=0) {

ctx.beginPath();

ctx.moveTo(117,0);

ctx.lineTo(120,0);

ctx.stroke();

}

ctx.rotate(Math.PI/30);

}

ctx.restore();

var sec = now.getSeconds();

var min = now.getMinutes();

var hr  = now.getHours();

hr = hr=12 ? hr-12 : hr;

ctx.fillStyle = "black";

// write Hours

ctx.save();

ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

ctx.lineWidth = 14;

ctx.beginPath();

ctx.moveTo(-20,0);

ctx.lineTo(80,0);

ctx.stroke();

ctx.restore();

// write Minutes

ctx.save();

ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

ctx.lineWidth = 10;

ctx.beginPath();

ctx.moveTo(-28,0);

ctx.lineTo(112,0);

ctx.stroke();

ctx.restore();

// Write seconds

ctx.save();

ctx.rotate(sec * Math.PI/30);

ctx.strokeStyle = "#D40000";

ctx.fillStyle = "#D40000";

ctx.lineWidth = 6;

ctx.beginPath();

ctx.moveTo(-30,0);

ctx.lineTo(83,0);

ctx.stroke();

ctx.beginPath();

ctx.arc(0,0,10,0,Math.PI*2,true);

ctx.fill();

ctx.beginPath();

ctx.arc(95,0,10,0,Math.PI*2,true);

ctx.stroke();

ctx.fillStyle = "#555";

ctx.arc(0,0,3,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

ctx.beginPath();

ctx.lineWidth = 14;

ctx.strokeStyle = '#325FA2';

ctx.arc(0,0,142,0,Math.PI*2,true);

ctx.stroke();

ctx.restore();

}

如何使用JavaScript实现制作动态时钟

!doctype html

html

head

meta charset="UTF-8" 

titleclock test/title

script type="text/javascript"

onload = function(){

var canvas = document.querySelector('canvas');

var ctx =canvas.getContext('2d');

var frameId = null;

var start = Date.now();

var draw = function(){

console.log(frameId);

ctx.clearRect(0,0,410,410)

var now = new Date();

var sec = now.getSeconds();

var min = now.getMinutes();

var hour = now.getHours() + min/60;

hour = hour12 ? hour-12 :hour;

ctx.save();

ctx.beginPath();

ctx.strokeStyle ='#ABCDEF';

ctx.lineWidth =10;

ctx.arc(205,205,200,0,360,false);

ctx.stroke();

ctx.closePath();

ctx.restore();

// 画时针刻度

for(var i = 1;i=12;i++){

ctx.save();

ctx.lineWidth=8;

ctx.font = 'normal 400 20px/2  sans-serif';

ctx.translate(205,205);

ctx.rotate(i*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-195);

ctx.lineTo(0,-180);

ctx.fillText(i,(i10?-10:-5),-160);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

// 画分针秒针刻度

for(var i = 0;i60;i++){

ctx.save();

ctx.lineWidth=6;

ctx.translate(205,205);

ctx.rotate(i*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-195);

ctx.lineTo(0,-185);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

// 画时针

ctx.save();

ctx.lineWidth=10;

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(hour*30*Math.PI/180);

ctx.moveTo(0,-155);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

// 画分针

ctx.save();

ctx.lineWidth=6;

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(min*6*Math.PI/180);

ctx.moveTo(0,-165);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

// 画秒针

ctx.save();

ctx.lineWidth=4;

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(sec*6*Math.PI/180);

ctx.moveTo(0,-175);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

// 画秒针装饰

ctx.save();

ctx.lineWidth=4;

ctx.fillStyle="#ccc";

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(sec*6*Math.PI/180);

ctx.arc(0,0,10,0,360,false);

ctx.closePath();

ctx.stroke();

ctx.fill();

ctx.restore();

ctx.save();

ctx.lineWidth=4;

ctx.strokeStyle="#333";

ctx.fillStyle="red";

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(sec*6*Math.PI/180);

ctx.arc(0,-150,8,0,360,false);

ctx.closePath();

ctx.stroke();

ctx.fill();

ctx.restore();

if(Date.now()-start =1000){

start = Date.now();

frameId = requestAnimationFrame(draw)

}else{

start = Date.now();

setTimeout(draw,1000);

}

};

draw();

}

/script

/head

body

canvas width="410" height="410"你的浏览器不支持canvas标签/canvas

/body

/html

JavaScript中的数字时钟的显示问题

html

head

script language="JavaScript"

function showTime()

{

var currentDate = new Date();

var hours = currentDate.getHours();

var minutes = currentDate.getMinutes();

var seconds = currentDate.getSeconds();

//

//格式化输出

//

if (minutes 10)

minutes = "0" + minutes;

if (seconds 10)

seconds = "0" + seconds;

var currentTimeString ="font color=blue" + hours + ":" + minutes + ":" + seconds + "/font";

document.getElementById("show").innerHTML=currentTimeString; //改这地方

window.setTimeout("showTime()", 1000);

}

/script

/head

body onload="showTime()"

span id="show"/span !--加这地方--

/body

/html