js原生学习-初级-练习06

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #JS原生开发学习 #csdn #前端

javascript原生学习专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的手机短信模拟发送应用。通过简单的HTML布局配合JavaScript代码，实现了基本的用户交互，如切换发送者头像、输入并发送消息等。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js原生学习-初级-练习06




	
  
	
  
	
  
	 rel="stylesheet" type="text/css" href="css/messageSend.css">
	模拟手机短信发送


	模拟手机短信发送
	
  
		
   
			
    
		
   
		
   
			
    
			
    
			
    发送
		
   	
	
  
	

*{margin: 0;padding: 0;}
h3{text-align: center;margin-top: 30px}
#wrap{width: 320px;height: 500px;margin: 20px auto;border: 2px solid #333;border-radius: 10px;overflow: hidden;box-shadow: 0 0 20px rgba(0,0,0,0.8);}
#box{width: 300px;height: 430px;padding: 10px;overflow-y: scroll;}
#bottom{width: 100%;height: 50px;border-top: 1px solid #ccc;}
#img1{display: block;width: 30px;height: 30px;overflow: hidden;margin: 10px;float: left;border: 1px solid #ccc;}
#text1{width: 200px;height: 30px;line-height: 30px;display: block;margin: 10px 10px 0 0;float: left;text-indent: 5px;}
#btn1{display: block;width: 50px;height: 30px;line-height: 30px;margin-top: 10px;float: left;background: #ccc;text-align: center;color: #fff;text-decoration: none;font-size: 14px;}

#fl{float: left;clear: both;margin-top: 10px;}
#fr{float: right;clear: both;margin-top: 10px;}

#img2, #img3{display: block;width: 30px;height: 30px;overflow: hidden;border: 1px solid #ccc;}
#img2{float: left;margin-right: 10px;}
#span1,#span2{line-height: 20px;display: block;background: #ccc;border-radius: 5px;padding: 5px;max-width: 180px;}
#span1{float: left;}
#img3{float: right;margin-left: 10px;}
#span2{float: right;}
window.onload = function(){
	// 获取元素
	var oBox = document.getElementById('box');
	var oFl = document.getElementById('fl');
	var oFr = document.getElementById('fr');

	var oImg = document.getElementById('img1');
	var oText = document.getElementById('text1');
	var oBtn = document.getElementById('btn1');
	// 初始化
	var arrSrc = ['img/5.jpg','img/6.jpg'];
	var num = 0;
	var onOff = true;
	// 切换头像
	oImg.onclick = function(){
		num++;
		if (num == arrSrc.length) {
			num = 0;
		}
		oImg.src = arrSrc[num];
		if (num == 0) {
			onOff = true;
		}else{
			onOff = false;
		}

	};
	// 点击发送消息
	oBtn.onclick = function(){
		if (oText.value == '') {
			alert('发送消息不能为空！');
		}else{
			if (onOff) {
				oBox.innerHTML = '
  
   ' + '
   ' + '
   ' + oText.value + '' + '
  ' + oBox.innerHTML;
				oText.value =''
			}else{
				oBox.innerHTML = '
  
   ' + '
   ' + '
   ' + oText.value + '' + '
  ' + oBox.innerHTML;
				oText.value = '';
			}
		}
	};


}