【分享】一个好看的文本框和按钮组合-编码工具html源码。
这几天，找了很多CSS的网站，自己研究弄了个兼容性不错的框体和按钮的模板，分享给大家用一下，顺便分项一个编码的工具，都在框体里面了，因为博客园发帖会屏蔽一些js功能，所以上一篇随笔中，没有应该有的效果。废话不多说了，收下：
<style>
.cyan {
background-color: #34A853; /* 绿色 */
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
font-family: "微软雅黑";
}
.cyan:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.cyan2 {background-color: #4285f4;} /* 蓝色 */
.cyan3 {background-color: #ea4335;} /* 红色 */
.cyan4 {background-color: #757575; color: black;} /* 灰色 */
.cyan5 {background-color: #555555;} /* 黑色 */
.cyan6 {background-color: #fbbc05;} /* 黄色 */
div.cyc {
margin: 0px 0px 5px; padding: 5px; border: 1px solid rgb(212, 212, 212); border-image: none; width: 99%; color: rgb(0, 0, 0); background-image: linear-gradient(rgb(255, 255, 255), rgb(229, 238, 204) 100px); background-color: rgb(229, 238, 204);
}
textarea{
resize:none;
}
.cyk {
padding: 6px 12px; border-radius: 4px; border: 1px solid rgb(204, 204, 204); transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; border-image: none; width: 99%; color: rgb(85, 85, 85); font-size: 14px; display: block; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075); background-image: none; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.cyk:focus {
border-color: rgb(102, 175, 233); outline: 0px; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.cytxt {
display: inline-block; font-size: 16px; color: #303030; line-height: 1.2; font-family: "微软雅黑"; word-wrap: break-word; word-break: break-all; ove flow: hidden;
}
</style>
<DIV class="cyc">
<H3 align="center">JS转义工具-怸歪小站</H3>
<P><DIV class="cytxt">将Js代码编码一下，转成非特殊字符，从而避免被wp自动转义</DIV></P>
<DIV align="center"><textarea class="cyk" id="jscode" rows="13"; onclick="focus();select()"; placeholder="在此输入内容"></textarea></DIV>
<DIV align="center"><input class="cyan" onclick="encodeJS();" value="编码" type="button" /> <input class="cyan cyan2" onclick="decodeJS();" value="解码" type="button" /> <input class="cyan cyan3" type="button" value="执行" onclick="testJS();" /> <input class="cyan cyan6" type="button" value="清空" onclick="Empty();" /> <input class="cyan cyan5" type="button" value="复制" onclick="copyinput()"/>
</DIV></DIV>
<DIV class="cytxt">★将上面编码过的内容，拷贝到你的 wordpress 正文中，即可,本程序转自 水很凉 的博客,CSS样式采用runoob.com和txttool.com的，如果喜欢可以拿过去直接用。</DIV>
<script type="text/javascript">
function D(obj)
{
return document.getElementById(obj);
}
function DF(obj)
{
return document.getElementById(obj).value;
}
function encodeJS()
{
var es = escape(DF('jscode'));
D('jscode').value = "<script type=\"text/javascript\">document.write(unescape('" + es +"'));<\/script>";
}
function decodeJS()
{
var regex = /unescape\('(.+?)'\)/i;
D('jscode').value = unescape(regex.exec(DF('jscode'))[1]);
}
</script>
<SCRIPT LANGUAGE="JavaScript">
// 执行
function testJS()
{
var win = window.open();
win.document.write(DF('jscode'));
}
// 清空
function Empty() {
document.getElementById('jscode').value = '';
document.getElementById('jscode').select();
}
// 复制
function copyinput()
{
var input=document.getElementById("jscode");//input的ID值
input.select(); //选择对象
document.execCommand("Copy"); //执行浏览器复制命令
}
</script>
预览效果如下：注：预览效果中<textarea class="cyk" id="jscode" rows="13"; onclick="focus();select()"; placeholder="在此输入内容"> </textarea>会不显示文本框所以预览中我改成了<textarea id="jscode" class="cyk" onclick="focus();select()" rows="13">在此输入内容</textarea></div>，你可以将以上代码另存为html，查看效果。
JS转义工具-怸歪小站
将Js代码编码一下，转成非特殊字符，从而避免被wp自动转义
★将上面编码过的内容，拷贝到你的 wordpress 正文中，即可,本程序转自 水很凉 的博客,CSS样式采用runoob.com和txttool.com的，如果喜欢可以拿过去直接用。
博客园不支持js发文章，所以按键都是无效的。
