カート内に何もない場合は表示しない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
function ShowCart(){
var MyCart = document.getElementById("cart");
if(MyCart.innerHTML == "0"){
MyCart.style.display = "none";
}else{
MyCart.style.display = "block";
}
}
function SetCart(Num){
var MyCart = document.getElementById("cart");
MyCart.innerHTML = Num;
ShowCart();
}
</script>
<style type="text/css">
.fl{
position: relative;
}
#cart{
position: absolute;
top: 3px;
left: 10px;
border-radius: 50%;
font-size: 10pt;
line-height: 1em;
padding: 2px 2px 0px 2px;
color: white;
border: 4px solid red;
background: red;
}
</style>
<title>タイトル</title>
</head>
<body>
<div class="fl">
<img src="CartIcon256.png" width="50px" height="50px">
<span id="cart">0</span>
</div>
<br>
<script>
ShowCart();
</script>
<button type="buttun" OnClick="SetCart(0);">0</button>
<button type="buttun" OnClick="SetCart(1);">1</button>
<button type="buttun" OnClick="SetCart(2);">2</button>
<button type="buttun" OnClick="SetCart(3);">3</button>
</body>
</html>