
具体思路其实就是通过JavaScript函数进行input里text的value值替换,点击按钮进行增加或者减少。
function add(){
var txt=document.getElementById("txt");
var a=txt.value;
a++;
if(txt.value<16){
txt.value=a;
}
}
function sub(){
var txt=document.getElementById("txt");
var a=txt.value;
if(a>0){
a--;
txt.value=a;
}else{
txt.value=0;
}
}
最后上一下代码,由于有点长,所以只上一下html代码,JavaScript我会上传一个附件出来。
<ul>
<li>
大王剩余:<input type="text" id="txtd" value="4"/>
<input type="button" onclick="addd()" value="+1">
<input type="button" onclick="subd()" value="-1"></td>
</li>
<li>
小王剩余:<input type="text" id="txtx" value="4"/>
<input type="button" onclick="addx()" value="+1">
<input type="button" onclick="subx()" value="-1"></td>
</li>
<li>
2剩余:<input type="text" id="txt2" value="16"/>
<input type="button" onclick="add21()" value="+1">
<input type="button" onclick="sub24()" value="-4">
<input type="button" onclick="sub23()" value="-3">
<input type="button" onclick="sub22()" value="-2">
<input type="button" onclick="sub21()" value="-1"></td>
</li>
<li>
A剩余:<input type="text" id="txta" value="16"/>
<input type="button" onclick="adda1()" value="+1">
<input type="button" onclick="suba4()" value="-4">
<input type="button" onclick="suba3()" value="-3">
<input type="button" onclick="suba2()" value="-2">
<input type="button" onclick="suba1()" value="-1"></td>
</li>
<li>
K剩余:<input type="text" id="txtk" value="16"/>
<input type="button" onclick="addk1()" value="+1">
<input type="button" onclick="subk4()" value="-4">
<input type="button" onclick="subk3()" value="-3">
<input type="button" onclick="subk2()" value="-2">
<input type="button" onclick="subk1()" value="-1"></td>
</li>
<li>
Q剩余:<input type="text" id="txtq" value="16"/>
<input type="button" onclick="addq1()" value="+1">
<input type="button" onclick="subq4()" value="-4">
<input type="button" onclick="subq3()" value="-3">
<input type="button" onclick="subq2()" value="-2">
<input type="button" onclick="subq1()" value="-1"></td>
</li>
<li>
J剩余:<input type="text" id="txtj" value="16"/>
<input type="button" onclick="addj1()" value="+1">
<input type="button" onclick="subj4()" value="-4">
<input type="button" onclick="subj3()" value="-3">
<input type="button" onclick="subj2()" value="-2">
<input type="button" onclick="subj1()" value="-1"></td>
</li>
<li>
10剩余:<input type="text" id="txt10" value="16"/>
<input type="button" onclick="add101()" value="+1">
<input type="button" onclick="sub104()" value="-4">
<input type="button" onclick="sub103()" value="-3">
<input type="button" onclick="sub102()" value="-2">
<input type="button" onclick="sub101()" value="-1"></td>
</li>
<li>
9剩余:<input type="text" id="txt9" value="16"/>
<input type="button" onclick="add91()" value="+1">
<input type="button" onclick="sub94()" value="-4">
<input type="button" onclick="sub93()" value="-3">
<input type="button" onclick="sub92()" value="-2">
<input type="button" onclick="sub91()" value="-1"></td>
</li>
<li>
8剩余:<input type="text" id="txt8" value="16"/>
<input type="button" onclick="add81()" value="+1">
<input type="button" onclick="sub84()" value="-4">
<input type="button" onclick="sub83()" value="-3">
<input type="button" onclick="sub82()" value="-2">
<input type="button" onclick="sub81()" value="-1"></td>
</li>
<li>
7剩余:<input type="text" id="txt7" value="16"/>
<input type="button" onclick="add71()" value="+1">
<input type="button" onclick="sub74()" value="-4">
<input type="button" onclick="sub73()" value="-3">
<input type="button" onclick="sub72()" value="-2">
<input type="button" onclick="sub71()" value="-1"></td>
</li>
<li>
6剩余:<input type="text" id="txt6" value="16"/>
<input type="button" onclick="add61()" value="+1">
<input type="button" onclick="sub64()" value="-4">
<input type="button" onclick="sub63()" value="-3">
<input type="button" onclick="sub62()" value="-2">
<input type="button" onclick="sub61()" value="-1"></td>
</li>
</ul>
<script src="js/script.js"></script>
最后把JavaScript代码外链进去即可!
附件最后还是变成了云盘。