js面向对象倒计时与文字左右滚动

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <!--  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> -->
    <script type="text/javascript" src="kg.js"></script>
    <style type="text/css">
    #gongao {
    width: 1000px;
    height: 30px;
    overflow: hidden;
    line-height: 30px;
    font-size: 13px;
    font-family: '宋体';
    background: #DDE5ED;
    color: #0C77CF;
    font-weight: bold;
}
    #scroll_begin,
    #scroll_end {
        display: inline
    }
    </style>
</head>

<body>
    <div id="cd_date" time='2018/01/01 00:00:00'>
        <span id="t_d"></span>天
        <span id="t_h"></span>时
        <span id="t_m"></span>分
        <span id="t_s"></span>秒
    </div>
    <div id="gongao">
        <div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div">
            <div id="scroll_begin">
                2017年11月28日开光大典上，上百位缘主欢喜参加法会，共同祈愿诸佛菩萨慈力加被、随缘救众，护佑祖国繁荣昌盛、社会和谐。以此开光殊胜功德祈福世界和平、国泰民安、风调雨顺。
            </div>
            <div id="scroll_end"></div>
        </div>
    </div>
</body>

</html>

js代码

// $(function () {
    window.onload = function(){
    var app = {
        // 文字横向滚动
        scrollWords:function(){
            function ScrollImgLeft(){ 
                var speed=50;
                var MyMar = null;
                var scroll_begin = document.getElementById("scroll_begin"); 
                var scroll_end = document.getElementById("scroll_end"); 
                var scroll_div = document.getElementById("scroll_div"); 
                scroll_end.innerHTML=scroll_begin.innerHTML; 
                function Marquee(){ 
                    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
                       scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
                    else
                       scroll_div.scrollLeft++; 
                    } 
                MyMar=setInterval(Marquee,speed); 
            //     scroll_div.onmouseover = function(){
            // 　　　　　clearInterval(MyMar);
            // 　　}
            //  　scroll_div.onmouseout = function(){
            // 　　　　 MyMar = setInterval(Marquee,speed); 　　　　
            // 　　}  
            }
            ScrollImgLeft();
        },
        //倒计时
        coutDown:function(){
            function GetRTime(){
                var time = document.getElementById('cd_date') .getAttribute('time');
                // var time = $('#cd_date').attr('time');
                var EndTime= new Date(time);
                var NowTime = new Date();
                var t =EndTime.getTime() - NowTime.getTime();
                var d=Math.floor(t/1000/60/60/24);
                var h=Math.floor(t/1000/60/60%24);
                var m=Math.floor(t/1000/60%60);
                var s=Math.floor(t/1000%60);

                if (d<10) {
                    d = '0'+d;
                }
                if (h<10) {
                    h = '0'+h;
                }
                if (m<10) {
                    m = '0'+m;
                }
                if (s<10) {
                    s = '0'+s;
                }

                document.getElementById("t_d").innerHTML = d;
                document.getElementById("t_h").innerHTML = h;
                document.getElementById("t_m").innerHTML = m;
                document.getElementById("t_s").innerHTML = s;
            }
            setInterval(GetRTime,0);            
        },
        init:function () {
            var that = this;
            // 文字横向滚动
            that.scrollWords();
            //倒计时
            that.coutDown();
        }
    }
    app.init();
// });
}

 

posted @ 2017-12-21 11:34  松歌  阅读(176)  评论(0)  编辑  收藏  举报