【javascript】02 JS基础上 (模仿手机短信发送)

原创 唯美美 随笔 JS大神之路 3443阅读 2014-08-21 14:48:49 举报

老师布置的作业02,是模仿手机短信发送作业。
点击输入框左边的头像,可以切换。然后打字点发送。

有个问题,目前还没解决,是CSS样式的问题。

图片的上传,我暂时上传到点点博客,图片不能透明,好遗憾。

代码片段 1

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

.screen {float:left; width:232px; height:395px; margin:100px 0px 0px 23px;}
.screen .content {float:left; width:212px; height:339px; overflow-x:hidden; padding:10px; do}
.left {float:left;}
.right {float: right;}
.p{background:red; color:#fff; padding:0px 8px; margin-left:6px; width: 130px; word-break: break-all; line-height:24px;}
.p1{background:#999; color:#FFF; padding:0px 8px; margin-right:6px;width: 130px; word-break: break-all; line-height:24px}
.le,.ri {margin: 6px 0px;}
.screen .typing {float:left; width:232px; height:36px; background:#CCC;}
.screen .typing .img {float:left; width:36px; height:32px; display:block; margin-top:2px;}
.screen .typing .text {float:left; width:121px; height:24px; line-height:24px; margin:6px;}
.screen .typing .ok {float:left; width:50px; height:28px; margin-top:5px; background:#6CF; border:0px; color:#FFF; font-weight:bold;}

</style>

<script>
window.onload = function(){
var oOk = document.getElementById('ok');
var oText = document.getElementById('text');
var oCon = document.getElementById('content');
var oIright = document.getElementById('lright');
var oShut = document.getElementById('shut');
var oScreen = document.getElementById('screen');

 var oImgg = document.getElementById('imgg');
 var onOff = true;

 oImgg.onclick = function(){
     if(onOff){
         oImgg.src = 'http://m3.img.srcdd.com/farm4/d/2014/0821/14/2EB552E33DB031D0F03BB9A0488BBE64_B1280_1280_36_32.jpeg';
         onOff = false;
     } else {
         oImgg.src = 'http://m2.img.srcdd.com/farm4/d/2014/0821/14/E5A3ABB33AA87907AE635166335D5A13_B500_900_36_32.jpeg';
         onOff = true;

         }
     }

 oOk.onclick = function(){
         if( oText.value ==''){
             alert('你是猴子请来的逗比吗?');
         }else if(onOff==true) {
             oCon.innerHTML = '<div class="le"><p><img class="left" src='+oImgg.src+'><span class="left p">'+oText.value+'</span></p><div style="clear: both;"></div></div>'+oCon.innerHTML;
             oText.value = '';
         }else{
             oCon.innerHTML ='<div class="ri"><p><img class="right" src='+oImgg.src+'><span class="right p1">'+oText.value+'</span></p><div style="clear: both;"></div></div>'+oCon.innerHTML;
             oText.value = '';
             }
                         }

}
</script>
</head>

<body>
<div class="iphone5">
<div class="screen">
<div id="content" class="content">
</div>
<div class="typing">
<img id="imgg" class="img" src="http://m2.img.srcdd.com/farm4/d/2014/0821/14/E5A3ABB33AA87907AE635166335D5A13_B500_900_36_32.jpeg">;
<input id="text" class="text" type="text" value="" />
<input id="ok" class="ok" type="button" value="发送" />
</div>
</div>
</div>
</body>
</html>
[/code]

评论 ( 5 )
最新评论
唯美美 4F 2014-09-03 09:11:24 5F

也可以,改一下js就好!

little_wdd 2014-09-01 11:30:36 4F

最近收到的消息为什么不从最下面显示呢?

today0826 2014-08-29 15:30:22 3F

  

liuqian8710 2014-08-28 18:04:15 2F

加油!

mproxy 2014-08-24 13:44:21 1F

不错的分享.

oCon.innerHTML ='<div class="ri"><p><img class="right" src='+oImgg.src+'><span class="right p1">'+oText.value+'</span></p><div style="clear: both;"></div></div>'+oCon.innerHTML;

但是这句直接把用户输入的信息不经过滤就输出了,会造成XSS的.
比如用户输入
<img src=# onerror="alert('xxoo')" />
就会执行alert('xxoo')