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>

查看全文

相关阅读:
界面布美观布局
 登陆界面验证码设置
 很好的JAVESRIPT控件
 c#导入EXCEL数据
 微软：系列课程 >Silverlight for Windows Phone 开发系列课程
 JavaScript动态网页制作宝库
 Silverlight经典教程书籍汇总
 SQL删除表中有重复的记录
 Javascript鼠标事件
 Android系统架构(转)

原文地址：https://www.cnblogs.com/yjhua/p/5174770.html