HTML会动的时钟（简单⼜好玩）代码如下(为了⽅便看我把css代码和javascript代码都放在html⽂件中):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会动的时钟</title>
<style>
#time{
color: blue;
border: 1px solid gray;
width: 320px;
height: 30px;
font-size: 30px;
padding-left: 15px;
}
#start{
height: 50px;
width: 100px;
font-size: 30px;
}
#stop{
height: 50px;
width: 100px;
font-size: 30px;
}
.one{
/*左对齐*/
text-align: left;
}
.two{
/*右对齐*/
text-align: right;
}
.boss{
/
*将整个table放在中间*/
margin: auto;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" class="boss">
<tr>html document是什么
<td colspan="2">
<h1 id="time"></h1>
</td>
</tr>
<tr>
<td class="one">
<!--创建开始按钮-->
<input type="button" id="start" value="开始" disabled="disabled" οnclick="start()">
</td>
<td class="two">
<!--创建暂停按钮-->
<input type="button" id="stop" value="暂停" οnclick="stop()">
</td>
</tr>
</table>
</body>
javascript代码:
<script type="text/javascript">
var date =new Date();
// 在页⾯中显⽰出时间
// 全局变量
var clear;
// 调⽤⽅法执⾏时间的变动
begin();
function begin(){
// 创建计时器，每过⼀秒调⽤⼀次放到setTime()
clear = window.setInterval("setTime()",1000);
}
function setTime(){
// 这⾥需要新创建⼀个Data类来更新时间
function stop(){
//清除计时器
window.clearInterval(clear);
//暂停键不可按，开始按键可以按
}
function start(){
begin();
//开始键不可按，暂停键可以按
}
</script>
</html>
效果:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。