小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 [html] 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>js中的转码解码</title> 
<style> 
/*reset*/ 
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 
table{border-collapse:collapse;border-spacing:0;} 
fieldset,img{border:0;} 
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 
ol,ul{list-style:none;} 
caption,th{text-align:left;} 
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 
q:before,q:after{content:'';} 
abbr,acronym{border:0;font-variant:normal;} 
sup{vertical-align:text-top;} 
sub{vertical-align:text-bottom;} 
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} 
input,textarea,select{*font-size:100%;} 
input:focus,textarea:focus,select:focus{ outline:none;} 
select,input {vertical-align:middle;} 
legend{color:#000;} 
.clean:before,.clean:after,.clearfix:before,.clearfix:after{content:"";display:table;} 
.clean:after,.clearfix:after{clear:both;} 
.clean,.clearfix{zoom:1;} 
.clear{clear:both;} 
.fl{float:left;} 
.fr{float:right;} 
.break{word-wrap:break-word;width:inherit;} 
.linkhidden {text-indent:-9999em;overflow:hidden;} 
.hidden {display:none;} 
/*reset*/ 
body { background:url(https://webapp.bdimg.com/static/11281511/appweb/images/new_index/bg.png);} 
.main { margin:20px auto; padding:20px 0; width:960px; background:url(https://2uncd.sinaapp.com/images/bodybg.png); border-radius:10px; box-shadow:2px 5px 7px #ccc;} 
h1 { font:30px/50px "microsoft yahei"; color:#069; text-align:center; text-shadow:2px 2px 2px #006666;} 
textarea { display:block; margin:20px auto; padding:10px; width:80%; height:200px; border:1px solid #eee; border-radius:5px; box-shadow:2px 5px 5px #ccc; resize:vertical;} 
.box { margin:10px auto; width:50%;} 
.box label { padding:0 20px; width:150px; font:12px/28px Arial, simsun; text-align:right;} 
.box input { margin:0 15px 0 0; padding:0 5px; height:26px; border:1px solid #2A77FF; border-radius:4px; background:-webkit-gradient(linear, 0 0, 0 100%, from(#008EEA), to(#0080D3)); background:-moz-linear-gradient(top, #008EEA,#0080D3); box-shadow:2px 4px 4px #999999; font-size:12px; color:#FFF; cursor:pointer;} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
<script> 
$(function(){ 
    $("input").click(function(){ 
        var fun = $(this).data().type; 
                $txt = $("#txt"); 
                str = $txt.val(); 
        function dispose(str){ 
            switch(fun){ 
                case "escape": 
                    return escape(str); 
                    break; 
                case "unescape": 
                    return unescape(str); 
                    break; 
                case "encodeURI": 
                    return encodeURI(str); 
                    break; 
                case "decodeURI": 
                    return decodeURI(str); 
                    break; 
                case "encodeURIComponent": 
                    return encodeURIComponent(str); 
                    break; 
                case "decodeURIComponent": 
                    return decodeURIComponent(str); 
                    break; 
                case "unicode": 
                    return decodeURIComponent(escape(str).toLocaleLowerCase().replace(/%u/gi, '//u'));//转码、转小写、正则替换"%"、decodeURIComponent解码 
                    break; 
                case "deunicode": 
                    return unescape(str.replace(///u/gi, '%u'));//正则替换"/"、解码 
                    break; 
                default: 
                    break; 
            }; 
        }; 
        $txt.val(dispose(str)); 
    }); 
}); 
</script> 
</head> 
 
<body> 
<p class="main"> 
    <h1>JS常用转码大全</h1> 
    <textarea id="txt"></textarea> 
    <p class="box clearfix"> 
        <label class="fl">escape</label> 
        <input class="fl" type="button" data-type="escape" value="加密" /> 
        <input class="fl" type="button" data-type="unescape" value="解密" /> 
    </p> 
    <p class="box clearfix"> 
        <label class="fl">encodeURI</label> 
        <input class="fl" type="button" data-type="encodeURI" value="加密" /> 
        <input class="fl" type="button" data-type="decodeURI" value="解密" /> 
    </p> 
    <p class="box clearfix"> 
        <label class="fl">encodeURIComponent</label> 
        <input class="fl" type="button" data-type="encodeURIComponent" value="加密" /> 
        <input class="fl" type="button" data-type="decodeURIComponent" value="解密" /> 
    </p> 
    <p class="box clearfix"> 
        <label class="fl">unicode</label> 
        <input class="fl" type="button" data-type="unicode" value="加密" /> 
        <input class="fl" type="button" data-type="deunicode" value="解密" /> 
    </p> 
</p> 
</body> 
</html> 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_8819.html