HTML 简单的制作一个数字时钟，求帮做！

2023-03-02 13:27:01html-css019

HTML 简单的制作一个数字时钟，求帮做！,第1张

<!DOCTYPE html>

<html>

<head>

</head>

<body>

#myTime {

color: white

border-style: solid

background-color: black

width: 200

height: 200

text-align: center

font-family: "agency fb"

}

#hm {

color: white

text-align: center

font-style: bold

font-size: 40px

}

#other {

color: white

text-align: center

}

</style>

function showTime()

{

var theMoment = new Date()

var theHour = theMoment.getHours()

var theMinute = theMoment.getMinutes()

var hm = document.getElementById("hm")

hm.innerHTML = theHour + "<br/>" + theMinute

var other = document.getElementById("other")

other.innerHTML = theMoment.getSeconds()

}

var handler = window.setInterval('showTime()',1000)

</script>

</head>

<body>

</div>

</span>

</div>

</html>

你好！

增加和补充的的样式

最后的效果

简单说明一下：

给ul添加了一个flex布局，并设置内容为行排列并且不进行拆分，然后内容居中对齐；

设置li的margin-top值，该值主要参考背景图片的高度（你这里是278px），然后再减去li本身的数字+英文内容的高度（span+p=121px)，最后再除以2。

设置li中的.seperator的样式，也就是冒号的样式，这里调整了字号并设置了左右的间距。

最外层div.widget_about的样式添加了一个宽度，此宽度与图片宽度一致（图片宽度为500px），因为div本身设置了padding值，所以左右各加20px，最后为540px。

希望对你有帮助！

<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>')