今天实现了用JS模拟手机短信发送的效果,其HTML代码如下:
<div class="out">
<div class="main-content">
<div class="head"></div>
<div class="content">
<div class="main">
<div class="main-r-l" id="mainRL">
</div>
<div class="main-input">
<div class="avatar" id="avatar"></div>
<div class="input-content">
<input type="text" name="conversation" id="conversation">
</div>
<div class="btn">
<button id="btnSend">发送</button>
</div>
</div>
</div>
</div>
<div class="foot">
<div class="circle-foot"></div>
</div>
</div>
</div>
其CSS代码如下:
* {
padding: 0;
margin: 0;
}
.out {
position: relative;
width: 280px;
height: 585px;
border: 1px solid #D6C6A5;
border-radius: 50px;
box-sizing: border-box;
margin: 50px auto;
}
.main-content {
display: flex;
flex-direction: column;
}
.head {
height: 78px;
width: 280px;
background: #E4EEF9;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.content {
width: 280px;
height: 424px;
display: flex;
justify-content: center;
}
.content .main {
height: 424px;
width: 242px;
box-sizing: border-box;
border: 3px solid #000000;
position: relative;
}
.main-r-l {
position: relative;
box-sizing: border-box;
height: 360px;
overflow-y: auto;
}
.main-input {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
padding-top: 10px;
padding-bottom: 10px;
background: #F7F7F7;
box-sizing: border-box;
width: 100%;
}
.main-input .avatar {
width: 32px;
height: 32px;
border: 1px solid #DED6E7;
margin-left: 6px;
margin-right: 6px;
background-color: #ffffff;
background-image: url('./a.png');
background-repeat: no-repeat;
background-position: center center;
}
.main-input input {
height: 36px;
width: 142px;
border: 1px solid #DED6E7;
border-radius: 5px;
font-size: 14px;
padding-left: 2px;
outline: none;
margin-right: 6px;
}
.main-conversation-r, .main-conversation-l{
display: flex;
padding-top: 4px;
padding-left: 4px;
}
.main-conversation-r .conversation-text {
background-color: #21C618;
color: #ffffff;
width: 96%;
box-sizing: border-box;
padding-top: 4px;
padding-left: 2px;
padding-bottom: 4px;
}
.main-conversation-l .conversation-text {
background-color: #DED6E7;
color: #ffffff;
width: 96%;
box-sizing: border-box;
padding-top: 4px;
padding-left: 2px;
padding-bottom: 4px;
margin-right: 2px;
}
.main-conversation-r .conversation-avatar {
width: 32px;
height: 32px;
background-image: url('./a.png');
background-repeat: no-repeat;
background-position: center center;
}
.main-conversation-l .conversation-avatar {
width: 32px;
height: 32px;
background-image: url('./b.png');
background-repeat: no-repeat;
background-position: center center;
}
.btn button {
border: none;
background: #F7F7F7;
font-size: 16px;
color: #8C8494;
outline: none;
cursor: pointer;
}
.foot {
height: 82px;
width: 280px;
background: #E4EEF9;;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.circle-foot {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #CEB594;
}
其中主要用到了Flex布局和绝对定位的技巧。
效果图如下:
其中除了头像以外的元素都是由CSS3画出来的,有没有一种很酷的感觉?
本项目的JS代码如下:
var oAvatar = document.getElementById('avatar');
var obtnSend = document.getElementById('btnSend');
var oConversation = document.getElementById('conversation');
oAvatar.addEventListener('click', changeAvatar, false);
oAvatar.style.backgroundImage = 'url("./a.png")';
var i = 0;
/**
* 改变头像
*/
function changeAvatar() {
i = i + 1;
if (i % 2 === 0) {
oAvatar.style.backgroundImage = 'url("./a.png")';
} else {
oAvatar.style.backgroundImage = 'url("./b.png")';
}
}
obtnSend.addEventListener('click', getConversation, false);
function getConversation() {
var divEleR = document.createElement('div');
divEleR.className = 'main-conversation-r';
var divEleRTxt = document.createElement('div');
divEleRTxt.className = 'conversation-text';
var eleRText = document.createTextNode(oConversation.value);
divEleRTxt.appendChild(eleRText);
divEleR.appendChild(divEleRTxt);
var divEleRAvatar = document.createElement('div');
divEleRAvatar.className = 'conversation-avatar';
divEleR.appendChild(divEleRAvatar);
var oMainRL = document.getElementById('mainRL');
if (oAvatar.style.backgroundImage === 'url("./a.png")' && oConversation.value) {
oMainRL.insertBefore(divEleR, oMainRL.getElementsByTagName('div')[0]); // 插入成为第一个子节点
}
var divEleL = document.createElement('div');
divEleL.className = 'main-conversation-l';
var divEleLAvatar = document.createElement('div');
divEleLAvatar.className = 'conversation-avatar';
divEleL.appendChild(divEleLAvatar);
var divEleLTxt = document.createElement('div');
divEleLTxt.className = 'conversation-text';
var eleLText = document.createTextNode(oConversation.value);
divEleLTxt.appendChild(eleLText);
divEleL.appendChild(divEleLTxt);
if (oAvatar.style.backgroundImage === 'url("./b.png")' && oConversation.value) {
oMainRL.insertBefore(divEleL, oMainRL.getElementsByTagName('div')[0]); // 插入成为第一个子节点
}
}
其中用到的知识点主要是JS的DOM操作。