JS實現簡單計數器
用HTML CSS和JavaScript實現簡單計數器,有加、減和零三個按鈕,分別實現加一、減一和歸零操作。下面先看一下效果圖。
HTML代碼
<div class="body"> <div class="text"> <font>Counter</font> </div> <div class="count" > <span id="demo" class="ft"> 2 </span> </div> <div class="btn"> <button type="button" οnclick="add()" class="btn1">+</button> <button type="button" οnclick="zero()" class="btn2">零</button> <button type="button" οnclick="sub()" class="btn1">-</button> </div> </div>
CSS代碼
.body { width: 300px; height: 500px; background-color: #211d5a; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } .text { font-size: 24px; color: white; margin-top: 60px; text-shadow: 2px 2px 2px #fff; } .count { position: relative; width: 200px; height: 200px; margin-top: 60px; border: 10px solid; border-color: rgb(79, 59, 156); border-radius: 50%; display: flex; } .ft { font-size: 100px; color: #fff; /*left: 50%; margin-left: -102px; margin-top: 40px;*/ margin: auto; } .btn { width: 220px; display: flex; /*flex-direction: row;*/ justify-content: space-between; margin-top: 60px; } .btn1 { width: 50px; height: 30px; border: 0px; border-radius: 4px; background-color: rgb(79, 59, 156); font-size: 20px; color: #efdaff; } .btn2 { width: 50px; height: 30px; border: 0px; border-radius: 4px; background-color: rgb(79, 59, 156); font-size: 22px; color: #efdaff; }
tips:彈性盒子display:flex佈局+margin:auto可實現完美居中。
JS代碼
<script> var counter = document.getElementById("demo").innerHTML; function add() { counter++; document.getElementById("demo").innerHTML = counter; } function sub() { if(counter == 0) { counter = 0; } else { counter--; document.getElementById("demo").innerHTML = counter; } } function zero() { counter = 0; document.getElementById("demo").innerHTML = counter; } </script>
以上代碼即可實現效果。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。