您的位置：首页 > Web前端 > JavaScript

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

2014-10-30 11:30 363 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航