您的位置：首页 > Web前端 > JavaScript
模拟手机短信发送

2017-05-16 15:54 393 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟手机发送短信</title>
<style type="text/css">
*{padding:0;margin: 0;list-style: none;box-sizing: border-box;}
.box{width: 260px;height: 430px;border: 4px solid #000;}
.dialog{
border-bottom: 1px solid #000;
width: 252px;
height: 380px;
margin-bottom: 5px;
padding: 5px;
/*border: 1px solid red;*/
}
.dialog>div{
margin-bottom: 5px;
}
.left{
background: url(img/1.png) -2px -3px no-repeat;
}
.left span{
margin-left: 30px;
background: green;
display: inline-block;
padding: 2px;
color: #fff;
font-size: 14px;
font-family: "微软雅黑";
}
.right{
background: url(img/2.png) right -5px no-repeat;
position: relative;
overflow: hidden;
/*border: 1px solid red;*/
}
.right span{
background: #ccc;
display: inline-block;
padding: 2px;
color: #fff;
font-size: 14px;
font-family: "微软雅黑";
float: right;
margin-right: 32px;
}
.footer{
height: 34px;
/*border: 1px solid red;*/
position: relative;
}
.span1{
display: inline-block;
height: 30px;
width: 30px;
background: url(img/1.png);
margin-right: 5px;
}
#txt1{height: 30px;position:absolute;top: 3px; }
#btn1{height: 30px;position:absolute;top: 0px;right: 4px;border: none;
background: #fff; outline: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDialog=document.getElementById('dialog');
var oSpan1=document.getElementById('span1');
var oTxt1=document.getElementById('txt1');
var oBtn1=document.getElementById('btn1');
//改变笑脸（做的时候缺什么，就随时定义一个变量或自定义属性去做）
var onOff=true;
oSpan1.onclick=function bg(){
if(onOff){
this.style.background='url(img/2.png)';
onOff=false;
return false;
}else{
this.style.background='url(img/1.png)';
onOff=true;
return true;
}
}
// 点击发送时把内容，表情都发送过去
oBtn1.onclick=function(){
if(oTxt1.value==''){
alert('请输入内容！');
}else if(onOff){
oDialog.innerHTML+='<div class="left"><span>'+oTxt1.value+'</span></div>';
oTxt1.value='';
}else{
oDialog.innerHTML+='<div class="right"><span>'+oTxt1.value+'</span></div>';
oTxt1.value='';
}

}
}
</script>
</head>
<body>
<div class="box">
<div class="dialog" id="dialog">
<!-- 做之前一定先用html把所有结果写出来，再用js去实现 -->
<!-- <div class="left"><span>你好，请问你是lily么你好</span>
</div>
<div class="right"><span>是的，请问找我有事情么</span>
</div>
<div class="left"><span>我想你啦</span>
</div> -->
</div>
<div class="footer">
<span class="span1" id="span1"></span>
<input id="txt1" type="text" name="">
<input id="btn1" type="button" name="" value="发送">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： js案例
相关文章推荐
新的分享
章节导航