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

最新推荐文章于 2022-05-15 13:49:01 发布

原创最新推荐文章于 2022-05-15 13:49:01 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了一个简单的HTML与JavaScript结合的在线演示案例，用于模拟短信发送过程。点击发送按钮后，输入框中的内容会显示在指定区域，并自动清空输入框。

在线演示

这里写图片描述

点击发送按钮，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>