关于数字加减框的CSS效果，onclick事件无反应

sspanzervor1 2018-12-26 05:07:40

从网上找到一个数字加减框的实现效果，点击加号或减号，文本框中的数字会随之加1或减1，但不知为什么，将程序加到我的页面中，点击没有任何反应，请各位前辈高手多多指教，不胜感激！！！

JavaScript代码和CSS代码如下所示：



<BODY bgcolor=skyblue>

<TABLE border=0 cellPadding=0 cellSpacing=0 >

      <thead>

          <tr>

            <td id="tdTop" name="tdTop" colspan="3" align="right">

                <span id="spLog" name="spLog">当前登录用户：<%=request.Cookies("ftt_uid")%></span>                     

                <span id="spRelog" name="spRelog"><a href="ftt_login.asp">重新登录</a></span>

            </td>

        </tr>

    </thead>

    <tbody>   

                <form class="FT_form" id="frm1" name="frm1" method="post">

                    <div>

                        <li style="border-bottom:2px solid #808080; margin:0 0 0 15px; width:600px">

                            <h2 class="form_title">新增房态记录</h2>

                            <p class="required_notification">* 为必填项</p>

                        </li>

                    </div>

                    <ul>

					<fieldset>

                  		<legend>基本信息</legend>



 						<li>

                        	<label for="lbl_Fxfh">* 房型与房号（必选）：</label>

                        	<select name="slt_rtypenum" id="slt_rtypenum" onChange="change_rtype(this.value);" required>

                            			<option value="">==请选择房型==</option>

                            	<%

									set rs=db.execute("select * from t_ward_type order by c_ward_typeid")

									do while not rs.eof

								%>

                                		<option value="<%=rs("c_ward_typeid")%>"><%=rs("c_ward_typename")%></option>

                                <%

                                    	rs.movenext

                                 	loop

								%>

                            </select>

                            <select name="slt_rnum" id="slt_rnum" requeired>

                            	<option value="">==请选择房号==</option>

                            </select>

                        </li>

           

                        <li>                     

                            <label for="lbl_idate">* 起始日期（必填）：</label>

                            <input type="text" id="txt_idate" name="txt_idate" readonly />

                        </li>

                        <li style="height:20px">

                            <label for="lbl_iperiod">* 期间（必填）：</label>

							<div class="btn-numbox">

                            	<div><span class="num-minus" id="num-minus">-</span></div>

                                <div><input class="input-num" id="txt_iperiod" name="txt_iperiod" type="text" value="28" /></div>

                                <div><span class="num-plus" id="num-plus">+</span></div>

                            </div>

                        </li>

                        <li style="border-bottom:2px solid #ffffff; width:500px">

                            <label for="lbl_remark">  备注（建议填写）：</label>

                            <textarea id="txt_remark" name="txt_remark" cols="40" rows="6"></textarea>

                        </li>

                    </fieldset>

                        <li>

                            <button class="submit" type="submit">Update</button>

                        </li>

                    </ul>

                    <ul>

                    	<fieldset>

                        	<legend>补充信息</legend>

                        <li>

                            <label for="lbl_cname">* 客户姓名（必填）：</label>

                            <input type="text" id="txt_cname" name="txt_cname" required />

                            <!--<label for="txt_cname"></label>-->

                        </li>

                        </fieldset>

                    </ul>

                </form>            



</BODY>

 

<script>

	

//期间天数增减按钮

var num-minus=document.getElementById("num-minus");

var num-plus=document.getElementById("num-plus");

var txt_iperiod=document.getElementById("txt_iperiod");

	alert(num-minus);

num-minus.onclick = function(){



	if (txt_iperiod.value<=0)

		{txt_iperiod=0;}

	else 

		{txt_iperiod.value=parseInt(txt_iperiod.value)-1;}

}



num-plus.onclick = function(){

	if (txt_iperiod.value<=0)

		txt_iperiod=0;

	else 

		txt_iperiod.value=parseInt(txt_iperiod.value)+1;

}

</script>



</html>



/*新增房态页面 期间（住院日）数字输入控件，类淘宝订单商品数量增减效果*/

a {text-decoration: none;}

a:hover {cursor: pointer;text-decoration: none;}

a:link {text-decoration: none;}

            

.btn-numbox {

	float:left;

	overflow: hidden;

	margin-top: 0;

	vertical-align:top;

}

            

.btn-numbox div {

	float: left;

	vertical-align:top;

}

            



.btn-numbox .num-minus,

.input-num,

.num-plus {

	display: inline-block;

	width: 20px;

	height: 18px;

	margin: 0;

	line-height: 20px;

	text-align: center;

	font-size: 18px;

	color: #999;

	cursor: pointer;

    border: 1px solid #e6e6e6;

}

          

.btn-numbox .input-num {

	width: 58px;

	height: 18px;

	color: #333;

	border-left: 0;

	border-right: 0;

}