<!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>
评论已关闭！
