实现一个简单的加减按钮

来源：互联网发布：2018域名行情编辑：程序博客网时间：2024/05/21 19:27
<!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浏览器不支持addEventListenerwindow.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) {   //如果中间显示的数大于1center--;       //自减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>
阅读全文
0 0