UNPKG

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