王小胖之中文汉字转拼音

使用场景:看到一个字不知道读音,那么可以复制然后查一下。

实现功能:输入汉字,转换成带音标的读音,重点是能显示音标,便于学习读音。

数据实例:输入:“王小胖顶呱呱~~”  输出:“wáng xiǎo pàng dǐng guā guā ~~”

功能实现:

html代码

<div class="input-group">
                      <input name="kw" type="text" class="form-control" placeholder="汉字"  id="hanzi" value="王小胖顶呱呱~~">
                      <div class="input-group-btn">
                        <button type="submit" class="btn btn-success"  id="convert">转换</button>
                      </div>
</div><!-- /.input-group -->
            

JS 代码

                 $(function(){
                      $("#convert").click(function(){
                          lower= $("#hanzi").val();
                          upper=trans(lower);
                          $("#pinyin").val(upper);
                      });
                  });

                  //转换
                  function trans(p){
                        var cc=p
                        var str='',str2;
                        var s;
                        for(var i=0;i<cc.length;i++){
                            if(pydic.indexOf(cc.charAt(i))!=-1&&cc.charCodeAt(i)>200){
                                s=1;
                                while(pydic.charAt(pydic.indexOf(cc.charAt(i))+s)!=","){
                                    str+=pydic.charAt(pydic.indexOf(cc.charAt(i))+s);
                                    s++;
                                }
                                str+=" ";
                            }
                            else{
                                str+=cc.charAt(i);
                            }
                        }
                        return str;
                }

中间需要使用一个JS文件,可以直接在线查看:http://www.wxp123.me/Public/js/pinyin/pinyin.js

--------------------------------------------------------------------------------------------------------------------------

不爱说话,一切以代码为主,其他 全靠悟性!

中文转拼音:http://www.wxp123.me/Index/detail/id/11.html

王小胖个人博客地址:http://blog.wxp123.me/p/54

原文地址:https://www.cnblogs.com/wangpg/p/4899398.html