JS基础—模拟手机短信发送
来源:互联网 发布:最新mac os x镜像下载 编辑:程序博客网 时间:2024/06/10 05:42
<!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>
#max{margin:0 auto; width:350px; height:500px; border:5px solid #000;}
#content{width:350px; height:435px; border-bottom:2px solid #999; overflow:auto; overflow-x:hidden; position:relative;}
#enter{width:350px; height:63px; position:relative; text-align:center;}
#back{width:38px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; position:absolute; top:12px; left:10px;}
#Text{width:222px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; background:#FFF; position:absolute; top:12px; left:58px; font-size:18px;}
#btn2{width:50px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; background:#FFF; top:12px; position:absolute; right:10px;}
.left{padding-left:30px;}
.right{padding-right:30px;}
.left img{left:0px; }
.right img{right:0px;}
.left span{background:#6C6; float:left; padding:5px;}
.right span{background:#CCC; float:right; padding:5px;}
p{ position:relative; overflow:auto; overflow-x:hidden; margin:0px 0px 5px 0px; word-break:break-all; font-size:18px; }
p img{position:absolute; top:0px; }
</style>
<script>
window.onload = function(){
var oImg = document.getElementById("img1");
var oBtn2 = document.getElementById("btn2");
var oText = document.getElementById("Text");
var oDiv = document.getElementById("content");
var oLink = document.getElementById("back");
var num = 0;
var onoff = true;
var arrUrl = ['../img/img5.jpg','../img/img6.jpg'];
oImg.src = arrUrl[num];
function ftn() {
oImg.src = arrUrl[num];
}
ftn();
//头像切换
oLink.onclick = function(){
ftn();
num++;
if (onoff){
num = 0;
onoff = false;
}
else{
num = arrUrl.length - 1;
onoff = true;
}
}
//短信内容区域
oBtn2.onclick = function(){
var oWord = 'left';
if( onoff){
oWord = 'left';
}
else{
oWord = 'right';
}
oDiv.innerHTML = '<br>' + '<p class="'+ oWord +'">' + oLink.innerHTML + '<span>' + '说:'+ oText.value +'</span>' + '</p>' +oDiv.innerHTML ;
oText.value = '';
}
}
</script>
</head>
<body>
<div id= "max">
<div id="content">
</div>
<div id="enter">
<a id="back" href="#"><img id="img1"/></a>
<input id="Text" type="text" />
<input id="btn2" type="button" value="发送" />
</div>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#max{margin:0 auto; width:350px; height:500px; border:5px solid #000;}
#content{width:350px; height:435px; border-bottom:2px solid #999; overflow:auto; overflow-x:hidden; position:relative;}
#enter{width:350px; height:63px; position:relative; text-align:center;}
#back{width:38px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; position:absolute; top:12px; left:10px;}
#Text{width:222px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; background:#FFF; position:absolute; top:12px; left:58px; font-size:18px;}
#btn2{width:50px; height:38px; padding:0px; border:1px solid #999; border-radius:5px; background:#FFF; top:12px; position:absolute; right:10px;}
.left{padding-left:30px;}
.right{padding-right:30px;}
.left img{left:0px; }
.right img{right:0px;}
.left span{background:#6C6; float:left; padding:5px;}
.right span{background:#CCC; float:right; padding:5px;}
p{ position:relative; overflow:auto; overflow-x:hidden; margin:0px 0px 5px 0px; word-break:break-all; font-size:18px; }
p img{position:absolute; top:0px; }
</style>
<script>
window.onload = function(){
var oImg = document.getElementById("img1");
var oBtn2 = document.getElementById("btn2");
var oText = document.getElementById("Text");
var oDiv = document.getElementById("content");
var oLink = document.getElementById("back");
var num = 0;
var onoff = true;
var arrUrl = ['../img/img5.jpg','../img/img6.jpg'];
oImg.src = arrUrl[num];
function ftn() {
oImg.src = arrUrl[num];
}
ftn();
//头像切换
oLink.onclick = function(){
ftn();
num++;
if (onoff){
num = 0;
onoff = false;
}
else{
num = arrUrl.length - 1;
onoff = true;
}
}
//短信内容区域
oBtn2.onclick = function(){
var oWord = 'left';
if( onoff){
oWord = 'left';
}
else{
oWord = 'right';
}
oDiv.innerHTML = '<br>' + '<p class="'+ oWord +'">' + oLink.innerHTML + '<span>' + '说:'+ oText.value +'</span>' + '</p>' +oDiv.innerHTML ;
oText.value = '';
}
}
</script>
</head>
<body>
<div id= "max">
<div id="content">
</div>
<div id="enter">
<a id="back" href="#"><img id="img1"/></a>
<input id="Text" type="text" />
<input id="btn2" type="button" value="发送" />
</div>
</div>
</body>
</html>
阅读全文
0 0
- JS基础—模拟手机短信发送
- js模拟手机短信发送
- day03-模拟手机短信发送
- 模拟手机短信发送
- js模拟手机短信对话
- 第1课--1.1模拟手机短信发送
- JS基础——模拟短信发送对话
- 手机短信发送
- js模拟短信发送
- 通过PC发送手机短信
- 使用J2ME发送手机短信
- C#发送手机短信
- 通过at发送手机短信
- 超级终端发送手机短信
- php 发送手机短信
- 简单手机短信发送软件
- 手机短信发送简单讲义
- JAVA发送手机短信
- spring 定时器配置
- IOS11更新教程大分享(附带降级教程)
- (二) Spring项目的搭建
- spring配置文件详解
- 数字图像处理成长之路14:QT调用摄像头
- JS基础—模拟手机短信发送
- 3.数据集合(Swift)
- 解决TextView中MaxLines与ellipsize=end冲突问题
- SQL(二)
- 移动广告变现,这几点可能比推荐算法更重要
- 大型广告系统架构概述
- 从0到1(上)
- http请求参数编码问题
- PHP学习笔记——数组中统计数组元素的个数与唯一性函数