zoukankan      html  css  js  c++  java
  • 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="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();
    // });
    }
  • 相关阅读:
    要发布游戏啦,平台要 3000个6位不重复的验证码 看我怎么做!!!
    数字化婚姻配对尝试
    java 和 .NET 的 类继承方面 的不同
    Asp.Net Core 实现谷歌翻译ApI 免费版
    Asp.Net Core 全局模型验证
    Asp.Net Core 下 Newtonsoft.Json 转换字符串 null 替换成string.Empty
    Windows 10 远程连接出现函数错误 【这可能由于CredSSP加密Oracle修正】
    矫正系统时间
    linux 安装WildFly 及可能遇到的问题
    ubuntu 安装 jdk-7
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/8079332.html
Copyright © 2011-2022 走看看