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

本文介绍了一个简单的网页应用,通过两个按钮实现数字的自增和自减功能。使用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>

效果如下:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值