前端开发JS模仿手机短信发送

前端开发工程师学历 引擎游戏前端开发工程师 前端开发工程师有证书吗

点击输入框左边的头像,可以切换。然后打字点发送。

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

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

代码片段 1

<!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>
        * {margin:0px; padding:0px;}
        p{margin-bottom:10px; height:32px; line-height:33px;}
        .iphone5 {
            width:411px; height:579px; background:url(http://m3.img.srcdd.com/farm4/d/2014/0821/15/54FE91F94A647A91FC8B9A84FEE86678_B1280_1280_411_579.png) no-repeat; margin:80px auto 0px;
        }
        .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;}
        .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”><img class=”left” src=’ + oImgg.src + ‘><span class=”left p”>’ + oText.value + ‘</span><div style=”clear: both;”></div></div>’ + oCon.innerHTML;
                    oText.value = ”;
                } else {
                    oCon.innerHTML = ‘<div class=”ri”><img class=”right” src=’ + oImgg.src + ‘><span class=”right p1″>’ + oText.value + ‘</span><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>

html5前端开发工程师 java后端开发和前端开发工程师 前端开发工程师的开发平台

» 本文来自:前端开发者 » 《前端开发JS模仿手机短信发送》
» 本文链接地址:https://www.rokub.com/6024.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!