javascript简易版模拟对话发送消息

客官°小女子只卖身不卖艺 2022-05-26 04:17 144阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>简单版聊天窗口</title>
    		<script>
    			οnlοad= function () {  
            var oPic = document.getElementById("pic");  
            var oBtn = document.getElementById("btn");  
            var oText = document.getElementById("text");  
            var oCon = document.getElementById("cont");  
            
            var onoff=true;//为了判断当前图片
                    oPic.οnclick= function () {  //为opic值定义onclick事件
                if(onoff){  
                    oPic.src="../img/lzp4.png";  
                }else{  
                    oPic.src="../img/lzp3.png";  
                }  
                onoff = !onoff; //取反 
            };  
      
            oBtn.οnclick= function(){  
                if(onoff){  
                    oCon.innerHTML+='<li class="fl"> <p class="" style="text-align: left"><img width="30px" class="" src="../img/lzp3.png">'+oText.value+'</p> </li>';
                }else{  
                    oCon.innerHTML+='<li class="fr"> <p class="" style="text-align: right">'+oText.value+'<img width="30px" class="" src="../img/lzp4.png"></p> </li>';  
                }  
                    oText.value='';  
            };  
        };  
        
        
    		</script>
    		<style>
    		
    		li{
    			list-style: none;
    		}
    		.box{
    			margin: auto;
    			width: 400px;
    		}
    		#cont{
    			border: 1px black solid;			
    			width: 341px;
    			height: 400px;
    			background-color:lightgreen;
    			overflow-y: auto;
    			padding-left: 0px;
    			margin-right: 0px;
    	
    		}
    		.more{
    			border: solid black 2px;
    			width: 339px;
    			height: 52px;
    			margin-top: -19px;
    		}
    		#btn{
    			margin-right: -241px;
    			margin-top: 12px;
    			float: right;
    			height: 25px;
    			cursor: pointer;
    		}
    		#text{
    			float: right;
    			margin-right: 100px;
    			margin-top: 12px;
    			height: 20px;
    			
    		}
    		#pic{
    			margin-top: 10px;
    			margin-left: 20px;
    			height: 30px;
    			width: 30px;
    			cursor: pointer;
    		}
    		</style>
    	</head>
    	<body id="zhuti">
    		<div class="box">  
        <div class="box-cont">  
            <ul id="cont">  
                 
            </ul>  
            <form class="more">  
                    <img src="../img/lzp3.png" id="pic">  
                <input type="text" id="text"/>  
                <input type="button" id="btn" value="发  送"/>  
            </form>  
        </div>  
    </div> 
    	</body>
    </html>