JS简单时钟的小白问题

JavaScript019

JS简单时钟的小白问题,第1张

setTimeout定时document.write以后，重新打开输出流，会清空页面内容，包括你以前的代码，简单改了一下：

<script>

function tick() {

var hours, minutes, seconds, xfile

var intHours, intMinutes, intSeconds

var today

today = new Date()

intHours = today.getHours()

intMinutes = today.getMinutes()

intSeconds = today.getSeconds()

if (intHours == 0) {

hours = "12:"

xfile = "午夜"

} else if (intHours <12) {

hours = intHours+":"

xfile = "上午"

} else if (intHours == 12) {

hours = "12:"

xfile = "正午"

} else {

intHours = intHours - 12

hours = intHours + ":"

xfile = "下午"

}

if (intMinutes <10) {

minutes = "0"+intMinutes+":"

} else {

minutes = intMinutes+":"

}

if (intSeconds <10) {

seconds = "0"+intSeconds+" "

} else {

seconds = intSeconds+" "

}

timeString = xfile+hours+minutes+seconds

document.getElementById("t").innerHTML=timeString

window.setTimeout("tick()", 1000)

}

window.onload=tick

</script>

<div id="t"></div>

================================

Clock.innerHTML = timeString

定时重写clock的内容，达到时钟效果

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。