JavaScript-12（传参练习-2）

该练习前两题主要负责读取text输入框的value值，并将value的值传给设定的div的innerHTML，

最后一题是先创造一个数组存储数据，然后通过传值来判断要读取哪个序列的数组，最后一个连续弹出运用for循环实现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0 auto;
                padding: 0;
            }
            .bigk{
                width : 900px;
                height: 300px;
                border: 1px solid darkgray;
                box-shadow: 0px 5px darkgray;
                margin-top: 30px;    
            }
            .smallk{
                width: 600px;
                height: 100px;
                border: 1px solid darkgray;
                box-shadow: 0px 5px darkgray;
                margin-top: 30px;    
                text-align: center;
                line-height: 100px;
            }
            #onexs{
                width: 700px;
                height: 100px;
            }
            #twoxs{
                width: 1000px;
                height: 100px;
            }
            #threexs{
                width: 1000px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="bigk">
            <div id="biaoti1">1 innerHTML的基本使用</div>
        <div class="smallk">
            <input type="text" name="" id="" value="" placeholder="在这里输入文字"/>
            <input type="button" name="" id="" value="提交" onclick="one()"/>
        </div>
        <div class="smallk" style="text-align: left;">
            <div id="onexs">提交后在这里显示:</div>
        </div>
        
        </div>
        
        <div class="bigk">
            <div id="biaoti2">2 innerHTML、字符串、判断的基本使用</div>
        <div class="smallk">
            <input type="text" name="" id="" value="" placeholder="在这里输入文字"/>+
            <input type="text" name="" id="" value="" placeholder="在这里输入文字"/>
            <input type="button" name="" id="" value="提交" onclick="two()"/>
        </div>
        <div class="smallk" style="text-align: left;">
            <div id="twoxs">提交后在这里显示:</div>
        </div>
        
        </div>
        
        <div class="bigk">
            <div id="biaoti3">3 数组输出练习</div>
        <div class="smallk">
            <input type="button" name="" id="" value="提取1" onclick="three(0)"/>
            <input type="button" name="" id="" value="提取2" onclick="three(1)"/>
            <input type="button" name="" id="" value="提取3" onclick="three(2)"/>
            <input type="button" name="" id="" value="全部弹出提取"onclick="three(4)"/>
        </div>
        <div class="smallk" style="text-align: left;">
            <div id="threexs">提交后在这里显示:</div>
        </div>
        
        </div>
    </body>
</html>


<script type="text/javascript">
    window.onload=function(){
        
    }
    var sz=["这是第一句","这是第二句","这是第三句","这是第四句"]
    function one(){
    document.getElementById("onexs").innerHTML = "提交后在这里显示:"+document.getElementsByTagName("input")[0].value;
    }
    
    function two(){
        document.getElementById("twoxs").innerHTML = "提交后在这里显示:"+document.getElementsByTagName("input")[2].value
        +document.getElementsByTagName("input")[3].value;
    }
    function three(i){
        if(i<4){
        document.getElementById("threexs").innerHTML = "提交后在这里显示:"+sz[i];
        }
        else{
            for(var k=0;k<4;k++){
            alert(sz[k])
            }
        }
    }
    
</script>

 

 

posted @ 2018-04-15 14:19  张锐0328  阅读(110)  评论(0)    收藏  举报