JavaScript实现点击按钮数字增加减少功能(可直接使用)
js实现点击按钮数字加减功能,html、css、js
·
功能介绍:点击按钮实现数字按钮的自加和自减功能
完整代码如下:可直接使用
<!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>
效果如下:
更多推荐
已为社区贡献1条内容
所有评论(0)