进度条的写法
<!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;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>