显示时间——显示并自动刷新当前年月日星期时分秒 

<!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;
    
    setInterval( fnTime, 1000 );   //每隔1s刷新一次，这样秒数才能自动更新
    
    fnTime ();  //为了防止因为setInterval()文字1s后才显示，所以一开始先执行
    
    function fnTime () {
    
        var myTime = new Date();
        var iYear = myTime.getFullYear();
        var iMonth = myTime.getMonth()+1;
        var iDate = myTime.getDate();
        var iWeek = myTime.getDay();
        var iHours = myTime.getHours();
        var iMin = myTime.getMinutes();
        var iSec = myTime.getSeconds();
        var str = '';
        //星期出来的是数字，转换为文字
        if( iWeek === 0 ) iWeek = '星期日';
        if( iWeek === 1 ) iWeek = '星期一';
        if( iWeek === 2 ) iWeek = '星期二';
        if( iWeek === 3 ) iWeek = '星期三';
        if( iWeek === 4 ) iWeek = '星期四';
        if( iWeek === 5 ) iWeek = '星期五';
        if( iWeek === 6 ) iWeek = '星期六';
        
        str = iYear+ '年' +iMonth+'月'+iDate+'日 '+iWeek+' '+ toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);
        
        oBody.innerHTML = str;
    
    }
};

function toTwo ( n ) {  //把1位数字转换为2位，比如0转换为00，格式美观
    return n < 10 ?  '0' + n : '' + n;  //如果小于0自动加一个0，所以0应为字符串"0"，为了保证格式统一，所以原先有2为的也变为字符串，加了""
}

</script>

</head>

<body style="font-size:60px;">
</body>
</html>

 图片版时分秒

<!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 aImg = document.getElementsByTagName('img');
    
    setInterval( fnTime, 1000 );
    
    fnTime ();
    
    function fnTime () {
    
        var myTime = new Date();
        var iHours = myTime.getHours();
        var iMin = myTime.getMinutes();
        var iSec = myTime.getSeconds();
        var str = toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
        
        // str = '214204';
        
        oP.innerHTML = str;
        
        // aImg[4].src = 'img/' + str.charAt(4) + '.JPG';
        for ( var i=0; i<str.length; i++ ) {
            aImg[i].src = 'img/' + str.charAt(i) + '.JPG';    //图片的哪一位就是str字符串的哪一位变化
        }
    
    }
};

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

</script>

</head>

<body>
<p id="time" style="font-size:60px;"></p>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
</body>
</html>

 

posted @ 2017-03-22 19:43  念念念不忘  阅读(415)  评论(0)    收藏  举报