一些可以操作的页面

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>

 

posted @ 2016-04-20 10:48  时光之梦  阅读(146)  评论(0)  编辑  收藏  举报