SOURCE

console 命令行工具 X clear

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

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.8.0/marked.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body style="margin: 0;">
    <div class="pad">
        <div class="left" id="drag"  contenteditable="true" placeholder=""></div>
        <div class="right">
            <div class="counter"></div>
            <div class="right-content"></div>
        </div>
    </div>

    <script>
        
        marked.setOptions({breaks:true})
        $("#drag").sortable()
        $(".left").keyup(function(){
            var leftText = document.querySelector(".left").innerText
            var sum = leftText.length

            if (sum == 0) {
                $(".counter").text("来试一试")
            }
            else if (10 <= sum && sum < 50 ) {
                $(".counter").text(`${sum}个字符,感觉你已经上手了,加油~`)
            }
            else if (50 <= sum && sum < 100 ) {
                $(".counter").text(`不知不觉,已经写了${sum}个字符了`)
            }
            else if (100 <= sum && sum < 300 ) {
                $(".counter").text(`呀,真勤快,已经写了${sum}个字符了`)
            }
            else if (300 <= sum ) {
                $(".counter").text("已经写了300+字符,计数君数累了,你继续..")
            }
            
            $(".right-content").html(marked(leftText))
        })
      
        
    </script>

</body>

</html>
body {
    background-color: black;
}

.pad {
    width: 100vw;
    height: 100vh;
    background-color:#212A33;
    display: flex;
}

.left {
    width: 50vw;
    height: 100%;
    padding: 40px;
    white-space: pre-wrap;
    white-space: pre-line;
    background-color: aliceblue;
}

.right {
    width: 50vw;
    height: 100%;
    padding: 20px 40px;
    background-color:#212A33;
    color: aliceblue;
    display: flex;
    flex-direction: column;
}

.counter {
    height: 20px;
    font-size: 12px;
    color: aliceblue;
    align-self: flex-end;
}

.right-content * {
    word-break: break-all;
}

blockquote p{
    color: gainsboro;
    font-weight: 800;
    border-left: solid white 2px;
    padding-left: 30px;
    
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color:white;
}

a:hover {
    text-decoration: underline;
    color: yellow;
}

a:active {
    text-decoration: none;
    color: #FF0000;
}