zoukankan      html  css  js  c++  java
  • 进度条的写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <style type="text/css">
    /*进度条*/
            .progressbar{margin:1.5rem auto;width:80%;padding: 0.1rem;height:1rem;text-align:center;border:8px solid rgba(175,125,66,1);border-radius:1rem;overflow:hidden;position:relative}
            .progressbar img{width: 16rem;height:1rem;position:absolute;left:-15.9rem}
            .progressbar span{position:absolute;z-index:10;left:6.4rem;font-size:.7rem;font-weight:100;color:#fff}
            .load{position:fixed;height:100%;width:100%;background:rgba(0,0,0,.8);z-index:999}
            .load .loadfont{width:100%;height:50px;color:#fff;text-align:center;margin-top:-25px;position:absolute;top:50%;font-size:1rem}
            /*音乐相关*/
    
    </style>
    
    <body>
    <div class="progressbar">
            <img src="a.png">
            <span>剩余15秒</span>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    
    
    //滚动
    var maxTime=100;
    var progressTimer = setInterval(function () {
        //console.log("d");
                        if(maxTime>0){
                            $(".progressbar").find("span").html("剩余"+maxTime/10+"秒");
                        }
                        else{
                           //  停止
                        }
                        //滚动条
                        progressleft = parseInt($(".progressbar").find("img").css("left").replace("px",""));
                        if(progressleft<0){
                            progressleft = progressleft+ $(".progressbar").width()/150;
                            $(".progressbar").find("img").css("left",progressleft);
                        }
                         maxTime--;
                    }, 100);
    </script>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <style type="text/css">
    /*进度条*/
            .progressbar{margin:1.5rem auto;80%;padding: 0.1rem;height:1rem;text-align:center;border:8px solid rgba(175,125,66,1);border-radius:1rem;overflow:hidden;position:relative}
            .progressbar img{ 16rem;height:1rem;position:absolute;left:-15.9rem}
            .progressbar span{position:absolute;z-index:10;left:6.4rem;font-size:.7rem;font-weight:100;color:#fff}
            .load{position:fixed;height:100%;100%;background:rgba(0,0,0,.8);z-index:999}
            .load .loadfont{100%;height:50px;color:#fff;text-align:center;margin-top:-25px;position:absolute;top:50%;font-size:1rem}
            /*音乐相关*/

    </style>

    <body>
    <div class="progressbar">
            <img src="a.png">
            <span>剩余15秒</span>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">


    //滚动
    var maxTime=100;
    var progressTimer = setInterval(function () {
        //console.log("d");
                        if(maxTime>0){
                            $(".progressbar").find("span").html("剩余"+maxTime/10+"秒");
                        }
                        else{
                           //  停止
                        }
                        //滚动条
                        progressleft = parseInt($(".progressbar").find("img").css("left").replace("px",""));
                        if(progressleft<0){
                            progressleft = progressleft+ $(".progressbar").width()/150;
                            $(".progressbar").find("img").css("left",progressleft);
                        }
                         maxTime--;
                    }, 100);
    </script>

  • 相关阅读:
    移动银盘 文件或目录损坏且无法读取 提示格式化
    error: Some data has already been output, can't send PDF file
    php pdf english french duch……应用攻略,ufpdf
    photoshop cs4 多语言
    c++常用知识小结
    简单的排序
    内存对齐
    socket网络编程常用的结构及函数小结
    字符和字符串处理小结
    几个小程序
  • 原文地址:https://www.cnblogs.com/yjhua/p/5174770.html
Copyright © 2011-2022 走看看