HTML
CSS
JS
Preview
<div class="container"> <button class="b1" id="sonuc">0<br><br><br> </button> <button class="b2" onclick="arttir()">+ </button> <button class="b3" onclick="azalt()">- </button> <button class="b3" style="left: 150px;" onclick="sifir()">R </button> </div>
.b1{ width: 170px; height: 60px; position: absolute; left: 40px; border:none; border-radius: 50%; top: 40px; font-size:60px; margin: 1px; background-image:linear-gradient(to right, purple , cyan); color:black; } .container{ background-image:linear-gradient(to right, purple , cyan ); height: 250px; margin-top: 125px; border: 10px solid gray; width: 275px; border-radius: 25px; position: absolute; left: 475px; } .b2{ width: 50px; height: 50px; position: absolute; left: 30px; border:none; border-radius: 50%; top: 150px; font-size:39px; margin: 10px; background: #FF6766; color:white; } .b3{ width: 50px; height: 50px; position: absolute; left: 90px; border-radius: 50%; border:none; top: 150px; font-size:39px; margin: 10px; background: #FF6766; color:white; }
var span = document.getElementById('sonuc'); var spdeg = 0; function arttir() { spdeg++; span.innerHTML=spdeg; }; function sifir() { spdeg=0; span.innerHTML=spdeg; }; function azalt(){ spdeg--; span.innerHTML=spdeg; } span.innerHTML=spdeg;
Görünüm