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

作者：寸_铁 | 2024-07-01 15:53:07

踩

模拟短信对话


<!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来实现内容的发送

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/776934