属性操作-模拟短信发送2（保留原内容）

模拟短信发送界面

最新推荐文章于 2025-09-08 12:29:33 发布

erdouzhang

最新推荐文章于 2025-09-08 12:29:33 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/72895876

js 专栏收录该内容

98 篇文章

订阅专栏

本示例展示了一个简单的HTML页面，用于模拟短信发送的过程。通过JavaScript实现了输入内容后点击按钮进行发送的功能，并在指定区域显示发送记录。该示例强调了DOM操作及事件处理。

在线演示

这里写图片描述

<!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;
            overflow: hidden;
        }
    </style>
    <script>
        window.onload =function(){
            // alert('123');测试js是否正常
            var con = document.getElementById('con');
            var txt = document.getElementById('txt');
            var btn = document.getElementById('btn');
            var oSpan = document.getElementById('oSpan');
            btn.onclick = function(){   
                if(txt.value == ''){
                    alert('请输入点内容吧~');
                }else{
                //内容换行显示            
                //con.innerHTML = con.innerHTML + txt.value + '</br>';              
                //内容显示前面文字换行显示，顺序不要颠倒   
                con.innerHTML = con.innerHTML + oSpan.innerHTML + txt.value + '</br>';
                //发送文字紧挨着拼接
                // con.innerHTML = con.innerHTML + txt.value;               
                txt.value = '';//内容发送后清空value值
                }
            }
        }
    </script>
</head>
<body>
    <div id="con"></div>
    <span id="oSpan">小明：</span>
    <input type="text" id="txt">
    <input type="button" value="提交" id="btn">
</body>
</html>