HTML公告墙追加

63 阅读 0 评论 42 点赞

我是靠谱客的博主害怕蓝天，最近开发中收集的这篇文章主要介绍HTML公告墙追加，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0 auto;
        }
    </style>
    <script>
        //定义方法
        function submit(){

            //根据ID得到元素
            var input = document.getElementById("input");

            //得到元素中的文字
            var text = input.value;

            //将文字进行敏感词过滤
            var reg = new RegExp("滚");

            //若文字包含敏感词
            if(reg.test(text)){
                alert("您输入的公告包含敏感词汇！")
            }else{

                //若不包含则将文字追加到公告墙上

                var wall = document.getElementById("wall");
                wall.append(text);
            }
        }
    </script>
</head>
<div style="width: 500px;height: 500px;">
    <div style="width: 100px;height: 20px;">公告墙</div>
    <div style="width: 466px;height:266px;border: 1px solid aqua" id="wall"></div>
    <div> 输入框<input type="text" class="input" id="input"> </div>
    <input type="button" value="发布"οnclick="submit()">
</div>

</body>
</html>