<style>
.isaret{
border: 3px solid rgb(22, 199, 253);
padding: 30px;
margin: 10px;
display: inline-block;
color: white;
background-color: rgb(32, 99, 243);
}
.orta{
border: 3px solid rgb(22, 199, 253);
padding: 30px;
margin-left: 48%;
display: inline-block;
background-color: rgb(32, 99, 243);
color: white;
}
body{
background-color: rgb(116, 116, 116);
}
</style>
<body>
<div class="isaret" onclick="artı()">+</div><div class="isaret"onclick="eksi()">-</div><br>
<div id="ortası" class="orta">0</div><div id="resim"></div><div id="cubuk"></div>
<script>
var sayı =0;
function artı()
{
sayı=sayı + 5;
document.getElementById("ortası").innerHTML= sayı;
if(sayı >0 && sayı<100){
document.getElementById("resim").innerHTML="<img src='drop.png'>";
}
if(sayı <0){
document.getElementById("resim").innerHTML="<img src='ice.png'>";
}
if(sayı >99){
document.getElementById("resim").innerHTML="<img src='cloud.png'>";
}
document.getElementById("cubuk").innerHTML="<img src= bar.png height=40px width="+sayı+">"
}
function eksi()
{
sayı=sayı-5;
document.getElementById("ortası").innerHTML= sayı;
if(sayı >0 && sayı<100){
document.getElementById("resim").innerHTML="<img src='drop.png'>";
}
if(sayı <0){
document.getElementById("resim").innerHTML="<img src='ice.png'>";
}
if(sayı >99){
document.getElementById("resim").innerHTML="<img src='cloud.png'>";
}
document.getElementById("cubuk").innerHTML="<img src= bar.png height=40px width="+sayı+">"
}
</script>
Çalışan Uygulamayı görmek için tıklayınız.