如何用JavaScript编写一个支持长尾词的智能计数器？

本文共计520个文字，预计阅读时间需要3分钟。

使用HTML、CSS和JavaScript实现简单计数器，包含加、减和归零三个按钮，分别实现加一、减一和归零操作。以下是代码示例：

简单计数器 .body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } .text { font-size: 24px; margin-right: 10px; } 0

以上代码创建了一个简单的计数器，包含三个按钮：加一、减一和归零。点击相应的按钮可以修改显示的数字。

用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>

以上代码即可实现效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。