240 lines
12 KiB
JavaScript
240 lines
12 KiB
JavaScript
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset='utf-8'>
|
||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||
<meta name="keywords" content="汉字,拼音,笔画数">
|
||
<meta name="description" content="获取汉字的拼音和笔画数的js库">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
||
<meta http-equiv="X-UA-Compatible" content="IE=8">
|
||
|
||
<title>cnchar.js by theajack</title>
|
||
<link rel="icon" href="./assets/v1/images/i.ico" type="image/x-icon" />
|
||
<link rel="stylesheet" type="text/css" href="./assets/v1/css/index.css" />
|
||
<link rel="stylesheet" type="text/css" href="./assets/v1/css/use-part.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<!--header-->
|
||
<div id="header">
|
||
<div id="title">cnchar.js</div>
|
||
<div id="smallTitle">功能全面、多端支持的汉字繁体字拼音笔画js库</div>
|
||
<a id='viewProjectLink' target="_blank" href="https://github.com/theajack/cnchar">
|
||
<div id="viewProject" class="border-btn">View project on github</div>
|
||
</a>
|
||
<div>
|
||
<input placeholder="请输入汉字尝试一下" id='tryInput' value='正在加载cnchar...' readonly class='unloaded' type="text">
|
||
</div>
|
||
<div id='tryResult'>
|
||
<div id='spell'></div>
|
||
<div id='stroke'></div>
|
||
<div id='trad'></div>
|
||
<div id='spark'></div>
|
||
<div id='strokeOrder'></div>
|
||
<div id='draw'></div>
|
||
</div>
|
||
</div>
|
||
<!-- <div id="usePart" class="bg-gray2 text-black part clearfix">
|
||
<div class="part-title">快速使用</div>
|
||
<div id='useList'>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
<span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
|
||
</div>
|
||
</div>
|
||
<div id='runAPI'>
|
||
</div> -->
|
||
<!--intro-->
|
||
<div id="introPart" class="bg-gray text-black part clearfix">
|
||
<div class="part-title">功能</div>
|
||
<div class="func-item">
|
||
<img class="func-img" src="./assets/v1/images/pin.png" />
|
||
<div class="func-text">拼音|音调</div>
|
||
</div>
|
||
<div class="func-item">
|
||
<img class="func-img" src="./assets/v1/images/duo.png" />
|
||
<div class="func-text">多音字|词</div>
|
||
</div>
|
||
<div class="func-item">
|
||
<img class="func-img" src="./assets/v1/images/bi.png" />
|
||
<div class="func-text">笔画数|笔序</div>
|
||
</div>
|
||
<div class="func-item">
|
||
<img class="func-img" src="./assets/v1/images/fan.png" />
|
||
<div class="func-text">繁体字|火星文</div>
|
||
</div>
|
||
</div>
|
||
<!--download-->
|
||
<div id="downloadPart" class="bg-dark text-white part">
|
||
<div class="part-title">安装使用</div>
|
||
<pre class='demo-code'>import cnchar from 'cnchar';
|
||
'汉字'.spell();
|
||
'汉字'.stroke();</pre>
|
||
<pre class='demo-code'><script src="https://cdn.jsdelivr.net/gh/theajack/cnchar/dist/cnchar.latest.min.js"></script>
|
||
<script>
|
||
'汉字'.spell();
|
||
'汉字'.stroke();
|
||
</script></pre>
|
||
<!-- <div class="part-title small font-size-bigger">1.script 标签方式引入</div>
|
||
<div class="part-title small">引用： <script src="https://www.theajack.com/cnchar/cnchar.min.js"></script></div>
|
||
<div class="part-title small font-size-bigger">2.npm 方式安装</div>
|
||
<div class="part-title small">安装: npm install cnchar</div>
|
||
<div class="part-title small">使用: import CnChar from 'cnchar' 或 const CnChar = require('cnchar')</div> -->
|
||
<!-- <div id="copyBtn" class="border-btn mb-install" onclick="J.open('cnchar.2.0.4.min.js')">复制源码</div> -->
|
||
<div id="copyBtn" class="border-btn mb-install"
|
||
onclick="J.open('https://github.com/theajack/cnchar#user-content-cnchar')">点我查看详细</div>
|
||
</div>
|
||
</div>
|
||
<!--api-->
|
||
<div id="apiPart" class="bg-gray part clearfix">
|
||
<div class="part-title text-black relative">简单使用</div>
|
||
<div class="api-item">
|
||
<div class="api-item-title">.spell()</div>
|
||
<div class="api-item-text">获取汉字完整拼音</div>
|
||
<div class="api-content-wrapper">
|
||
<div class="api-content clearfix">
|
||
"测试".spell()
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell())">查看</span>
|
||
</div>
|
||
<div class="api-content clearfix">
|
||
"测试".spell("up")
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('up'))">查看</span>
|
||
</div>
|
||
<div class="api-content clearfix">
|
||
"测试".spell("low")
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('low'))">查看</span>
|
||
</div>
|
||
<div class="api-content clearfix">
|
||
"测试".spell("array")
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('array'))">查看</span>
|
||
</div>
|
||
<div class="api-content clearfix">
|
||
"测试".spell("array","up")
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('array','up'))">查看</span>
|
||
</div>
|
||
<div class="api-item-text">非汉字会返回原字符串</div>
|
||
</div>
|
||
<div class="api-test-wrapper">
|
||
<div class="api-item-ltitle">尝试一下</div>
|
||
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
||
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell())">获取</span>
|
||
</div>
|
||
</div>
|
||
<div class="api-item">
|
||
<div class="api-item-title">.spell('first')</div>
|
||
<div class="api-item-text">获取汉字拼音首字母</div>
|
||
<div class="api-content-wrapper">
|
||
<div class="api-content clearfix">
|
||
"测试".spell('first')
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('first'))">查看</span>
|
||
</div>
|
||
<div class="api-content clearfix">
|
||
"测试".spell('first','low')
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('first','low'))">查看</span>
|
||
</div>
|
||
<div class="api-content clearfix">
|
||
"测试".spell("array",'first',"up")
|
||
<span class="api-content-result" onclick="this.txt('测试'.spell('array','first','up'))">查看</span>
|
||
</div>
|
||
<div style="height:1px"></div>
|
||
<div class="api-item-text">非汉字会返回原字符串</div>
|
||
</div>
|
||
<div class="api-test-wrapper">
|
||
<div class="api-item-ltitle">尝试一下</div>
|
||
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
||
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell('first'))">获取</span>
|
||
</div>
|
||
</div>
|
||
<div class="api-item">
|
||
<div class="api-item-title">.stroke()</div>
|
||
<div class="api-item-text">获取汉字笔画数</div>
|
||
|
||
<div class="api-content-wrapper">
|
||
<!-- <div class="api-item-ltitle">如何使用</div> -->
|
||
<div class="api-content clearfix">
|
||
"测试".stroke()
|
||
<span class="api-content-result" onclick="this.txt('测试'.stroke())">查看</span>
|
||
</div>
|
||
<div class="api-item-text">非汉字会返回原字符串长度</div>
|
||
</div>
|
||
<div class="api-test-wrapper">
|
||
<div class="api-item-ltitle">尝试一下</div>
|
||
<input type="text" class="api-test-input" placeholder="请输入汉字" />
|
||
<span class="api-test-btn" onclick="this.prev().val(this.prev().val().stroke())">获取</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--relate-->
|
||
<div id="relatePart" class="bg-dark text-white part ">
|
||
<div class="part-title hassmall">友情链接</div>
|
||
<div class="part-title small">(欢迎访问)</div>
|
||
<div id="tjLinks">
|
||
</div>
|
||
</div>
|
||
<!--footer-->
|
||
<div id="footer" class="bg-black text-white part">
|
||
<div id="footerLink">
|
||
<span class="link" onclick="J.open('https://github.com/theajack')">GitHub</span>
|
||
<span class="split-icon">|</span>
|
||
<span class="link"
|
||
onclick="J.open('http://weibo.com/p/1005055304330572/home?from=page_100505&mod=TAB&is_all=1')">Sina
|
||
Micro-blog</span>
|
||
<span class="split-icon">|</span>
|
||
|
||
<span class="wechat-public d-hide" onclick="this.child(0).fadeToggle()">
|
||
WeChat Official Accounts
|
||
<img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
|
||
</span>
|
||
<span class="split-icon d-hide">|</span>
|
||
|
||
Email:theajack@qq.com
|
||
<span class="split-icon d-hide">|</span>
|
||
<span class="link d-hide" onclick="J.open('https://www.theajack.com')">theajack.com</span>
|
||
<div class=" d-show">
|
||
<span class="wechat-public" onclick="this.child(0).fadeToggle()">
|
||
WeChat Official Accounts
|
||
<img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
|
||
</span>
|
||
<span class="split-icon">|</span>
|
||
<span class="link" onclick="J.open('https://www.theajack.com')">theajack.com</span>
|
||
</div>
|
||
</div>
|
||
<div id="copyright">
|
||
<span class="glyphicon glyphicon-copyright-mark"></span> <span id='_year'>20xx</span> TheaJack All rights reserved
|
||
</div>
|
||
</div>
|
||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/jetter.min.js"></script>
|
||
<script src="./assets/v1/js/index.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js" onload='loaded()'></script>
|
||
<!-- <script src="https://www.theajack.com/cnchar/dist/cnchar.latest.min.js"></script>
|
||
<script src="https://www.theajack.com/cnchar/dist/cnchar.order.latest.min.js"></script>
|
||
<script src="https://www.theajack.com/cnchar/dist/cnchar.poly.latest.min.js"></script>
|
||
<script src="https://www.theajack.com/cnchar/dist/cnchar.trad.latest.min.js" onload='loaded()'></script> -->
|
||
<script src="./assets/v1/js/run.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/link.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/logo.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/log.js"></script>
|
||
<!--<script type="text/javascript" name="cnchar.js" src="https://www.theajack.com/assets/js/stat.js"></script>-->
|
||
<script>
|
||
var _mtac = {};
|
||
(function () {
|
||
var mta = document.createElement("script");
|
||
mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
|
||
mta.setAttribute("name", "MTAH5");
|
||
mta.setAttribute("sid", "500700068");
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(mta, s);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |