首先需要前台模版index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>汉子转拼音带音标_PHP博客</title> <meta name="keywords" content="php实例,PHP实例教程,php源码,PHP汉字转拼音" /> <meta name="description" content="下面我们讲解一下如何使用PHP来将汉字换转为拼音【带音标】" /> <link rel="stylesheet" type="text/css" href="/Themes/Admin/Public/css/common.css" /> <style> .demo{width:520px; margin:40px auto 0 auto; min-height:250px;} .input{padding:3px; line-height:22px; border:1px solid #ccc} .btn{overflow: hidden;display:inline-block;*display:inline;padding:4px 20px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-left:2px} #result{margin-top:20px; line-height:26px; word-break:break-all} .blue{ color: #blue;} .red{ color: #red;} </style> </head> <body> <div class="head"> <div class="head_inner clearfix"> <ul id="nav"> <li><a href="http://liqingbo.cn/">首 页</a></li> <li><a href="http://liqingbo.cn/category/">文章列表</a></li> </ul> <a class="logo" href="http://liqingbo.cn/" title="李清波博客"><img src="/Public/images/logo.png" alt="李清波博客" style="max-width:90%" /></a> </div> </div> <div class="container"> <div class="demo"> <h2 class="title"><a href="">教程:汉子转拼音代码分析</a></h2> <div>内容:<textarea id="str" class="input" style="width:100%; height:80px"></textarea></div> <div class="input-text"> <input type="button" value="汉->拼" class="btn" id="pinyin"/> </div> <div id="result" class="result"></div> </div> </div> <div class="foot"> Powered by sucaihuo.com 本站皆为作者原创,转载请注明原文链接:<a href="http://liqingbo.cn/" target="_blank">liqingbo.cn</a> </div> <script type="text/javascript" src="/Themes/Admin/Public/js/jquery.js"></script> <script type="text/javascript"> $(function() { $("#pinyin").click(function() { post('pinyin');//加密 }); $("#hanzi").click(function() { post('hanzi');//解密 }); $("#empty").click(function(){ $("#str").val(''); $("#key").val(''); $("#result").text(''); }) }); function post(act) { var str = $("#str").val(); $.post("/admin.php/article/pinyin/?act=" + act, {str: str}, function(data) { $("#result").html(data); }); } </script> </body> </html>
当我们输入所要转换的汉字后,将数据提交到pinyin.php文件进行转换,在返回到index.html文件中
完整代码:
public function pinyin(){ if(IS_POST){ header("Content-Type:text/html;charset=utf-8"); include(APPLICATION."Common/ChinesePinyin.class.php"); $Pinyin = new ChinesePinyin(); $str = $_POST['str']; if(strlen($str)<=0){ echo '请输入要转换的内容'; exit; } $pinyin1 = $Pinyin->TransformWithTone($str); $pinyin2 = $Pinyin->TransformWithoutTone($str); $pinyin3 = $Pinyin->TransformUcwordsOnlyChar($str); $pinyin4 = $Pinyin->TransformUcwords($str); echo '带声调的汉语拼音: <span class="red">'.$pinyin1.'</span>'; echo '<br>'; echo '无声调的汉语拼音: <span class="red">'.$pinyin2.'</span>'; echo '<br>'; echo '首字母只包括汉字: <span class="red">'.$pinyin3.'</span>'; echo '<br>'; echo '首字母和其他字符: <span class="red">'.$pinyin4.'</span>'; echo '<br>'; exit; } $this->display('pinyin'); }
以上例子为thinkphp框架下的
实例效果:汉子转拼音带音标