JS基础——模拟短信发送对话

最新推荐文章于 2023-12-04 09:59:19 发布

波克比520

最新推荐文章于 2023-12-04 09:59:19 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/u011175410/article/details/40617047

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS基础——模拟短信发送对话</title>
<style>
#box{ width:320px; height:400px; border:10px solid #ccc; margin:0 auto;}
#div1{ width:320px; height:370px; background:#fafafa; overflow:auto;}
img{ width:24px; height:24px;}

p{ position:relative; margin:0 0 5px 0; word-break:break-all; word-wrap:break-word; overflow:hidden;}
p img{ position:absolute; top:0;}
.left{ padding-left:30px;}
.right{ padding-right:30px;}
.left img{ left:0;}
.right img{ right:0;}
.left span{ float:left; padding:5px; background:#FFC;}
.right span{ float:right; padding:5px; background:#FCF;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	var oText = document.getElementById('text1');
	var oBtn = document.getElementById('btn1');
	var onOff = true;
	
	//切换头像
	oImg.onclick = function(){
		if(onOff){
			oImg.src = 'images/2.jpg';
			onOff = false;	
		}else{
			oImg.src = 'images/1.jpg';
			onOff = true;	
		}
	};
	
	//send message
	oBtn.onclick = function(){
		var posClass = 'left';
		if(onOff){
			posClass = 'left';	
		}else{
			posClass = 'right';	
		}
		oDiv.innerHTML = '<p class="'+ posClass +'">' +
        	'<img src="' + oImg.src + '">' +
            '<span>' + oText.value + '</span>' +
        '</p>' + oDiv.innerHTML;
		oText.value = '';
	};
		
};
</script>
</head>

<body>
<div id="box">
	<div id="div1">
    	<!--<p class="left">
        	<img src="img/1.jpg">
            <span>文字1~~~</span>
        </p>
        
    	<p class="right">
        	<img src="img/2.jpg">
            <span>文字2~~~</span>
        </p>-->
    </div>
	<img src="images/1.jpg" alt="" id="img1">
	<input type="text" name="" id="text1">
	<input type="button" value="发送" id="btn1">
</div>
</body>
</html>

思路：

1.获取元素

2.通过自定义开关和if语句切换头像

3.通过自定义开关盒if语句判断双方发送消息的位置以及结合innerhTML来实现内容的发送