JavaScript实现点击按钮数字增加减少功能（可直接使用）

最新推荐文章于 2023-04-24 19:37:05 发布

星光宇辰

最新推荐文章于 2023-04-24 19:37:05 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： web前端应用实例文章标签： css html 前端 javascript

本文链接：https://blog.youkuaiyun.com/NXBBC/article/details/123735198

web前端应用实例专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的网页应用，通过两个按钮实现数字的自增和自减功能。使用HTML和JavaScript编写，适用于初学者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能介绍：点击按钮实现数字按钮的自加和自减功能

完整代码如下：可直接使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>按钮数字加一减一</title>
	</head>
	<style type="text/css">
		#addtext {
			width: 80px;
			height: 50px;
			margin-bottom: 10px;
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			color: red;
			font-family: "宋体";
			resize: none; //边框不可调整 
			float: left;
		}
		
		.div1 {
			position: absolute;
			width: 200px;
			height: 150px;
			left: 50%;
			top: 50%;
			margin-left: -160px;
			margin-top: -100px;
			border: 1px solid #00F
		}
	</style>

	<body>
		<div align="center" class="div1">
			<div><h1 style="font-size: 20px;">自 加 减 按 钮</h1></div>
			<textarea readonly id="addtext"">0</textarea>
			<div><input type="submit" name="btn" value="增加" onclick="numAdd()"  />
			<input type="submit" name="btn" value="减少" onclick="numRed()"  /></div>
		</div>
	</body>
	<script>
		function numAdd() {
			var num = document.getElementById('addtext');
			num.innerHTML++;
			//document.cookie=num.value;
		}
		function numRed() {
			var num = document.getElementById('addtext');
			num.innerHTML--;
			//document.cookie=num.value;
		}
	</script>

</html>

效果如下：