一个简单的前端实例（计数器）

最新推荐文章于 2024-05-06 11:01:41 发布

百采荀

最新推荐文章于 2024-05-06 11:01:41 发布

阅读量588

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/acsfvsv/article/details/131756650

版权

前言

通过一段时间的学习，掌握了一定的技术后，我们就需要一些实例来锻炼自己加深印象了，今天我来向大家介绍一个简单的示例，计数器

计数器

计数器顾名思义，就是计数用的，所以今天我们就来实现它

1.首先我们先建立一个盒子模型

他分别有一个大盒子（box）和一个小盒子（num）以及两个按钮（increase,reduce）组成，

类选择器class和id选择器id大家都知道的吧，就是一个

类选择器class=””

.选择器名称{

属性：属性值;

....

}

和一个

#选择器名称{

属性：属性值;

....

}

<div class="box">
			<div id="num">4</div>
			<button id="increase">+</button>
			<button id="reduce">-</button>
</div>

所以我们现在一个盒子算是建好了，接下来就是把她变得好看一点，比如加一些宽度、高度、水平居中、边框什么的，总之变得好看就行了，大家也可以看看我的CSS样式

<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 200px;
				height: 200px;
				margin: 0px auto;
				margin-top: 100px;
			}
			#num{
				width: 100px;
				height: 100px;
				border: 1px solid gainsboro;
				text-align: center;
				line-height: 96px;
				font-size: 32px;
			}
			button{
				width: 30px;
				height: 51px;
			}
			#increase{
				position: absolute;
				top: 100px;
				left: 769px;
			}
			#reduce{
				position: absolute;
				top: 151px;
				left: 769px;
			}
		</style>

如图我所使用的就是行内样式，并且插入到了<head></head>里面

效果如下

怎么样是不是还可以

那么接下来就是插入JS了来实现我们的加减效果

//创建对象去获取他们
		let num = document.getElementById("num");
		let increase = document.getElementById("increase");
		let reduce = document.getElementById("reduce");
		//被点击时会触发下面的函数
		increase.onclick = function(){
			num.innerHTML = parseInt(num.innerHTML) + 1;
			if(num.innerHTML>1){
				//当数字大于1时便会解除对减少按钮的禁用
				reduce.disabled = false;
			}
		}
		//被点击时会触发下面的函数
		reduce.onclick = function(){
			num.innerHTML = parseInt(num.innerHTML) - 1;
			if(num.innerHTML==1){
				//当数字减少到一时会出发保护机制就会禁用减少的按钮
				reduce.disabled = true;
			}
		}

下面是对应效果

初始状态