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>

以上代码即可实现效果。