您的位置：首页 > 其它

day03-模拟手机短信发送

2017-01-11 11:53 316 查看

html代码：

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript" src="2.js"></script>

</head>

<body>
<div id="box1">
<div id="box2"></div>
<img id="img1" src="5.png">
<input id="text1" type="text" name="" placeholder="选头像、输文字、点发送">

<input id="btn" type="button" name="" value="发送">
</div>

</body>

</html>

CSS样式：

#box1{
background: url("7.png");
width: 278px;
height:586px;
margin:20px auto;
position: relative;

}

#box2{
position: absolute;
top: 80px;
left: 18px;
width: 222px;
height: 360px;
border:1px solid #000;
overflow: auto; /*当内容超出后添加滚动条*/
padding: 10px;

}

#img1{
position: absolute;
bottom: 88px;
left: 26px;
cursor: pointer;

}

#text1{
position: absolute;
bottom: 88px;
left:62px;
width: 143px;
height: 27px;
font-size: 12px;

}

#btn{
position: absolute;
right: 22px;
bottom: 88px;
height: 28px;

}

.class1{
background-color: rgb(238,238,238);
border: 1px solid #000;

}

.class2{
background-color: rgb(54,255,7);
border: 1px solid #000;

}

.class3{
float: right;

}

js代码：

window.onload=function (){
var oBox=document.getElementById("box2");
var oImg=document.getElementById("img1");
var oText=document.getElementById("text1");
var oBtn=document.getElementById("btn");
var onFF=true; //开关

oImg.onclick=function (){
if(onFF){
oImg.src="6.png";
onFF=false;
}else{
oImg.src="5.png";
onFF=true;
}
}
oBtn.onclick=function (){
if(oText.value!=""){
if(onFF){
oBox.innerHTML="<div class='class3'>"+'<span class="class1">'+oText.value+'</span>'+'<img src="5.png"/>'+"<div/>"+'<br/>'+oBox.innerHTML;
oText.value="";
}else{
oBox.innerHTML='<img src="6.png"/>'+'<span class="class2">'+oText.value+'</span>'+'<br/>'+oBox.innerHTML;
oText.value="";
}
}else{
alert("哥们，写点内容吧！！！");
}
}
// 需求：让上面的div有头像和对话内容，并且对话内容有相应的样式

}

个人感悟：

1、布局采用一整个div，使用背景图不能使用img(不然不好在上面输入字)，还有相对定位和绝对定位的知识

2、图片的切换利用了无条件则创造条件onFF来进行切换

3、在js中也可以为相应的元素添加样式表中的样式

4、对话窗口的内容胡乱写，相当于随便的拼凑达到效果了，真的好气，下次在回顾一下

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

标签：

相关文章推荐

新的分享

章节导航