<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{

        margin: 0px;

        padding: 0px;

}

#wrap{

        border: 1px solid #ccc;

        background: white;

        width:300px;

        height:480px;

        margin:0 auto;

        position: relative;

        margin-top: 10px;

}

#text{

        width: 270px;

        height: 400px;

        border: 1px solid #ccc;

        position: absolute;

        left: 15px;

        top:20px;

}

#face{

        width: 24px;

        height: 24px;

        border: 1px solid #ccc;

        display: inline-block;

        background: url(images/icon4.png);

        left:15px;

        top:435px;

        position: absolute;

}

#writen{

        height: 24px;

        position: absolute;

        top:435px;

        left: 50px;

        width:180px;

        border-radius: 5px;

}

#button{

        position: absolute;

        right: 15px;

        height: 25px;

        width: 40px;

        top:435px;

}

.right{

        position:absolute;

        right:33px;

        background:pink;

        padding:2px;

}

.left{

        position:absolute;

        left:33px;

        background:#ccc;

        padding:2px;

}

</style>

<script>

        window.onload = function (){

                var oText = document.getElementById("text");

                var oFace = document.getElementById("face");

                var aInput = document.getElementsByTagName("input");

                var onff = true;

                aInput[1].onclick = function (){

                        if(!aInput[0].value){

                                alert("Please Input");

                        }

                        else if( onff){

                                oText.innerHTML = '<p style="height:25px;line-height:25px;background:#ccc;float:right;margin-right:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon4.png"style="position:absolute;right:5px;">'+ aInput[0].value +'</p>' + oText.innerHTML;

                                aInput[0].value = "";

                        }

                        else {

                                oText.innerHTML = '<p style="height:25px;line-height:25px;background:pink;float:left;margin-left:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon3.png"style="position:absolute;left:5px;">'+ aInput[0].value +'</p>' + oText.innerHTML;

                                aInput[0].value = "";

                        }

                }

                oFace.onclick = function(){

                        if(onff){

                                oFace.style.background ="url(images/icon3.png)";

                                onff = !onff;

                        }

                        else

                        {

                                oFace.style.background ="url(images/icon4.png)";

                                onff = !onff;

                        }

                }

        }

</script>

</head>

<body>

                <div id = "wrap">

                        <div id = "text">

                        </div>

                        <div id = "face"></div>

                        <input type = "text" id = "writen">

                        <input type = "button" id = "button" value = "发送">

                </div>

</body>

</html>

js 模拟发短信的更多相关文章

  1. js实现发送短信验证码后的倒计时功能(无视页面刷新)

    [1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value=& ...

  2. html页面通过特殊链接：打电话，发短信，发邮件详细教程

    采用url href链接的方式,实现在Safari  ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1. 拨打电话 在电话号码 ...

  3. 移动设备wap手机网页html5通过特殊链接：打电话，发短信，发邮件详细教程

    如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url href链接的方式,实现在Safa ...

  4. html5开发手机打电话发短信功能

    原文:http://www.open-open.com/code/view/1449843459332 在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用h ...

  5. html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释

    在非常多的手机站点上,有打电话和发短信的功能,对于这些功能是怎样实现的呢.事实上不难,今天我们就用html5来实现他们. 简单的让你大开眼界.HTML5 非常easy写,但创建网页时,您常常须要反复做 ...

  6. iOS开发之调用系统打电话发短信接口以及程序内发短信

    在本篇博客开头呢,先说一下写本篇的博客的原因吧.目前在做一个小项目,要用到在本应用程序内发验证码给其他用户,怎么在应用内发送短信的具体细节想不大起来了,于是就百度了一下,发现也有关于这方面的博客,点进 ...

  7. 打电话,发短信,发邮件,app跳转

    1.打电话 - (IBAction)callPhone1:(id)sender { NSURL *url = [NSURL URLWithString:@"tel://18500441739 ...

  8. linux下利用GPRS模块发短信、打电话

    一.开发环境     内核版本:linux-3.0    开发板:FL2440(nandflash:K9F1G08 128M)    GPRS模块:SIM900   二.与发短信和拨号相关的 AT 指 ...

  9. iOS中如何切换到发短信、打电话、发邮件

    我们在做APP的时候,难免会遇到需要调用短信,电话等程序的时候.如美团. 当然,这些都只是一些简单的方法就可以实现,但是时间久了也会淡忘,所以想写这边博客.一是为了再捡起来复习一下,另一个相当于留个备 ...

随机推荐

  1. 纸上得来终觉浅，绝知此事要躬行——Spring boot任务调度

    前言:之前今日开讲项目的时候,用到了Quartz进行任务调度.后来做一个电商项目的时候,还用到了Quartz任务调度. 觉得挺简单的,a peace of cake.  忽略了总结,当时闭着眼睛都能捉 ...

  2. BZOJ 3462 DZY Loves Math II ——动态规划 组合数

    好题. 首先发现$p$是互质的数. 然后我们要求$\sum_{i=1}^{k} pi*xi=n$的方案数. 然后由于$p$不相同,可以而$S$比较小,都是$S$的质因数 可以考虑围绕$S$进行动态规划 ...

  3. 0-Android系统各层中LOG的使用

     Android系统各层中LOG的使用 , ANDROID_LOG_DEFAULT, /* only for SetMinPriority() */ ANDROID_LOG_VERBOSE, ANDR ...

  4. 对计算属性中get和set的理解

    原文参考:https://blog.csdn.net/xiaxiaoxian/article/details/79304004

  5. 【HDOJ5519】Kykneion asma（状压DP，容斥）

    题意:给定n和a[i](i=0..4),求所有n位5进制数中没有前导0且i出现的次数不超过a[i]的数的个数 2<=n<=15000,0<=a[i]<=3e4 思路:设f(n, ...

  6. 30+ Excellent Windows Phone 7 Development Tutorials

    原文发布时间为:2012-01-16 -- 来源于本人的百度文章 [由搬家工具导入] Here are 30+ cool Windows Phone Development articles for ...

  7. 线程池基础 ThreadPool基础

    原文发布时间为:2010-10-27 -- 来源于本人的百度文章 [由搬家工具导入] 池（Pool）是一个很常见的提高性能的方式。比如线程池连接池等，之所以有这些池是因为线程和数据库连接的创建和关闭是 ...

  8. 利用GridView控件导出其他文件（导出Excel，导出Word文件）

    原文发布时间为:2008-10-16 -- 来源于本人的百度文章 [由搬家工具导入] // 注意，在Visual Studio2005平台下，如果使用GridView导出文件，      //就必须重 ...

  9. 02深入理解C指针之---指针类型和值

    该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教. 1.指针的类型: 可以在声明指针时,指定指针的类型,例如: (1)void *x  声 ...

  10. wxformbuilder

    1.打开wxFormBuilder,按开始一个空项目.您也可以执行File|New来创建新项目2.从Object Properties(对象属性)面板配置项目的设置A.选择产生什么类型的代码. 现在你 ...