0
마음이있는 기부 진행률 표시 줄을 만들고 싶습니다. CSS/HTML 조합으로 가능합니까? 또는 heart_10, heart_20 등 다양한 이미지가있는 포토샵을 통해서만 가능합니까?심장 이미지가있는 기부 진행률 표시 줄
감사합니다.
A
답변
0
이 코드에는 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)" /> $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>