html + css + jquery實現簡單的進度條實例

時間 2019-11-13

標籤 html css jquery 實現簡單進度實例欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery實現進度條</title>
<style type="text/css">
body{
　　padding:30px;
　　margin-left:450px;
　　margin-top:200px;
　　width:350px;
　　border: 1px solid #98AFB7;
}
.progressBar{
　　width:280px;
　　height:20px;
　　border: 1px solid #98AFB7;
　　border-radius:8px;
　　background:#e1dfdf;
}
input{
　　margin-bottom:15px;
}
span{
　　position:relative;
　　top:-20px;
　　left:290px;
}
#bar {
　　width: 0px;
　　height: 20px;
　　border-radius: 7px;
　　background: #5EC4EA;
}
</style>javascript

//引入Jquery文件css

　　　　$("#span_s").text(ss);
　　　　var index = $("#span_s").text().indexOf(".");
　　　　if (index != -1) {
　　　　　　var context = $("#span_s").text().substring(0, index);
　　　　　　$("#span_s").text(context);
　　　　}
　　　　else {
　　　　　　$("#span_s").text(ss);
　　　　　　if (parseInt($("#span_s").text()) == 100) {
　　　　　　alert('完成');
　　　　　　}
　　　　}
　　} else {
　　　　　　clearInterval(bar);
　　　　}
　　}, speed);
}
java

</script>jquery

</head>
<body>
　　<input type="button" value="開始" onclick="progressBar()" />
　　<div class="progressBar"><div id="bar"></div></div><span id="span_s">0</span><span>%</span>
</body>
</html>函數

這個進度條實特別簡單，首先html裏面的話就是一個div裏面嵌套一個div，而後寫好想要的樣式就行，特效的實現也很簡單就是，一個定時器裏面寫一個匿名函數裏面實現也很簡單，我這裏是20毫秒執行一個匿名函數，裏面的代碼就是一次增長一個像素，固然你這裏也能夠用百分比去增長像素。介紹另一種方法，也能夠用動畫去實現進度條的效果。。。。。。有興趣的能夠去嘗試一下post