<!DOCTYPE html>
<html xmlns="http://www.shaxiangift.com/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery中文转拼音带编号代码</title>
<scriptsrc="js/jquery-1.7.1.js"></script>
<scriptsrc="js/function.js"></script>
<style type="text/css">
body{
padding:0;
margin:0;
font-family:verdana,Microsoft YaHei,Tahoma,sans-serif;
background:-webkit-radial-gradient(#205983, #0A2742);
background:radial-gradient(#205983, #0A2742) 50% 50%/cover fixed;
}
.container{
width:100%;
}
.list{
width:920px;
height:300px;
position:relative;
margin:0 auto;
margin-top:50px;
overflow:hidden;
}
.shengcheng{
width:1000px;
margin:0 auto;
font-size:150px;
text-align:center;
line-height:220px;
color:#fff;
}
.listspan {
float:left;
display:inline-block;
margin:00 10px 0;
}
.listspan label {
float:left;
line-height:80px;
color:#fff;
}
.xv_hanzi,.xv_pinyin {
outline:none;
line-height:25px;
font-size:20px;
text-align:left;
box-shadow:0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.2) inset, 0 0 12pxrgba(255,255,255,.1);
padding:8px 20px;
background:rgba(0,0,0,.1);
border-radius:10px;
font-size:60px;
color:#FFF;
letter-spacing:-1px;
text-shadow:0 2px 5px rgba(0, 0, 0, 0.6);
border:none;
}
.xv_go{
position:absolute;right:0;top:0;
}
.xv_goinput {
width:170px;
height:170px;
float:left;
font-size:60px;
text-shadow:0 1px #DDD;
box-shadow:0 -20px 20px -20px #777 inset;
border:none;
border-radius:10px;
cursor:pointer;
color:#205983;
font-weight:bolder;
outline:none;
}
.xv_goinput:hover {
box-shadow:1px 1px 1px 1px #fff inset;
background:#fff;
}
</style>
</head>
<body>
<div class="container">
<divclass="list">
<span>
<label>姓名：</label>
<inputclass="xv_hanzi" type="text" placeholder="在这里输入中文"onKeyUp="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" />
</span>
<span>
<label>拼音：</label>
<inputtype="text" class="xv_pinyin">
</span>
<spanclass="xv_go">
<inputclass="xv_submit" type="button" value="GO">
</span>
</div>
<divclass="shengcheng"></div>
</div>
<divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoftYaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服
