js css 模拟低配信息发送

最新推荐文章于 2022-05-20 16:26:32 发布

unsafe-no

最新推荐文章于 2022-05-20 16:26:32 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/Mr_aswl/article/details/112548789

版权

本文介绍了使用js和css创建的一个简易信息发送功能，类似记事本升级版，虽然外观简单，但已耗尽作者的艺术细胞。内容包括低配消息发送的实现，存在输入提示框无法修改的bug。作者尝试使用textarea，但遇到输入过多后布局错位的问题。代码分享，期望找到能将信息延展到有滚动条区域的方法，但目前无法自动刷新信息。

摘要由CSDN通过智能技术生成

一个低配版的…信息发送？？
记事本升级版！！

在这里插入图片描述
虽然这个页面看起来…确实不是很好看
但是耗尽了我的艺术细胞了’’’(lll￢ω￢)

低配的消息发送or进化的记事本？？附带bug

在这里插入图片描述

带了个无输入提示,
改这个提示框的我还不会…但是看到了，帅的

在这里插入图片描述

所以说的技术本的…低配版
试着用textarea,但是没有我预期的效果，
输入过多以后旧脱离了，熊小康？？我不认识他

上代码！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杳无音信</title>
    <style>
        body {
            background-color: #2f3e46;
        }

        #home {
            width: 50%;
            min-height: 60vh;
            border-top: red 1px solid;
            background-color: #354f52;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 5px 10px 20px;
        }

        #home::before {
            content: "杳无音信";
            position: absolute;
            font-size: 3vw;
            color: white;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #home button {
            position: absolute;
            bottom: 15px;
            right: 60px;
            background-color: #354f52;
            outline: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            overflow: hidden;
        }

        #home input {
            position: absolute;
            bottom: 0;
            width: 80%;
            height: 30px;
            line-height: 30px;
            font-size: 28px;
            margin-bottom: 20px;
            margin-left: 10px;
            border-radius: 10px;
            outline: none;
            color: #cad2c5;
            background-color: #354f52;
            font-family: "YouYuan";
        }

        #home .page {
            overflow: scroll;
            background-color: rgb(53, 79, 82);
            width: 100%;
            height: 390px;
        }
        #home .page::-webkit-scrollbar {display:none}
        #home #onText {
            position: relative;
            display: block;
            float: right;
            color: #cad2c5;
            height: 50px;
            line-height: 50px;
            font-size: 2vw;
            font-family: "YouYuan";
            margin: 8px;
            margin-right: 30px;
            /* border: 1px solid #84a98c; */
            border-radius: 5px;
            margin-top: 5px;
        }

        #home #onText p {
            text-align: right;
            height: 50px;
            overflow: hidden;
            display: block;
            position: relative;
        }

        #home #onText p::after {
            content: '';
            display: block;
            background-image: url(../../旧建文件夹/2021-img/m01.jpg);
            background-size: contain;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            float: right;
            box-shadow: 1px 1px 2px 1px #000;
        }
    </style>
</head>

<body>
    <div id="home">
        <div class="page">
            <div id="onText"></div>
        </div>
        <div id="title"></div>
        <input type="text" id="infoText">
        <button onclick="outButton()">发送</button>
    </div>
</body>
<script type="text/javascript">
    function outButton() {
        var info = document.getElementById("infoText").value;
        // alert(info);
        if (info != "") {
            var p = document.createElement("p");
            var pText = document.createTextNode(info);
            p.appendChild(pText);
            document.getElementById("onText").appendChild(p);
            document.getElementById("infoText").value = "";
        } else {
            alert("我们是正经假冒聊天软件，不输出寂寞");
        }
    }
</script>

</html>

其实真是就是个改版技术本，hhhh
想要知道有没有什么可以装信息到一个可以延申…
右边可以有一个拉条那种的空间里，求求了！
（但是信息没办法自己刷新到上面去…难受）

使用


        #home .page {
            overflow: scroll;
             /* 内容填满屏幕出现滚动条，极丑 */
            background-color: rgb(53, 79, 82);
            width: 100%;
            height: 390px;
        }
        #home .page::-webkit-scrollbar {display:none}
         /* 隐藏滚动条，舒服 */