您的位置：首页 > 其它

模拟手机短信发送

2017-09-08 00:00 423 查看

摘要: 模拟手机短信发送

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#message{
width:400px;
height: 400px;
border:#cccccc solid 1px;
background-color: #cccccc;
margin:0 auto;
}
.fl,.fr{
float:none;
}

.fl li{
margin-left: 5px;
float: left;
list-style: none;
}
.fr li{
margin-right: 5px;
float: right;
list-style: none;
}
.fl p{line-height: 28px;
max-width: 280px;
background-color: red;
margin-left: 40px;
}
.fr p{line-height: 28px;
max-width: 280px;
background-color: red;
float: right;
}
.fr ,.fl{margin-bottom: 5px;}
.set{
width: 400px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="message">
<ul class="fl">
<li><img src="img1/1.jpg" alt="#"></li>
<p>发送信息发送信息发送信息发送信息发送信息发送信息</p>
</ul>
<ul class="fr">
<li><img src="img1/2.jpg" alt="#"></li>
<p>发送信息发送信息发送信息发送信息发送信息发送信息</p>
</ul>
</div>
<div class="set">
<span><img src="img1/1.jpg" alt="#" id="img"></span>
<input type="text" id="text" name="text">
<input type="button" id="button" value="发送">
</div>
</body>
<script>
var oImg=document.getElementById("img");
var text=document.getElementById("text");
var button=document.getElementById("button");
var message=document.getElementById("message");
var fl=document.getElementsByClassName("fl");
var fr=document.getElementsByClassName("fr");

var onclickImg=true;
oImg.onclick=function () {
if(onclickImg){
oImg.src="img1/1.jpg";
}else{
oImg.src="img1/2.jpg";
}

onclickImg=! onclickImg;
}
button.onclick=function () {
if (onclickImg){
message.innerHTML='<ul class="fl"><li><img src="img1/1.jpg" alt="#"></li>' +
' <p>'+text.value+'</p> </ul><br>'+message.innerHTML;
}else{
message.innerHTML='<ul class="fr"><li><img src="img1/2.jpg" alt="#"></li>' +
' <p>'+text.value+'</p> </ul><br>'+message.innerHTML;
}
onclickImg=! onclickImg;
text.value='';
}
</script>
</html>

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

标签： 模拟手机短信发送

相关文章推荐

新的分享

章节导航