首页 > 代码库 > 简单对话

简单对话

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{width: 500px;height: 500px;margin:50px auto 0px;}
        .box1{width: 400px;height: 400px;margin:20px auto;border:1px solid #666;}
        span{padding-left:49px;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oBox = document.getElementById("box1");
            var oSpan = document.getElementById("span1");
            var oText = document.getElementById("text1");
            var oBtn = document.getElementById("btn1");
            oSpan.onclick=function(){
                var a="二哈:";
                var b="二蛋:";
                if(oSpan.innerHTML==a){
                    oSpan.innerHTML=b;
                }else{
                    oSpan.innerHTML=a;
                }
            }
            oBtn.onclick=function(){
                oBox.innerHTML+=oSpan.innerHTML + oText.value + "<br/>";
                oText.value="";
            };
        };
    </script>

</head>
<body>
    <div class="box">
        <div class="box1" id="box1"></div>
        <span id="span1">二蛋:</span>
        <input type="text" id="text1" />
        <input type="button"  value="http://www.mamicode.com/提交发送" id="btn1" />
    </div>
</body>
</html>

简单对话