怎样自己编写钟表的HTML代码，要求在不能上网的条件下，这个钟表依然可以使用。

2023-03-04 02:05:02html-css020

怎样自己编写钟表的HTML代码，要求在不能上网的条件下，这个钟表依然可以使用。,第1张

利用js脚本来实现，获取的时间是你本地计算机的系统时间：

代码参考：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

</HEAD>

<BODY>

<!-- Begin

day = new Date()

miVisit = day.getTime()

function clock() {

today = new Date()

hrNow = today.getHours()

mnNow = today.getMinutes()

scNow = today.getSeconds()

miNow = today.getTime()

if (hrNow == 0) {

hour = 12

ap = " AM"

} else if(hrNow <= 11) {

ap = " AM"

hour = hrNow

} else if(hrNow == 12) {

ap = " PM"

hour = 12

} else if (hrNow >= 13) {

hour = (hrNow - 12)

ap = " PM"

}

if (hrNow >= 13) {

hour = hrNow - 12

}

if (mnNow <= 9) {

min = "0" + mnNow

}

else (min = mnNow)

if (scNow <= 9) {

secs = "0" + scNow

} else {

secs = scNow

}

time = hour + ":" + min + ":" + secs + ap

document.form.button.value = time

self.status = time

setTimeout('clock()', 1000)

}

function timeInfo() {

milliSince = miNow

milliNow = miNow - miVisit

secsVisit = Math.round(milliNow / 1000)

minsVisit = Math.round((milliNow / 1000) / 60)

alert("你在本页面上大约停留了" + minsVisit + "分 "

+ secsVisit + "秒" )

}

document.write("<center><form name=\"form\">"

+ "<input type=button value=\"Click for info!\""

+ " name=button onClick=\"timeInfo()\"></form></center>")

onError = null

clock()

// End -->

</script>

</BODY>

</HTML>

很简单用javascript 代码获取当前时间然后1调用一次

<html>

<head>

<title>无标题文档</title>

</head>

function shijian(){

var myDate = new Date()

var mytime=myDate.toLocaleTimeString()//获取当前时间

document.getElementById("av").innerHTML=mytime

}

setInterval('shijian()',1000)

</script>

<body >

</body>

</html>

<html>

<head>

var timerID=null

var timerRunning=false

file://启动

function startclock()

{

stopclock()

time()

}

file://停止

function stopclock()

{

if(timerRunning)

clearTimeout(timerID)

timerRunning=false

}

file://实现模块

function time()

{

file://使用new操作符创建时间对象

var now=new Date()

var yr=now.getYear()

var mName=now.getMonth()+1

var dayNr=((now.getDate()<10)?"0":"")+now.getDate()

var dName=now.getDay()+1

var ampm=(now.getHours()>=12)?"下午":"上午"

var hours=now.getHours()

hours=((hours>12)?hours-12:hours)

var minutes=((now.getMinutes()<10)?":0":":")+now.getMinutes()

var seconds=((now.getSeconds()<10)?":0":":")+now.getSeconds()

file://判断今天是星期几

if(dName==1)Day="Sunday"

if(dName==1)Day="Monday"

if(dName==3)Day="Tuesday"

if(dName==4)Day="Wednesday"

if(dName==5)Day="Thursday"

if(dName==6)Day="Friday"

if(dName==7)Day="Saturday"

file://判断月份

if(mName==1)Month="Janauary"

if(mName==2)Month="February"

if(mName==3)Month="March"

if(mName==4)Month="April"

if(mName==5)Month="May"

if(mName==6)Month="June"

if(mName==7)Month="July"

if(mName==8)Month="August"

if(mName==9)Month="September"

if(mName=10)Month="October"

if(mName=11)Month="November"

if(mName=12)Month="December"

var DayOfWeek=(""+Day+"")

var MonthDayYear=(""+Month+","+dayNr+","+yr+"")

document.forms[0].elements[0].value=MonthDayYear

var TimeValue=(""+hours+minutes+seconds+""+ampm)

document.forms[0].elements[1].value=TimeValue

timerID=setTimeout("time()",1000)

timerRunning=true

}

</script>

</head>

<form>

<br>

<tr>

</tr>

</table>

</form>

</html>

代码二

//定义时钟显示的函数

function displayTime()

{

var today = new Date()// 定义日期对象

var hours = today.getHours()

var minutes = today.getMinutes()

var seconds = today.getSeconds()

// 从日期对象中中获得时间信息

minutes = fixTime(minutes)

seconds = fixTime(seconds)// 引入fixTime（）函数，使分和秒可以正常显示，对于小于10的数字则在该数字前加一个0

//将时间字符串组合在一起并写出

var the_time = hours + ":" + minutes + ":" + seconds

window.document.the_form.the_text.value = the_time//把表格的值重新写一遍，相当于刷新时间

the_timeout= setTimeout('displayTime()',500)//每半秒钟执行一次该函数,即500毫秒

}

function fixTime(the_time)

{

if (the_time <10)

{

the_time = "0" + the_time

}

return the_time

}

</script>

附一个更酷的时钟原代码

<html>

<p><b>用JavaScript编程实现钟表特效</b></p>

请用查看源代码方式阅读所有程序代码。

<!--

dCol='#22ff'

fCol='#e09000'

sCol='00ff00'

mCol='ff0000'

hCol='ffff00'

ClockHeight=40

ClockWidth=40

ClockFromMouseY=0

ClockFromMouseX=100

d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")

m=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")

date=new Date()

day=date.getDate()

year=date.getYear()

if (year <2000) year=year+1900

TodaysDate="年 "+m[date.getMonth()]+day+"日 "+d[date.getDay()]+" "+year

D=TodaysDate.split('')

H='...'

H=H.split('')

M='....'

M=M.split('')

S='.....'

S=S.split('')

Face='1 2 3 4 5 6 7 8 9 10 11 12'

font='Arial'

size=1

speed=0.9

ns=(document.layers)

ie=(document.all)

Face=Face.split(' ')

n=Face.length

a=size*10

ymouse=0

xmouse=0

scrll=0

props="<font face="+font+" size="+size+" color="+fCol+">"

props2="<font face="+font+" size="+size+" color="+dCol+">"

Split=360/n

Dsplit=360/D.length

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7

HandX=-2.5

scrll=0

step=0.06

currStep=0

y=new Array()x=new Array()Y=new Array()X=new Array()

for (i=0i <ni++){y[i]=0x[i]=0Y[i]=0X[i]=0}

Dy=new Array()Dx=new Array()DY=new Array()DX=new Array()

for (i=0i <D.lengthi++){Dy[i]=0Dx[i]=0DY[i]=0DX[i]=0}

if (ns){

for (i=0i <D.lengthi++)

document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>')

for (i=0i <ni++)

document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>')

for (i=0i <S.lengthi++)

document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>')

for (i=0i <M.lengthi++)

document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>')

for (i=0i <H.lengthi++)

document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>')

}

if (ie) {

document.write('<div id="Od" style="position:absolutetop:0pxleft:0px"><div style="position:relative">')

for (i=0i <D.lengthi++)

document.write('<div id="ieDate" style="position:absolutetop:0pxleft:0height:'+a+'width:'+a+'text-align:center">'+props2+D[i]+'</font></div>')