文本到Base64

chenyajun  2020-02-02 11:45:58  阅读 4137 次 评论 0 条
<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Task 1 - Base64</title><!--    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script type="text/javascript" src="main.js"></script> -->
    <style type="text/css">* {
    outline:none;
      border:none;
      margin:0px;
      padding:0px;
      font-family:Courier, monospace;
      color: white;}body {
      background:#333 url(https://static.tumblr.com/maopbtg/a5emgtoju/inflicted.png) repeat;        }.container{
    padding: 100px;
    }div {
    width: 500px;
    margin: auto;}h1{
    width: 50%;
    text-align: center;
    margin: auto;}a{
    font-size: 20px;}.text {
    width:100%;
    overflow:hidden;
    background-color:#FFF;
    color:#222;
    font-family:Courier, monospace;
    font-weight:normal;
    font-size:24px;
    resize:none;
    line-height:40px;
    
    background-image: url(https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png);
    background-repeat:repeat-y, repeat;
    -webkit-border-radius:12px;
    border-radius:12px;
    -webkit-box-shadow: 0px 2px 14px #000;
    box-shadow: 0px 2px 14px #000;
    border-top:1px solid #FFF;
    border-bottom:1px solid #FFF;}</style><script language="JavaScript" type="text/javascript">function toUtf8(s) {
    return unescape(encodeURIComponent(s));}function fromUtf8(s) {
    return decodeURIComponent(escape(s));}function encode(str) {
    return btoa(toUtf8(str));}function decode(base64) {
    return fromUtf8(atob(base64));}function updateCount() {
    textLength.innerHTML = "text length: " + text.value.length;
    base64Length.innerHTML = "Base64 length: " + base64.value.length + ", Decoded length: " + decode(base64.value).length;}window.onload = function () {
    let text = document.getElementById("text");
    let textLength = document.getElementById("textLength");

    let base64 = document.getElementById("base64");
    let base64Length = document.getElementById("base64Length");

    text.onkeyup = function () {
        base64.value = encode(text.value);
        updateCount();
    };

    base64.onkeyup = function () {
        text.value = decode(base64.value);
        updateCount();
    };};</script></head><body>
    <br>
    <br>
    <br>
    <h1>Task 1 - Base64</h1>
    <!--<div id="margin">Title: <input id="title" type="text" name="title"></div>!-->
    <div class="container">
        <div>
            <a id="textLength">Text length: 0</a>
            <br>
            <textarea class="text" placeholder="text" id="text" name="text" rows="4" style="overflow: hidden; word-wrap: break-word; resize: none; height: 160px; "></textarea>
        </div>
        <br>
        <br>
        <br>
        <div>
            <a id="base64Length">Base64 length: 0, Decoded length: 0</a>
            <br>
            <textarea class="text" placeholder="base64" id="base64" name="text" rows="4" style="overflow: hidden; word-wrap: break-word; resize: none; height: 160px; "></textarea>
        </div>
    </div></body></html>


本文地址:https://chenyajun.net/index.php/post/58.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!