2016-04-20
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> fieldset{ margin: 10px; width: 600px; padding: 5px; } table{ float: left; margin: 10px; } </style> </head> <body> <fieldset id=""> <legend>计算器</legend> <input type="text" id="no1" /> <select id="op"> <option value="0">+</option> <option value="1">-</option> <option value="2">×</option> <option value="3">÷</option> </select> <br /> <input type="text" id="no2" /><input type="button" value="=" onclick="ol();" /> <!--<output onforminput="value=no1.value+no2.value"></output>--> <span id="span1"></span> </fieldset> <!-- --> <fieldset id=""> <legend>可以编辑的表格</legend> <table id="tb" border="1" cellspacing="0" cellpadding="2" width="80%"> <thead> <tr><th>第一列标题</th><th>第二列标题</th></tr> </thead> <tbody> <tr> <td><div contenteditable="true">AAA</div></td><td><div contenteditable="true">BBB</div></td> </tr> </tbody> </table> <input type="button" value="+" onclick="addRow();" /> </fieldset> <!-- oninput用户输入时触发 --> <fieldset id=""> <legend>textarea自动增高</legend> <textarea style="float: left;width: 200px;" onpropertychange="this.style.height=this.scrollHeight+'px'" oninput="this.style.height=this.clientHeight+'px'"></textarea> <img src="../img/height.gif" width="300px" height="300px" /> </fieldset> <fieldset id=""> <legend>判断选择了多少个复选框</legend> <form method="post" name="playlist"> 1<input type="checkbox" name="ckbox" /> 2<input type="checkbox" name="ckbox" /> 3<input type="checkbox" name="ckbox" /> 4<input type="checkbox" name="ckbox" /> 5<input type="checkbox" name="ckbox" /> <input type="button" onclick="numCheck(this.form);" value="检测" /><span id="sp1"></span> </form> </fieldset> <!-- 作者:2582226114@qq.com 时间:2015-11-03 描述:javascript --> <script type="text/javascript"> function ol(){ var sum=0; var op=document.getElementById("op").value; var no1=parseInt(document.getElementById("no1").value); var no2=parseInt(document.getElementById("no2").value); if(op==0){ sum=no1+no2; } if(op==1){ sum=no1-no2; } if(op==2){ sum=no1*no2; } if(op==3){ sum=no1/no2; } document.getElementById("span1").innerText=sum; } function addRow(){ var tb=document.getElementById("tb"); var tBodies=tb.tBodies; var tbody=tBodies[0]; var addtr=tbody.insertRow(tbody.rows.length); var addtd_1=addtr.insertCell(0); addtd_1.innerHTML="<div contenteditable='true'>第一列</div>"; var addtd_2=addtr.insertCell(1); addtd_2.innerHTML="<div contenteditable='true'>第二列</div>"; } function numCheck(form){ var nums=0; var items=form.ckbox; for (var i=0;i<items.length;i++) { if( eval("document.playlist.ckbox[" + i + "].checked") == true ){ nums++; } } // console.info("选择中了"+nums+"个"); document.getElementById("sp1").innerHTML="选择中了"+nums+"个"; } </script> </body> </html>