Question

我想创建一个带心脏的捐赠进度条..这可能与CSS / HTML组合或仅通过带有不同图像的photoshop可能，例如：heart_10，heart_20等..？

感谢。

Answer 1

此代码不具备HTML5进度条的功能，但它应该完成您尝试执行的操作。

<html>
<style>
#box {position:absolute;top:100px;left:200px;border:1px solid black;width:200px;height:201px}
#bar1 {position:absolute;left:39px; top:178px;height:0px;width:24px;background-color:lime;}
#contrib1 {left:38px;} #contrib2 {left:88px;} #contrib3 {left:138px;}
#heart1 {position:absolute;top:2px;left:2px;height:20px;width:20px}
.contrib {position:absolute;top:0px;height:200px;width:24px;background-color:yellow;border:1px solid black}
</style>
<body>
<script>
var goal=10000;

function donate(donor, amt) {
  var amtToGo=goal - amt,  
      ratioToGo=amtToGo/goal,
      toGoBar=ratioToGo * 200,     // bar top
      raised=200 - toGoBar;        // bar height
  bar1.style.top=toGoBar;
  bar1.style.height=raised + 1;    // Allow for top 1px border.
}
</script>
<input type="button" value="Donate 1" onclick="donate(1, 7500)" />&nbsp; $7500
<div id="box">
  <div id="contrib1" class="contrib"></div>
  <div id="contrib2" class="contrib"></div>
  <div id="contrib3" class="contrib"></div>
  <div id="bar1"><img id="heart1" src="http://icons.iconarchive.com/icons/dryicons/valentine/128/heart-icon.png"></div>
</div>
</body>
</html>

捐赠进度栏与心脏图像

1 个答案: