Function introduction: Click the button to realize the self-increment and self-decrement functions of the number button
The complete code is as follows: can be used directly
<!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>The effect is as follows:
