首頁 > 開發者 > JavaScript
[html]
<p><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>bar</title>
<script type="text/javascript" src="jquery-1.8.0.min.js" ></script>
<style type="text/css">
#time_back{width:300px;height:20px;border:1px solid #246;background:#CCC}
#time_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}
#target_back{width:300px;height:20px;border:1px solid #246;background:#CCC}
#target_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){</p><p>
$("#input_time").change(function(){
var rate = $(this).attr("value");
changebar("#time_bar",rate,"red");
});
$("#input_target").change(function(){
var rate = $(this).attr("value");
changebar("#target_bar",rate,"orange");
});
/**
* 更新進度條
* @ param obj 進度條id
* @ param rate 進度，0-100間的整數
* @ param deadColor 當進度超過一定值（預設80）的顏色
*/
function changebar(obj,rate,deadColor){
if(undefined!=deadColor&&rate>80){
$(obj).css({"background":deadColor})
}
rate = rate%100 + "%";
$(obj).animate({width:rate},1000);
$(obj).html(rate);
}
});
</script>
<body>
日期：<div id="time_back" ><div id="time_bar" ></div></div>
進度：<div id="target_back" ><div id="target_bar" ></div></div>
<input type="text" id="input_time" />
<input type="text" id="input_target" />
</body>
</html></p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
