一个进度条，类似DNF的血条

古城微笑少年丶 2022-09-19 01:26 109阅读 0赞

最近要写下个血瓶效果，于是用PS做了两张图，用DIV做出了这样的效果：

![SouthEast][]![SouthEast 1][]![SouthEast 2][]

这个底色可以用CSS随便改，但这个粉红背景就得改图片了。

代码也很简单，就是JS，CSS了，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>进度条</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	
    	<script type="text/javascript" src="<%=path%>/struts/jquery/jquery-1.7.1.min.js?ver=1.2.8"></script>
    	<style type="text/css">
    		#blood_box{width:150px;height:150px;position:relative;background:#f00;overflow:hidden;}
    		#blood_a{width:150px;position:absolute;z-index:1;background-image:url('<%=path%>/resources/images/bloodbar.png');background-repeat:repeat-y;background-position:center bottom;}
    		#blood_b{width:150px;height:150px;position:absolute;z-index:2;background-image:url('<%=path%>/resources/images/bloodframe.png');background-repeat:no-repeat;}
    		#blood_c{width:150px;height:150px;position:absolute;z-index:3;text-align:center;margin:75px auto;}
    	</style>
    	<script type="text/javascript">
    		var i = 1;
    		var interval = setInterval(function(){
    			f1(i);
    			i = i+1;
    		},100);
    		function f1(i){
    			var ratio_height = 150*(100-i)/100;//根据百分比，计算div的高度
    			$("#blood_a").css("height",ratio_height+"px");//给div动态加上高度
    			$("#blood_c").html(i+"%");//给div动态加上值
    		}
    		setTimeout(f2,10000);
    		function f2(){
    			clearInterval(interval);
    		}
    	</script>
    
      </head>
      
      <body>
    	<label>生命回复进度</label>
    	<br>
    	<div id="blood_box">
    		<div id="blood_a"></div>
    		<div id="blood_b"></div>
    		<div id="blood_c"></div>
    	</div>
      </body>
    </html>

最后，附上jsp里所引的两张图片：

bloodbar.png

![SouthEast 3][]

bloodframe.png  
![SouthEast 4][]

[SouthEast]: https://img-blog.csdn.net/20131210105041812?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVuc3l6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20131210105057578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVuc3l6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: /images/20220828/6edaac03344942eaa8d9ec6b2bb36ef1.png
[SouthEast 3]: /images/20220828/9bdbc2bed7a748b188bd5c256e22eb08.png
[SouthEast 4]: /images/20220828/8a739c46e17e4219a9d60579c4665f2f.png