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

最新推荐文章于 2023-03-22 12:14:44 发布

lzpwzy

最新推荐文章于 2023-03-22 12:14:44 发布

阅读量848

点赞数

分类专栏： JavaScript笔记

本文链接：https://blog.csdn.net/lzpzwy/article/details/80072715

版权

JavaScript笔记专栏收录该内容

5 篇文章 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>