js 求高手解答
像一个textbox，但是在它的右边有一对按钮（一个向上箭头，一个向下的箭头），可以对文本内容进行向上或是向下的加减。比如：伤亡人数：0。伤亡人数初始值是“0”,点向上的...
像一个textbox，但是在它的右边有一对按钮（一个向上箭头，一个向下的箭头），可以对文本内容进行向上或是向下的加减。
比如：伤亡人数：0。伤亡人数初始值是“0”,点向上的按钮则加1，点击向下的按钮则减1。当减为“0”时，便不能再减。而且，该数字也可以自己输入。 展开
比如：伤亡人数：0。伤亡人数初始值是“0”,点向上的按钮则加1，点击向下的按钮则减1。当减为“0”时，便不能再减。而且，该数字也可以自己输入。 展开
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
<!--
.jj input{_zoom:1;height:25px;line-height:25px;margin:0px; padding:0px; display:block; position:relative; z-index:0;float:left;}
.jj input[name="de"]{text-align:center;border-left:solid 1px #bdbded;border-top:solid 1px #bdbded;border-bottom:solid 1px #bdbded;border-right:0px none;width:15px;background:#ededed;}
.jj input[name="ac"]{text-align:center;border-right:solid 1px #bdbded;border-top:solid 1px #bdbded;border-bottom:solid 1px #bdbded;border-left:0px none;width:15px;background:#ededed;}
.jj input[type="text"]{text-align:center;width:60px;height:23px;border-right:0px none;border-top:solid 1px #bdbded;border-bottom:solid 1px #bdbded;border-left:0px none;}
span{color:#F03;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:60px; font-weight:bold;}
div{display:block; position:relative; z-index:0; padding:20px;}
-->
</style>
<script src="JQ库文件路径，没有就去百度一下" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
var jia = $(':button[name="de"]'), jian = $(':button[name="ac"]'), t = $(':text[name="nu"]'),s=0,l=0,dan=2458.5,d=$('.dan span'),z=$('.zong span');
d.text(dan);
jia.click(function(){
s=parseInt(t.val())+1;
z.text(dan*s);
t.val(s);
})
jian.click(function(){
if(parseInt(t.val()) > 0){
s=parseInt(t.val())-1;
z.text(dan*s);
t.val(s);
}
})
t.keyup(function(){
z.text($(this).val()*dan);
})
})
//-->
</script>
</head>
<body>
<div class="dan">单价：<span>0</span></div>
<div class="zong">总价：<span>0</span></div>
<div class="jj" align="center">
<input type="button" value="+" name="de" />
<input type="text" value="0" name="nu" />
<input type="button" value="-" name="ac" />
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
<!--
.jj input{_zoom:1;height:25px;line-height:25px;margin:0px; padding:0px; display:block; position:relative; z-index:0;float:left;}
.jj input[name="de"]{text-align:center;border-left:solid 1px #bdbded;border-top:solid 1px #bdbded;border-bottom:solid 1px #bdbded;border-right:0px none;width:15px;background:#ededed;}
.jj input[name="ac"]{text-align:center;border-right:solid 1px #bdbded;border-top:solid 1px #bdbded;border-bottom:solid 1px #bdbded;border-left:0px none;width:15px;background:#ededed;}
.jj input[type="text"]{text-align:center;width:60px;height:23px;border-right:0px none;border-top:solid 1px #bdbded;border-bottom:solid 1px #bdbded;border-left:0px none;}
span{color:#F03;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:60px; font-weight:bold;}
div{display:block; position:relative; z-index:0; padding:20px;}
-->
</style>
<script src="JQ库文件路径，没有就去百度一下" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
var jia = $(':button[name="de"]'), jian = $(':button[name="ac"]'), t = $(':text[name="nu"]'),s=0,l=0,dan=2458.5,d=$('.dan span'),z=$('.zong span');
d.text(dan);
jia.click(function(){
s=parseInt(t.val())+1;
z.text(dan*s);
t.val(s);
})
jian.click(function(){
if(parseInt(t.val()) > 0){
s=parseInt(t.val())-1;
z.text(dan*s);
t.val(s);
}
})
t.keyup(function(){
z.text($(this).val()*dan);
})
})
//-->
</script>
</head>
<body>
<div class="dan">单价：<span>0</span></div>
<div class="zong">总价：<span>0</span></div>
<div class="jj" align="center">
<input type="button" value="+" name="de" />
<input type="text" value="0" name="nu" />
<input type="button" value="-" name="ac" />
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
