您的位置：首页 > 其它

电子时钟

2015-08-14 09:41 225 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TIME</title>
<style>
img{
width: 64px;
}
div#dateline {
font-size: 30px;
font-weight: bolder;
}
</style>
<script>
/**
* 初始化显示时间
*/
function showTime(){
//2015年10月1日
var dateline = new Date(2015,9,1).getTime();
var now = new Date().getTime();

//两个时间相差多少秒
var differ = Math.floor((dateline - now)/1000);

//取得相差时间，有多少天。(一天等于86400秒)
var day = Math.floor(differ/86400);
//取天的余数得到剩余的小时，再获取剩余小时。(一小时等于3600秒)
var hours = Math.floor((differ%86400)/3600);
//取得剩余分钟数
var min = Math.floor(((differ%86400)%3600)/60);
//取得剩余秒数
var send = Math.floor(((differ%86400)%3600)%60);
//拼接出输出字符串
var str = day+"天"+hours+"小时"+min+"分"+send+"秒";

var html = [];
//把字符串转换成图片html
for(var i = 0;i<str.length;i++){
//是数字就进行转换，非数字直接输出
if(!isNaN(str[i])){
html.push('<img src="time_num_'+str[i]+'.png">');
continue;
}
html.push(str[i]);
}
//修改页面内容
document.getElementById('dateline').innerHTML = html.join(" ");
//一秒后再调用自己
setTimeout("showTime()",1000);
}
</script>
</head>
<body onload="showTime()" style="text-align:center;">
<h1>距离2015年国庆节还有</h1>
<div id="dateline"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8.13第五题</title>
</head>
<body onLoad="item()">
<img id="ho1" src="time_num_0.png">
<img id="ho2" src="time_num_0.png">
<img id="sign1" src="time_num_colon.png">
<img id="mi1" src="time_num_0.png">
<img id="mi2" src="time_num_0.png">
<img id="sign1" src="time_num_colon.png">
<img id="se1" src="time_num_0.png">
<img id="se2" src="time_num_0.png">
<div style="margin: 20px 0;">
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
</div>
<script>
var hour,min,sec,h1,h2,m1,m2,s1,s3;
var ho1,ho2,mi1,mi2,se1,se2;
var tid;
function item(){
var date=new Date();
hour=date.getHours();
min=date.getMinutes();
sec=date.getSeconds();
h1=parseInt(hour/10);
h2=hour%10;
m1=parseInt(min/10);
m2=min%10;
s1=parseInt(sec/10);
s2=sec%10;
ho1=getId("ho1");
ho2=getId("ho2");
mi1=getId("mi1");
mi2=getId("mi2");
se1=getId("se1");
se2=getId("se2");
ho1.src="time_num_"+h1+".png";
ho2.src="time_num_"+h2+".png";
mi1.src="time_num_"+m1+".png";
mi2.src="time_num_"+m2+".png";
se1.src="time_num_"+s1+".png";
se2.src="time_num_"+s2+".png";
tid=setTimeout("item()",1000);
}

function getId(id){
return document.getElementById(id);
}

function start(){
item();
}

function stop(){
clearTimeout(tid);
}
</script>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航