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();
    // });
    }
  • 相关阅读:
    django文件——django + jquery-file-upload上传篇(一)-- 插件实现文件上传
    jQuery动态数字翻滚计数到指定数字的文字特效 JQuery.Running.js
    bootstrap table 第一弹:实现模态框弹出编辑
    input输入框下横线动画实现+自动填充
    Jquery 实现动态添加输入框&编号
    解决公司内网只允许微信上网:CentOS7 + SS5 搭建Sockt5代理服务器方案
    python学习系列:装饰器
    linux学习:文件属性(一)—— inode
    requests模块中request函数参数介绍
    Forbidden(403)的3种处理方式
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/8079332.html
Copyright © 2011-2022 走看看