<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 192px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
border: 1px solid red;
}
#left,#center,#right{
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #eee;
font-weight: bold;
font-size: 18px;
cursor: pointer;
}
#center{
width: 90px;
background: #fff;
cursor: auto;
}
#right{
float: right;
cursor: pointer;
}
</style>
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener("load",init);
} else if(window.attachEvent()){ //IE浏览器不支持addEventListener
window.attachEvent("onload",init); //IE浏览器在写时间的时候必须加上on
}
function init(){
var left = document.getElementById("left");
left.onclick = function (){
leftNum();
}
var right = document.getElementById("right");
right.onclick = function (){
rightNum();
}
function leftNum(){
var center = document.getElementById("center").innerHTML;
if (center > 1) { //如果中间显示的数大于1
center--; //自减
currentNum(center); //中间显示自减后的数值
} else{
alert("已经是第一个数了!!!");
}
}
function rightNum(){
var center = document.getElementById("center").innerHTML;
if (center < 10) { //如果中间显示的数值小于最大的数
center++ //自加
currentNum(center); //在中间显示自加后的数值
} else{
alert("已经是最后一个数了!!!");
}
}
function currentNum(num){
center.innerHTML = num; //在中间显示相应的数值
}
}
</script>
</head>
<body>
<div class="box">
<div id="left"><</div>
<div id="center">5</div>
<div id="right">></div>
</div>
</body>
</html>
实现一个简单的加减按钮
最新推荐文章于 2021-06-07 16:39:00 发布