码迷,mamicode.com
首页 > 其他好文 > 详细

简单对话

时间:2017-07-11 09:40:28      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:tle   margin   val   ext   div   doc   asc   oct   cti   

<!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="提交发送" id="btn1" />
    </div>
</body>
</html>

简单对话

标签:tle   margin   val   ext   div   doc   asc   oct   cti   

原文地址:http://www.cnblogs.com/saoniansaonian/p/7148788.html

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