<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线编译简版 - 趣味工具 - 趣味笔记</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style>
html,body{background-color:#fff;}
.compile-form{
width: 96%;
margin: 0 auto;
}
input[type="text"] {
width: 100%;
border-radius: 3px;
border: 1px solid #c8cccf;
background-color: #fff;
color: #6a6f77;
outline: 0;
}
.compile-content{height:100px}
.compile-content{
width: 92%;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 10px;
resize: none;
}
.form-group {
margin-bottom: 15px;
}
.btn {
padding: 5px;
border: none;
background-color: #dddddd40;
color: #3bb4f2;;
text-align: center;
width: 60px;
border-radius: 0.2rem;
margin: 0.2rem auto;
font-weight: 600;
font-size: 1rem;
}
.hui {
color: #ddd;
}
.hui:hover, .btn:hover {
color: #fff;
background-color: #3bb4f2;
}
#compile{
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div class="compile-form">
<div class="form-group">
<span onclick='compile()'>代码编译</span>
</div>
<script>
function compile() {
document.getElementById('compile').style.display = 'block';
}
</script>
<div style='display: none;' id='compile'><p>2019 by qw980.cn</p></div>
<form name="myform" >
<div class="form-group">
<textarea id="param" name="text1" class="compile-content" placeholder="请输入html编译内容..."></textarea>
</div>
<div class="form-group">
<textarea id="result" name="text2" class="compile-content" placeholder="输出内容为..."></textarea>
</div>
<div class="form-group">
<input type="button" class="btn" value="编码" onclick="javascript:var div = document.createElement('div');div.innerText = window.document.getElementById('param').value + '';window.document.getElementById('result').value = (div.innerHTML
+'').replace(/(\<br\>)/g,'\n');">
<input type="button" class="btn" value="解码" onclick="javascript:var div = document.createElement('div');div.innerHTML = window.document.getElementById('param').value + '';window.document.getElementById('result').value =
div.innerText;">
<input class="btn hui" type="reset" value="重置">
</div>
</form>
</div>
</body>
</html>
