码迷,mamicode.com
首页 > 其他好文 > 详细

2016-06-02 获取系统当前日期和时间并显示在某个元素上

时间:2016-06-02 23:33:59      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

1.

<script>
        window.onload=function(){
         getDateAndTime();
        setInterval(getDateAndTime,1000);
     }

        //获取系统的日期和时间并显示在某个元素上
        function getDateAndTime(){
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth()+1;
            var day = myDate.getDate();
            var week = myDate.getDay();//星期几
            formateWeekDay(week);//格式化星期几
            var hour = myDate.getHours();
            var minute = myDate.getMinutes();
            var second = myDate.getSeconds();
            var str = formateNum(year)+‘年‘+formateNum(month)+‘月‘+formateNum(day)+‘日‘+formateNum(hour)+‘时‘+formateNum(minute)+‘分‘+formateNum(second)+‘秒‘;
            //document.body.innerHTML=str;
            var showTime =document.getElementById("p");
            showTime.innerHTML=str;
        }

        //格式化星期几
        function formateWeekDay(num){
            if(num===0) return ‘星期日‘;
            if(num===1) return ‘星期一‘;
            if(num===2) return ‘星期二‘;
            if(num===3) return ‘星期三‘;
            if(num===4) return ‘星期四‘;
            if(num===5) return ‘星期五‘;
            if(num===6) return ‘星期六‘;
        }

        //格式化一位数字前面加个0
        function  formateNum(num){
            return num<10?‘0‘+num:num;
        }
    </script>
</head>
<body>
    <p id="p">当前时间为:</p>
</body>

2.

技术分享

 <style>
        img{width: 100px; height: 100px}
    </style>
    <script>
        window.onload=function(){
         getDateAndTime();
        setInterval(getDateAndTime,1000);
     }

        //获取系统的日期和时间并显示在某个元素上
        function getDateAndTime(){
            var myDate = new Date();
            var p = document.getElementById(‘p‘);
            var hour = myDate.getHours();
            var minute = myDate.getMinutes();
            var second = myDate.getSeconds();
            var str = formateNum(hour)+":"+formateNum(minute)+":"+formateNum(second);

            p.innerHTML =‘当前时间为 ‘+str;
            var imgs =document.getElementsByTagName(‘img‘);
            for(var i =0;i<imgs.length;i++){

                (i==2||i==5)?imgs[i].src=‘images/colon.JPG‘: imgs[i].src=‘images/‘+str.charAt(i)+‘.JPG‘;
            }
        }

        //格式化一位数字前面加个0
        function  formateNum(num){
            return num<10?‘0‘+num:‘‘+num;
        }
    </script>
</head>
<body>
    <p id="p"></p>
    <img src="images/0.JPG"/>
    <img src="images/0.JPG"/>
    <img class="colon" src="images/colon.JPG"/>
    <img src="images/0.JPG"/>
    <img src="images/0.JPG"/>
    <img class="colon"  src="images/colon.JPG"/>
    <img src="images/0.JPG"/>
    <img src="images/0.JPG"/>
</body>

  

2016-06-02 获取系统当前日期和时间并显示在某个元素上

标签:

原文地址:http://www.cnblogs.com/bravolove/p/5554567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!