图片倒计时实现原理--js

最新推荐文章于 2021-12-14 20:10:48 发布

weixin_37460170

最新推荐文章于 2021-12-14 20:10:48 发布

阅读量704

点赞数

分类专栏： ‘美人在骨不在皮’---实现原理

本文链接：https://blog.csdn.net/weixin_37460170/article/details/77933969

版权

‘美人在骨不在皮’---实现原理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系统时间对象</title>
<script>
window.onload = function(){

var oBody = document.body;
var oP = document.getElementById('time');
//系统时间对象
//var time = new Date();
//alert( time );
//myTime typeof object
function fnTime(){
var myTime = new Date();

var aImg = document.getElementsByTagName('img');
//一下的typeof is number
var iHours = myTime.getHours();
var iMinutes = myTime.getMinutes();
var iSeconds = myTime.getSeconds();
var str = toTwo(iHours) + toTwo(iMinutes) + toTwo(iSeconds);

for( var i=0; i<str.length; i++){
    
    aImg[i].src = str.charAt(i)+'.png';
    }
}
fnTime();

setInterval( fnTime, 1000);
};

function toTwo( n ){
    
    return n<10 ? '0' +n : '' + n;
}
    


</script>
</head>

<body>
<p id="time" style="font-size:40px;"></p>
<img src="0.png" alt="" />
<img src="1.png" alt="" />
<img src="0.png" alt="" />
<img src="5.png" alt="" />
<img src="7.png" alt="" />
<img src="5.png" alt="" />
</body>
</html>

weixin_37460170

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片倒计时实现原理--js

系统时间对象window.onload = function(){var oBody = document.body;var oP = document.getElementById('time');//系统时间对象//var time = new Date();//alert( time );//myTime typeof objectfunction fnTime(){v
复制链接

扫一扫