<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.toolMain {
width: 1060px;
height: auto;
margin: 0 auto;
margin-top: 25px;
}
.url {
width: 700px;
height: 32px;
border: 0;
border: 1px solid #bbb;
padding-left: 10px;
}
.bt-green {
font-size: 14px;
border: none;
line-height: 33px;
background: #6FB934;
font-weight: bold;
color: #FFF;
cursor: pointer;
padding: 0 18px;
margin-right: 12px;
}
</style>
</head>
<body>
<div id="main">
<div class="toolMain" style="height: 500px;">
<h1>URL编码解码 URL encode and decode</h1>
<h2 style="height:30px;">请输入您要转换的网址：</h2>
<form action="" method="post">
<input type="text" id="url" name="url" class="url" value="" placeholder="Enter Your Url " style="margin-bottom:15px;"> <br>
<input class="bt-green" value="Urlencode 编码" type="button" onclick="urlencode()">
<input class="bt-green" value="Urlencode 解码" type="button" onclick="urldecode()" style="background:#c90"><br>
<input type="text" id="values" name="values" class="url" style="margin-top:15px;">
</form>
</div>
</div>
<script src="https://lib.baomitu.com/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function urlencode(){
$("#values").val(encodeURIComponent($("#url").val()));
}
function urldecode(){
$("#values").val(decodeURIComponent($("#url").val()));
}
</script>
</body>
</html>
