js时钟

来源：互联网发布：ubuntu下卸载mysql 编辑：程序博客网时间：2024/04/28 21:27

1、获取当前时间

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="box"></div>    <script type="text/javascript">    var oBox=document.getElementById('box');    setInterval(function(){        var oDate=new Date();        var iYear=oDate.getFullYear();  //年        var iMon=oDate.getMonth()+1; //月        var iDate=oDate.getDate(); //日        var iH=oDate.getHours(); //时        var iM=oDate.getMinutes(); //分        var iS=oDate.getSeconds(); //秒        oBox.innerHTML=iYear+'年'+iMon+'月'+iDate+'日'+toZero(iH)+'时'+toZero(iM)+'分'+toZero(iS)+'秒'    },1000)    function toZero(num){        if ( num < 10 ) {            return '0'+num;  //str类型        }else{            return ''+num; //为了保持一致，str        };    }    </script></body></html>

2、图片版时钟

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">    window.onload=function(){        var aImg=document.getElementsByTagName('img');        getDate();        setInterval(getDate,1000);        function getDate(){            var oDate=new Date();            var iYear=oDate.getFullYear();            var iMon=oDate.getMonth()+1;            var iDate=oDate.getDate();            var iH=oDate.getHours();            var iMin=oDate.getMinutes();            var iS=oDate.getSeconds();            var str=String(iYear)+toZero(iMon)+toZero(iDate)+toZero(iH)+':'+toZero(iMin)+':'+toZero(iS);            console.log(str)            for (var i = 0; i < aImg.length; i++) {                aImg[i].src='img/'+ str.charAt(i) +'.png';            };        }    }    function toZero(num){        if ( num < 10 ) {            return '0'+num;  //str类型        }else{            return ''+num; //为了保持一致，str        };    }    </script></head><body>    <img src="img/0.png">    <img src="img/0.png">    <img src="img/0.png">    <img src="img/0.png">     年    <img src="img/0.png">    <img src="img/0.png">    月    <img src="img/0.png">    <img src="img/0.png">    日    <img src="img/0.png">    <img src="img/0.png">    <img src="img/second.png">    <img src="img/0.png">    <img src="img/0.png">    <img src="img/second.png">    <img src="img/0.png">    <img src="img/0.png"></body></html>

3、抖动的图片时钟

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    * {margin: 0;padding: 0}    #box {width: 1040px;height: 172px;position: relative;margin: 170px auto}    img {border:none;outline: none;display: block;position: absolute;top: 0}    </style>    <script type="text/javascript">    window.onload=function(){        var aImg=document.getElementsByTagName('img');        var oldTime='';        ini();        setInterval(ini,1000)        function ini(){            var oDate=new Date();            var str=toZero(oDate.getHours())+':'+toZero(oDate.getMinutes())+':'+toZero(oDate.getSeconds());            for (var i = 0; i < aImg.length; i++) {                aImg[i].style.left=i*130+'px';                    aImg[i].src='img/'+ str.charAt(i)+'.jpg';            };            //比如第一次str是12：12：12，和oldTime.charAt(i)都不等，所以整体跳一下。            //然后将12：12：12赋值给oldTime，然后str=12：12：13;在与oldTime.charAt(i)(此时oldtime等于12：12：12)；            //所以最后一个数动。            for (var i = 0; i < str.length; i++) {                if (str.charAt(i) != oldTime.charAt(i)) {                    toShake(aImg[i]);                };            };            oldTime=str;        }    }    function toZero(num){        if (num<10) {            return "0"+num;        }else{            return ''+num;        };    }    function toShake(obj){        var arr=[];        var iNow=0;        for (var i = 10; i >0; i-=2) {            arr.push(i,-i);   //不会添加到0；所以for后补个0        };        arr.push(0);        var timer=setInterval(function(){            obj.style.top=arr[iNow]+'px';            iNow++;            if (iNow==0) {                clearInterval(timer)            };        },30)    }    </script></head><body>    <p id="text"></p>    <div id="box">        <img src="img/0.jpg">        <img src="img/0.jpg">        <img src="img/colon.jpg">        <img src="img/0.jpg">        <img src="img/0.jpg">        <img src="img/colon.jpg">        <img src="img/0.jpg">        <img src="img/0.jpg">    </div></body></html>

4、向上滚动的图片时钟

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    * {margin: 0;padding: 0}    img {border:none;outline: none;display: block;}    #box {width: 1080px;height: 172px;margin: 170px auto;overflow: hidden;}    #box ul {list-style: none;width: 1600px;height: 172px;background: red}    #box ul li {width: 122px;height: 354px;float: left;padding-left: 10px;position: relative;left:0;-border: 1px solid #000 }    </style>    <script type="text/javascript" src="doMove.js"></script>    <script type="text/javascript">    window.onload=function(){        var oList=document.getElementById('list');        var aLi=oList.getElementsByTagName('li');        var aUp=getClassName(oList,'up');        var aDown=getClassName(oList,'down');        var aCenter=getClassName(oList,'center');        var oldTime='';        ini();        setInterval(ini,1000)        function ini(){            var oDate=new Date();            var str=toZero(oDate.getHours())+':'+toZero(oDate.getMinutes())+':'+toZero(oDate.getSeconds());            for (var i = 0; i < aUp.length; i++) {                aUp[i].src="img/"+str.charAt(i)+".jpg";                aCenter[i].src="img/"+str.charAt(i)+".jpg";                aDown[i].src="img/"+str.charAt(i)+".jpg";            };            for (var i = 0; i < aLi.length; i++) {                //console.log(aLi[i].style.top)                var arr=[-172,0,172];                if (str.charAt(i) != oldTime.charAt(i)) {                    doMove(aLi[i],'top',arr[1]);                    //console.log(aLi[i].style.top)                    if (aLi[i].style.top=0+'px') {                        doMove(aLi[i],'top',arr[0]);                    };                };            };            oldTime=str;        }    }    function toZero(num){        if (num<10) {            return "0"+num;        }else{            return ''+num;        };    }    function getClassName(oParent,sClassName){        var elems=oParent.getElementsByTagName('*');        var result=[];        for (var i = 0; i < elems.length; i++) {            if(elems[i].className==sClassName){                result.push(elems[i])            }        };        return result;    }    function getStyle(obj,attr){        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];    }    </script></head><body>    <p id="text"></p>    <div id="box">        <ul id="list">            <li><img src="img/0.jpg" class="up">                <img src="img/0.jpg" class="center">                <img src="img/0.jpg" class="down">            </li>            <li><img src="img/0.jpg" class="up">                <img src="img/0.jpg" class="center">                <img src="img/0.jpg" class="down">            </li>            <li><img src="img/colon.jpg" class="up">                <img src="img/colon.jpg" class="center">                <img src="img/colon.jpg" class="down">            </li>            <li><img src="img/0.jpg" class="up">                <img src="img/0.jpg" class="center">                <img src="img/0.jpg" class="down">            </li>            <li><img src="img/0.jpg" class="up">                <img src="img/0.jpg" class="center">                <img src="img/0.jpg" class="down">            </li>            <li><img src="img/colon.jpg" class="up">                <img src="img/colon.jpg" class="center">                <img src="img/colon.jpg" class="down">            </li>            <li><img src="img/0.jpg" class="up">                <img src="img/0.jpg" class="center">                <img src="img/0.jpg" class="down">            </li>            <li><img src="img/0.jpg" class="up">                <img src="img/0.jpg" class="center">                <img src="img/0.jpg" class="down">            </li>        </ul>    </div></body></html>

这里写图片描述

0 0