UNPKG

9.22 kBHTMLView Raw
1<!DOCTYPE html>
2
3<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4<head>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
7 <meta charset="utf-8" />
8 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
10 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
11
12 <title>字典</title>
13
14 <meta name="keywords" content="netnr,NET牛人,zidian,字典" />
15 <meta name="description" content="netnr,NET牛人,zidian,字典" />
16
17 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
18 <link href="https://cdn.jsdelivr.net/npm/netnrmd@3.0.0/src/netnrmd.css" rel="stylesheet" />
19</head>
20<body>
21
22 <div class="container">
23 <div class="row">
24 <div class="col-md-12 my-4 markdown-body">
25 <h1>zidian 字典</h1>
26 <p>汉字、词语、成语查询接口</p>
27 <h3>引言</h3>
28 <ul>
29 <li>数据来源于开源项目 <a href="https://github.com/pwxcoo/chinese-xinhua">https://github.com/pwxcoo/chinese-xinhua</a></li>
30 <li>而该项目的数据是一个<code>JSON</code>文件，大小超出 <code>20M</code>，不利于页面加载使用，所以拆分了文件</li>
31 <li>提取字、词、成语为数组，根据数组索引分页生成详情，具体请看 <code>build/parse.html</code> 的拆分脚本</li>
32 </ul>
33 <h3>使用</h3>
34<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/zidian@0.0.3/dist/zidian.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
35<span class="hljs-comment">&lt;!-- or --&gt;</span>
36<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/gh/netnr/zidian/dist/zidian.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
37</code></pre>
38 <p>查看 <a href="https://unpkg.com/zidian/">https://unpkg.com/zidian/</a><br>拉取 <code>npm install zidian</code></p>
39 <p>汉字查询</p>
40<pre><code class="language-js">zidian.<span class="hljs-title function_">equalWord</span>(key)
41zidian.<span class="hljs-title function_">equalWord</span>(<span class="hljs-string">"爱"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
42</code></pre>
43 <p>词语查询</p>
44<pre><code class="language-js">zidian.<span class="hljs-title function_">equalCi</span>(key)
45zidian.<span class="hljs-title function_">equalCi</span>(<span class="hljs-string">"美丽"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
46</code></pre>
47 <p>成语查询</p>
48<pre><code class="language-js">zidian.<span class="hljs-title function_">equalIdiom</span>(key)
49zidian.<span class="hljs-title function_">equalIdiom</span>(<span class="hljs-string">"叶公好龙"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
50</code></pre>
51 <p>词语模糊搜索</p>
52<pre><code class="language-js">zidian.<span class="hljs-title function_">likeCi</span>(key)
53zidian.<span class="hljs-title function_">likeCi</span>(<span class="hljs-string">"美"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
54</code></pre>
55 <p>成语模糊搜索</p>
56<pre><code class="language-js">zidian.<span class="hljs-title function_">likeIdiom</span>(key)
57zidian.<span class="hljs-title function_">likeIdiom</span>(<span class="hljs-string">"三百"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
58</code></pre>
59 <h3>说明</h3>
60 <ul>
61 <li>接口查询返回一个 <code>Promise</code> 对象</li>
62 <li>查询的接口会缓存到 <code>zidian.cache</code> 对象</li>
63 <li>查询无记录时，返回 <code>null</code></li>
64 <li><code>zidian.config.host</code> 可配置请求源</li>
65 </ul>
66 </div>
67 </div>
68
69 <hr class="my-5" />
70
71 <div class="row">
72 <div class="col-md-12">
73
74 <div class="input-group">
75 <span class="input-group-text">汉字</span>
76 <input class="form-control" id="txt1" placeholder="输入一个汉字，如：爱" maxlength="1" />
77 </div>
78
79 <div class="input-group my-3">
80 <span class="input-group-text">词语</span>
81 <input class="form-control" id="txt2" placeholder="输入一个词语，如：美丽" maxlength="20" />
82 </div>
83
84 <div class="input-group">
85 <span class="input-group-text">成语</span>
86 <input class="form-control" id="txt3" placeholder="输入一个成语，如：一言既出，驷马难追" maxlength="20" />
87 </div>
88
89 <textarea id="res" class="form-control w-100 my-3" rows="15" placeholder="输出结果"></textarea>
90
91 <div class="input-group">
92 <span class="input-group-text">词语 模糊搜索</span>
93 <input class="form-control" id="txt4" placeholder="输入一个词语的关键字" maxlength="20" />
94 </div>
95
96 <div class="input-group my-3">
97 <span class="input-group-text">成语 模糊搜索</span>
98 <input class="form-control" id="txt5" placeholder="输入一个成语的关键字" maxlength="20" />
99 </div>
100 </div>
101 </div>
102 </div>
103
104 <script src="dist/zidian.js"></script>
105
106 <script>
107
108 function iszhcn(s) {
109 return escape(s).indexOf("%u") >= 0;
110 }
111
112 //zidian.config.host = "https://unpkg.com/zidian@0.0.2";
113
114 var res = document.getElementById('res');
115
116 document.getElementById('txt1').addEventListener('input', function () {
117 var key = this.value.trim();
118 if (key == "") {
119 res.value = "";
120 } else if (iszhcn(key[0])) {
121 zidian.equalWord(key[0]).then(function (info) {
122 res.value = info ? JSON.stringify(info, null, 4) : "无记录";
123 })
124 } else {
125 res.value = "请输入中文";
126 }
127 }, false);
128
129 document.getElementById('txt2').addEventListener('input', function () {
130 var key = this.value.trim();
131 if (key == "") {
132 res.value = "";
133 } else if (iszhcn(key)) {
134 zidian.equalCi(key).then(function (info) {
135 res.value = info ? JSON.stringify(info, null, 4) : "无记录";
136 })
137 } else {
138 res.value = "请输入一个词语";
139 }
140 }, false);
141
142 document.getElementById('txt3').addEventListener('input', function () {
143 var key = this.value.trim();
144 if (key == "") {
145 res.value = "";
146 } else if (iszhcn(key)) {
147 zidian.equalIdiom(key).then(function (info) {
148 res.value = info ? JSON.stringify(info, null, 4) : "无记录";
149 })
150 } else {
151 res.value = "请输入一个成语";
152 }
153 }, false);
154
155 document.getElementById('txt4').addEventListener('input', function () {
156 var key = this.value.trim();
157 if (key == "") {
158 res.value = "";
159 } else if (iszhcn(key)) {
160 zidian.likeCi(key).then(function (info) {
161 res.value = info ? JSON.stringify(info, null, 4) : "无记录";
162 })
163 } else {
164 res.value = "请输入一个词语的关键字";
165 }
166 }, false);
167
168
169 document.getElementById('txt5').addEventListener('input', function () {
170 var key = this.value.trim();
171 if (key == "") {
172 res.value = "";
173 } else if (iszhcn(key)) {
174 zidian.likeIdiom(key).then(function (info) {
175 res.value = info ? JSON.stringify(info, null, 4) : "无记录";
176 })
177 } else {
178 res.value = "请输入一个成语的关键字";
179 }
180 }, false);
181 </script>
182
183</body>
184</html>
\No newline at end of file