属性操作-模拟短信发送1(替换短信内容)

来源:互联网 发布:仿手机淘宝 html5 编辑:程序博客网 时间:2024/05/16 16:09

在线演示

这里写图片描述

点击发送按钮,input输入框中的内容会发送到上面的方框中,并且输入框清空。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>属性操作-模拟短信发送</title>    <style>        #con {            width: 240px;            height: 200px;            background-color: #f1f1f1;            padding: 10px;            border: 1px solid #000;        }    </style>    <script>        window.onload =function(){            // alert('123');            var con = document.getElementById('con');            var txt = document.getElementById('txt');            var btn = document.getElementById("btn");            btn.onclick = function(){                //判断输入框的内容是否为空                if(txt.value == ''){//如果为空,弹出提示                    alert('请输入点内容吧~');//                }else{//否则发送内容                    con.innerHTML = txt.value;                    txt.value = '';//内容发送之后就清空value值                }            }        }    </script></head><body>    <div id="con"></div>    <span>短信:</span>    <input type="text" id="txt">    <input type="button" value="发送" id="btn"></body></html>
原创粉丝点击