关于时钟样式JavaScript的信息

如何使用JS实现一个简易数码时钟

设计思路：

创新互联专注于企业成都营销网站建设、网站重做改版、遵义网站定制设计、自适应品牌网站建设、成都h5网站建设、成都商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为遵义等各大城市提供网站开发制作服务。

数码时钟即通过图片数字来显示当前时间，需要显示的图片的URL根据时间变化而变化。

a、获取当前时间Date()并将当前时间信息转换为一个6位的字符串;

b、根据时间字符串每个位置对应的数字来更改图片的src的值，从而实现更换显示图片;

构建HTML基础并添加样式。

div id="div1"

img src='./数字时钟（1）_files/0.jpg'

img src='./数字时钟（1）_files/0.jpg'

:

img src='./数字时钟（1）_files/0.jpg'

img src='./数字时钟（1）_files/0.jpg'

:

img src='./数字时钟（1）_files/0.jpg'

img src='./数字时钟（1）_files/0.jpg'

/div

style样式

#div1{

width:50%;

margin:300px auto;

background:black;

}

获取图片元素以及当前时间：

var oDiv=document.getElementById('div1');

var aImg=oDiv.getElementsByTagName('img');

var oDate=new Date();

var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

这里出现两个问题

1、oDate.getHours()返回的都是数字，这样编写为数字相加，而非字符串相加。

2、当获取的值为一位数时，会造成字符串的个数少于6，不满足初始设计要求。

解决以上两个问题的代码解决方案：

代码

var oDiv=document.getElementById('div1');

var aImg=oDiv.getElementsByTagName('img');

var oDate=new Date();

function twoDigitsStr()

{

if(n10)

{return '0'+n;}

else

{return ''+n;}

}

var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

设置所有图片的src值：

for(var i=0;iaImg.length;i++)

{

aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";

}

通过setInterval()来实现每隔1秒进行重新获取当前时间以及图片src值：

代码

var oDiv=document.getElementById('div1');

var aImg=oDiv.getElementsByTagName('img');

setInterval(function tick()

{

var oDate=new Date();

var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

for(var i=0;iaImg.length;i++)

{

aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";

}

}

,1000);

但是还是有一个问题，网页在打开的初始阶段，显示时间为00：00：00，这是因为定时器有个特性，当定时器被打开后，不会立刻执行里面的函数，而是在1秒后执行。解决代码：

var oDiv=document.getElementById('div1');

var aImg=oDiv.getElementsByTagName('img');

function tick()

{var oDate=new Date();

var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

for(var i=0;iaImg.length;i++)

{

aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";

}

}

setInterval(tick,1000);

tick();

问题：代码setInterval(tick,1000);中函数tick没有带括号，那么JS中函数带括号与不带括号有什么区别？

完整的数码时钟制作JS代码为：

function twoDigitsStr(n)

{

if(n10)

{return '0'+n;}

else

{return ''+n;}

}

window.onload=function()

{

var oDiv=document.getElementById('div1');

var aImg=oDiv.getElementsByTagName('img');

function tick()

{var oDate=new Date();

var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

for(var i=0;iaImg.length;i++)

{

aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";

}

}

setInterval(tick,1000);

tick(); 

}

如何用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做一个简单的英文日期时钟， 效果如下，不要秒钟感恩

label id="time"/label

script language="javascript"

function getCurrentDate() {

var date = new Date();

var monthArray=new Array

("January","February","March","April","May","June","July","August",

"September","October","November","December");

var weekArray = new Array("Sunday","Monday","Tuesday",

"Wednesday","Thursday","Friday","Saturday");

month=date.getMonth();

day=date.getDate();

hours = date.getHours();

minutes = date.getMinutes()

if(day.toString().length == 1){

day="0"+day.toString();

}

document.getElementById("time").innerHTML=(day+" "+monthArray[month] +", "+hours+":"+minutes);

}

window.onload = function(){

setInterval("getCurrentDate()",1000);

}

/script

如何在javascript表格中显现时钟

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

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

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()，你就不需要管这么多了，而且完全准确的。

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

js怎么写一个时钟？每秒跳一次的那种

html

head

script type="text/javascript"

!--

window.onload=function(){

var oDiv=document.getElementById('time'); // 获取DIV

function theTime(){

var theDate=new Date(); // 创建一个日期对象

var year=theDate.getFullYear();; // 获取年份

var month=theDate.getMonth(); // 获取月份

var day=theDate.getDate(); //获取日

var hour=theDate.getHours(); //获取小时

var minues=theDate.getMinutes(); // 获取分钟

var second=theDate.getSeconds(); // 获取秒

oDiv.innerHTML="现在的时间是"+year+"年"+month+"月"+day+"日 "+hour+":"+minues+":"+second;

}

theTime(); // 执行时间函数

setInterval(theTime,1000); // 更新时间

}

//--

/script

/head

div id="time"/div

/html

你试下,，，，

JavaScript 如何实现的简单时钟？

背景时钟

====1、以下是这个效果的全部代码。[最好从一个空页面开始]

html

head

TITLE背景时钟/TITLE

script language=javaScript

!--//

function clockon() {

thistime= new Date()

var hours=thistime.getHours()

var minutes=thistime.getMinutes()

var seconds=thistime.getSeconds()

if (eval(hours) 10) {hours="0"+hours}

if (eval(minutes) 10) {minutes="0"+minutes}

if (seconds 10) {seconds="0"+seconds}

thistime = hours+":"+minutes+":"+seconds

if(document.all) {

bgclocknoshade.innerHTML=thistime

bgclockshade.innerHTML=thistime

}

if(document.layers) {

document.bgclockshade.document.write('div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px"'+thistime+'/div')

document.bgclocknoshade.document.write('div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px"'+thistime+'/div')

document.close()

}

var timer=setTimeout("clockon()",200)

}

//--

/script

link rel="stylesheet" href="../style.css"/head

body onLoad="clockon()"

div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"/div

div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"/div

div id="mainbody" style="position:absolute; visibility:visible"

/div

/body

/html

说明：时钟显示的位置需要你修正TOP,LEFT参数来确定。TOP表示层距离显示器顶部的象素值，LEFT表示距离左侧的象素。