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

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

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

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

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

代码片段 1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<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>

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>

</div>

</body>

</html>

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

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

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发