码迷,mamicode.com
首页 > Web开发 > 详细

innerhtml的使用

时间:2018-04-16 22:46:18      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:判断   meta   else   back   20px   padding   nbu   sub   box   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                background-color: lightcyan;
                width: 1000px;
                box-shadow: 5px 5px 1px lightgray;
                margin: auto;
                padding-bottom: 20px;            
                }
            .one{
                border: 1px solid gainsboro;
                width: 700px;
                padding: 5px;
                
            }
            .two{
                border: 1px solid gainsboro;
                width: 700px;
                padding: 5px;
                
            }
                
        </style>
    </head>
    <body>
        <div id="">
            innerhtml的使用
            <div class="one">
                <input type="text" name="" id="tj" value="这里输入文本" />
                <input type="submit" name="" id="" value="提交" / onclick="aa()">
            </div>
            <br />
            
            <div class="two">
                
            </div>
        </div>
        <br />
        <br />
        <br />
        <div id="">
            innerhtml的使用、字符串、判断的基本使用
            <div class="one">
                <input type="text" name="" id="tj1" value="这里输入文本" /> + 
                <input type="text" name="" id="tj2" value="这里输入文本" />
                <input type="submit" name="" id="" value="提交" / onclick="bb()">
            </div>
            <br />
            
            <div class="two">
                
            </div>
        </div>
        <br />
        <br />
        <br />
        <div id="">
            innerhtml的使用、字符串、判断的基本使用
            <div class="one">
                <button onclick="cc(0)">提交一</button>
                <button onclick="cc(1)">提交二</button>
                <button onclick="cc(2)">提交三</button>
                <button onclick="cc(3)">提交四</button>
                <button name="quanbu" onclick="cc()">全部弹出提取</button>

            </div>
            <br />
            
            <div class="two">
                
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    function aa(){
        var tjxs = document.getElementsByClassName("two")[0];
        var tj = document.getElementById("tj");
        tjxs.innerHTML = "提交后在这里显示:"+tj.value;
    }
    function bb(){
        var tjxs = document.getElementsByClassName("two")[1];
        var tj = document.getElementById("tj");
        tjxs.innerHTML = "提交后在这里显示:"+tj1.value+tj2.value;
    }
    
    var attr = ["这是第一句","这是第二句","这是第三局","这是第四句"]
    function cc(a){
        var tjxs = document.getElementsByClassName("two")[2];
        if(a==0){
            tjxs.innerHTML = "提取后在这里显示:"+ attr[a];
        }
        else if(a==1){
            tjxs.innerHTML = "提取后在这里显示:"+ attr[a];
        }
        else if(a==2){
            tjxs.innerHTML = "提交后在这里显示:"+ attr[a];
        }
        else if(a==3){
            tjxs.innerHTML = "提交后在这里显示:"+ attr[a];
        }
        else{
            for(i=0;i<=3;i++){
            alert(attr[i]);
            }
        }

    
    
    
    }
</script>

 

innerhtml的使用

标签:判断   meta   else   back   20px   padding   nbu   sub   box   

原文地址:https://www.cnblogs.com/yelena-niu/p/8858963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!