{"id":1672,"date":"2024-04-06T12:01:16","date_gmt":"2024-04-06T04:01:16","guid":{"rendered":"https:\/\/www.martingrocery.top\/?p=1672"},"modified":"2024-04-13T14:10:48","modified_gmt":"2024-04-13T06:10:48","slug":"typewriter","status":"publish","type":"post","link":"https:\/\/www.martingrocery.top\/index.php\/typewriter","title":{"rendered":"typewriter.js &#8211; \u6253\u5b57\u673a\u6548\u679cJavaScript\u5e93"},"content":{"rendered":"<p>\u4ed3\u5e93\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/martinSCS\/typewriter\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/martinSCS\/typewriter<\/a><\/p>\n<p><code>typewriter.js<\/code>\u662f\u4e00\u4e2a\u7528\u4e8e\u5728\u7f51\u9875\u4e0a\u521b\u5efa\u6253\u5b57\u673a\u6548\u679c\u7684\u8f7b\u91cf\u7ea7JavaScript\u5e93\u3002\u5b83\u53ef\u4ee5\u6a21\u62df\u6587\u672c\u7684\u9010\u5b57\u6253\u5370\u548c\u5220\u9664\u6548\u679c\uff0c\u9002\u7528\u4e8e\u7f51\u7ad9\u7684\u6807\u9898\u3001\u4ecb\u7ecd\u6216\u4efb\u4f55\u9700\u8981\u52a8\u6001\u6587\u672c\u6548\u679c\u7684\u5730\u65b9\u3002<\/p>\n<h2>\u7279\u70b9<\/h2>\n<ul>\n<li><strong>\u81ea\u5b9a\u4e49\u901f\u5ea6<\/strong>\uff1a\u53ef\u4ee5\u81ea\u5b9a\u4e49\u6253\u5b57\u901f\u5ea6\u548c\u5220\u9664\u901f\u5ea6\u3002<\/li>\n<li><strong>\u6682\u505c\u65f6\u95f4<\/strong>\uff1a\u53ef\u4ee5\u5206\u522b\u8bbe\u7f6e\u6253\u5b57\u548c\u5220\u9664\u540e\u7684\u6682\u505c\u65f6\u95f4\u3002<\/li>\n<li><strong>\u5faa\u73af\u64ad\u653e<\/strong>\uff1a\u652f\u6301\u6587\u672c\u7684\u5faa\u73af\u64ad\u653e\u3002<\/li>\n<li><strong>\u8def\u7531\u5b57\u5178\u548c\u8def\u7531\u6620\u5c04<\/strong>\uff1a\u652f\u6301\u901a\u8fc7\u8def\u7531\u5b57\u5178\u548c\u8def\u7531\u6620\u5c04\u6765\u5b9e\u73b0\u590d\u6742\u7684\u6253\u5b57\u6548\u679c\u3002<\/li>\n<\/ul>\n<h2>\u4f7f\u7528\u65b9\u6cd5<\/h2>\n<ol>\n<li>\n<p>\u5728HTML\u6587\u4ef6\u4e2d\u5f15\u5165<code>typewriter.js<\/code>\u5e93\uff1a<\/p>\n<pre><span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">script<\/span> <span class=\"pl-c1\">src<\/span>=\"<span class=\"pl-s\">path\/to\/typewriter.js<\/span>\"<span class=\"pl-kos\">&gt;<\/span><span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">script<\/span><span class=\"pl-kos\">&gt;<\/span><\/pre>\n<\/li>\n<li>\n<p>\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u663e\u793a\u6253\u5b57\u6548\u679c\u7684\u5143\u7d20\uff1a<\/p>\n<pre><span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">div<\/span> <span class=\"pl-c1\">id<\/span>=\"<span class=\"pl-s\">typewriter<\/span>\"<span class=\"pl-kos\">&gt;<\/span><span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">div<\/span><span class=\"pl-kos\">&gt;<\/span><\/pre>\n<\/li>\n<li>\n<p>\u521d\u59cb\u5316<code>Typewriter<\/code>\u5bf9\u8c61\u5e76\u5f00\u59cb\u6253\u5b57\u6548\u679c\uff1a<\/p>\n<pre><span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">typewriter<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-v\">Typewriter<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-smi\">document<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">getElementById<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">'typewriter'<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'Hello, World!'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'Welcome to my website!'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span><\/pre>\n<\/li>\n<\/ol>\n<h2>\u914d\u7f6e\u53c2\u6570<\/h2>\n<p><code>Typewriter<\/code>\u6784\u9020\u51fd\u6570\u63a5\u53d7\u4ee5\u4e0b\u53c2\u6570\uff1a<\/p>\n<ul>\n<li><code>element<\/code>: \u8981\u663e\u793a\u6587\u672c\u7684DOM\u5143\u7d20\u3002<\/li>\n<li><code>texts<\/code>: \u8981\u6253\u5370\u7684\u6587\u672c\u6570\u7ec4\u3002<\/li>\n<li><code>typingSpeed<\/code> <strong>(\u53ef\u9009)<\/strong>: \u6253\u5b57\u901f\u5ea6\uff08\u6beb\u79d2\/\u5b57\u7b26\uff09\uff0c\u9ed8\u8ba4\u4e3a100\u3002<\/li>\n<li><code>deletingSpeed<\/code> <strong>(\u53ef\u9009)<\/strong>: \u5220\u9664\u901f\u5ea6\uff08\u6beb\u79d2\/\u5b57\u7b26\uff09\uff0c\u9ed8\u8ba4\u4e3a50\u3002<\/li>\n<li><code>typingPauseTime<\/code> <strong>(\u53ef\u9009)<\/strong>: \u6253\u5b57\u540e\u7684\u6682\u505c\u65f6\u95f4\uff08\u6beb\u79d2\uff09\uff0c\u9ed8\u8ba4\u4e3a2000\u3002<\/li>\n<li><code>deletingPauseTime<\/code> <strong>(\u53ef\u9009)<\/strong>: \u5220\u9664\u540e\u7684\u6682\u505c\u65f6\u95f4\uff08\u6beb\u79d2\uff09\uff0c\u9ed8\u8ba4\u4e3a0\u3002<\/li>\n<li><code>routeDict<\/code> <strong>(\u53ef\u9009)<\/strong>: \u8def\u7531\u5b57\u5178\uff0c\u7528\u4e8e\u5b9a\u4e49\u7279\u6b8a\u5b57\u7b26\u7684\u6253\u5b57\u8def\u5f84\u3002<\/li>\n<li><code>routeMap<\/code> <strong>(\u53ef\u9009)<\/strong>: \u8def\u7531\u6620\u5c04\uff0c\u7528\u4e8e\u6307\u5b9a\u6587\u672c\u4e2d\u7279\u5b9a\u4f4d\u7f6e\u5b57\u7b26\u7684\u8def\u7531\u8def\u5f84\u3002<\/li>\n<\/ul>\n<h2>\u793a\u4f8b<\/h2>\n<pre><span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">typewriter<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-v\">Typewriter<\/span><span class=\"pl-kos\">(<\/span>\n    <span class=\"pl-s1\">element<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-smi\">document<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">getElementById<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">'typewriter'<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">texts<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'Hello, World!'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'Welcome to my website!'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">typingSpeed<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-c1\">100<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">deletingSpeed<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-c1\">50<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">typingPauseTime<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-c1\">2000<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">deletingPauseTime<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-c1\">500<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">routeDict<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span><span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">routeMap<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span><span class=\"pl-kos\">}<\/span>\n<span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span><\/pre>\n<p>\u4ee5\u4e0a\u4ee3\u7801\u4f1a\u5728 <code>#typewriter<\/code> \u5143\u7d20\u4e2d\u521b\u5efa\u4e00\u4e2a\u6253\u5b57\u673a\u6548\u679c\uff0c\u4f9d\u6b21\u6253\u5370\u201cHello, World!\u201d\u548c\u201cWelcome to my website!\u201d\uff0c\u6bcf\u4e2a\u5b57\u7b26\u7684\u6253\u5b57\u901f\u5ea6\u4e3a1\u5b57\u6bcf100\u6beb\u79d2\uff0c\u5220\u9664\u901f\u5ea6\u4e3a1\u5b57\u6bcf50\u6beb\u79d2\uff0c\u6253\u5b57\u540e\u6682\u505c2\u79d2\uff082,000\u6beb\u79d2\uff09\uff0c\u5220\u9664\u540e\u6682\u505c0.5\u79d2\uff08500\u6beb\u79d2\uff09\u3002<\/p>\n<h2><code>routeDict<\/code> \u548c <code>routeMap<\/code> \u7684\u4f7f\u7528\u65b9\u6cd5<\/h2>\n<h3><code>routeDict<\/code> \u7684\u4f7f\u7528\u65b9\u6cd5<\/h3>\n<p><code>routeDict<\/code> \u662f <code>Typewriter<\/code> \u7c7b\u4e2d\u7528\u4e8e\u5b9a\u4e49\u7279\u6b8a\u5b57\u7b26\u7684\u6253\u5b57\u8def\u5f84\u7684\u4e00\u4e2a\u5bf9\u8c61\u3002\u5f53\u4f60\u9700\u8981\u5728\u6253\u5b57\u6548\u679c\u4e2d\u5305\u542b\u7279\u5b9a\u7684\u5b57\u7b26\u7ec4\u5408\u6216\u8005\u5728\u7279\u5b9a\u7684\u5b57\u7b26\u4e0a\u5e94\u7528\u7279\u6b8a\u7684\u6253\u5b57\u6548\u679c\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528 <code>routeDict<\/code> \u6765\u5b9e\u73b0\u3002<code>routeDict<\/code> \u4e5f\u53ef\u4ee5\u8bbe\u7f6e\u6253\u5b57\u673a\u6548\u679c\u6a21\u62df\u4e1c\u4e9a\u6587\u5b57\u7684\u952e\u5165\u8fc7\u7a0b\u3002<\/p>\n<p>\u4ee5\u201c<span lang=\"zh-cn\">\u72b6<\/span>\u201d\uff08\u4e2d\u6587\uff09\u3001\u201c<span lang=\"ja-jp\">\u5507<\/span>\u201d\uff08\u65e5\u6587\uff09\u3001\u201c<span lang=\"ko\">\ud55c<\/span>\u201d\uff08\u671d\u9c9c\u6587\uff09\u4e3a\u4f8b\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u5b9a\u4e49 <code>routeDict<\/code> \u6765\u63a7\u5236\u8fd9\u4e9b\u5b57\u7b26\u7684\u6253\u5b57\u8def\u5f84\uff0c\u4f7f\u5f97\u5b83\u4eec\u4ee5\u7279\u5b9a\u7684\u65b9\u5f0f\u9010\u6b65\u51fa\u73b0\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a<\/p>\n<pre><span class=\"pl-s1\">texts<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">[<\/span>\n    <span class=\"pl-s\">'\u72b6'<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-s\">'\u5507'<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-s\">'\ud55c'<\/span>\n<span class=\"pl-kos\">]<\/span>\n\n<span class=\"pl-s1\">routeDict<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span>\n    <span class=\"pl-s\">'\u72b6'<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'z'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zh'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zhu'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zhua'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zhuan'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zhuang'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u72b6'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-s\">'\u5507'<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u304f'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u304f\u3061'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u304f\u3061\u3073'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u304f\u3061\u3073\u308b'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u5507'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-s\">'\ud55c'<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u314e'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\ud558'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\ud55c'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">]<\/span>\n<span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">;<\/span>\n\n<span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">typewriter<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-v\">Typewriter<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-smi\">document<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">querySelector<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">'#typewriter'<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s1\">texts<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">texts<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s1\">routeDict<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">routeDict<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span><\/pre>\n<p>\u8fd9\u6837\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5f97\u5230\u8fd9\u6837\u7684\u6548\u679c<\/p>\n<figure>\n  <img decoding=\"async\" src=\"https:\/\/www.martingrocery.top\/wp-content\/uploads\/2024\/04\/type.gif\" alt=\"\u4e09\u4e2a\u5b57\u7684\u6253\u5b57\u6548\u679c\"><figcaption>\u56fe 1 - \u4e09\u4e2a\u5b57\u7684\u8f93\u51fa\u6548\u679c<\/figcaption><\/figure>\n<h3><code>routeMap<\/code> \u7684\u4f7f\u7528\u65b9\u6cd5<\/h3>\n<p><code>routeMap<\/code> \u662f<code>Typewriter<\/code>\u7c7b\u4e2d\u7528\u4e8e\u6307\u5b9a\u6587\u672c\u4e2d\u7279\u5b9a\u4f4d\u7f6e\u5b57\u7b26\u7684\u8def\u7531\u8def\u5f84\u7684\u4e00\u4e2a\u5bf9\u8c61\u3002\u5b83\u5141\u8bb8\u4f60\u5bf9\u540c\u4e00\u4e2a\u5b57\u7b26\u5728\u4e0d\u540c\u4f4d\u7f6e\u6709\u4e0d\u540c\u7684\u6253\u5b57\u8def\u5f84\uff0c\u8fd9\u5728\u5904\u7406\u591a\u79cd\u8bed\u8a00\u6216\u7279\u6b8a\u6253\u5b57\u6548\u679c\u65f6\u975e\u5e38\u6709\u7528\u3002<\/p>\n<p>\u5bf9\u4e8e\u4e2d\u6587\u548c\u65e5\u6587\uff0c\u540c\u4e00\u4e2a\u5b57\u5728\u4e0d\u540c\u60c5\u51b5\u4e0b\u53ef\u80fd\u4f1a\u6709\u4e0d\u540c\u7684\u952e\u5165\u65b9\u5f0f\u3002\u8b6c\u5982\uff0c\u4e2d\u6587\u7684\u201c\u957f\u201d\u5728\u4e0d\u540c\u7684\u60c5\u51b5\u4e0b\u4f1a\u6709\u201cchang\u201d\u548c\u201czhang\u201d\u4e24\u79cd\u952e\u5165\u65b9\u5f0f\uff0c\u65e5\u6587\u7684\u201c\u9ad8\u201d\u5728\u4e0d\u540c\u7684\u60c5\u51b5\u4e0b\u4e5f\u6709\u201c<span lang=\"ja\">\u3053\u3046<\/span>\u201d\uff08<span lang=\"ja\">\u9ad8\u6821<\/span>\uff09\u548c\u201c<span lang=\"ja\">\u305f\u304b<\/span>\u201d\uff08<span lang=\"ja\">\u9ad8\u3044<\/span>\uff09\u4e24\u79cd\u952e\u5165\u65b9\u5f0f\u3002<\/p>\n<p>\u5982\u679c\u4e24\u79cd\u952e\u5165\u65b9\u5f0f\u4f1a\u5728\u540c\u4e00\u4e2a\u6253\u5b57\u673a\u6548\u679c\u4e2d\u51fa\u73b0\uff0c\u90a3\u4e48\u6211\u4eec\u5c31\u53ef\u4ee5\u8bbe\u5b9a <code>routeMap<\/code>\uff0c\u6765\u5b9e\u73b0\u4e0d\u540c\u60c5\u51b5\u4e0b\u6587\u5b57\u7684\u952e\u5165\u65b9\u5f0f\u3002<\/p>\n<p>\u6bd4\u5982\u4ee5\u4e0b\u4f8b\u53e5\uff1a<\/p>\n<ul>\n<li><span lang=\"ja\"><span class=\"ruby-group\"><span class=\"base\">\u9ad8<\/span><span class=\"tag\">\u305f\u304b<\/span><\/span><span class=\"ruby-group\"><span class=\"base\">\u6728<\/span><span class=\"tag\">\u304e<\/span><\/span>\u3055\u3093\u306f\u3053\u306e<span class=\"ruby-group\"><span class=\"base\">\u9ad8<\/span><span class=\"tag\">\u3053\u3046<\/span><\/span><span class=\"ruby-group\"><span class=\"base\">\u6821<\/span><span class=\"tag\">\u3053\u3046<\/span><\/span>\u306e<span class=\"ruby-group\"><span class=\"base\">\u751f<\/span><span class=\"tag\">\u305b\u3044<\/span><\/span><span class=\"ruby-group\"><span class=\"base\">\u5f92<\/span><span class=\"tag\">\u3068<\/span><\/span>\u3067\u3059\u3002<\/span><\/li>\n<li><span lang=\"zh-cn\">\u5934\u53d1<span class=\"ruby-group\"><span class=\"base\">\u957f<\/span><span class=\"tag\">zh\u01ceng<\/span><\/span>\u5f97\u8d8a\u6765\u8d8a<span class=\"ruby-group\"><span class=\"base\">\u957f<\/span><span class=\"tag\">ch\u00e1ng<\/span><\/span>\u4e86\u3002<\/span><\/li>\n<\/ul>\n<p>\u6211\u4eec\u53ef\u4ee5\u5c06 <code>routeDict<\/code> \u548c <code>routeMap<\/code> \u8bbe\u5b9a\u4e3a\u5982\u4e0b\u72b6\u6001\uff1a<\/p>\n<pre><span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">texts<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">[<\/span>\n    <span class=\"pl-s\">'\u9ad8\u6728\u3055\u3093\u306f\u3053\u306e\u9ad8\u6821\u306e\u751f\u5f92\u3067\u3059\u3002'<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-s\">'\u5934\u53d1\u957f\u5f97\u8d8a\u6765\u8d8a\u957f\u4e86\u3002'<\/span>\n<span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">;<\/span>\n            \n<span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">routeDict<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span>\n    <span class=\"pl-s\">'\u957f'<\/span>: <span class=\"pl-kos\">[<\/span>\n        <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'c'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'ch'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'cha'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'chan'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'chang'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u957f'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n        <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'z'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zh'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zha'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zhan'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'zhang'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u957f'<\/span><span class=\"pl-kos\">]<\/span>\n    <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s\">'\u9ad8'<\/span>: <span class=\"pl-kos\">[<\/span>\n        <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u3053'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u3053\u3046'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u9ad8'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n        <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u305f'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u305f\u304b'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u9ad8'<\/span><span class=\"pl-kos\">]<\/span>\n    <span class=\"pl-kos\">]<\/span>\n<span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">;<\/span>\n            \n<span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">routeMap<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span>\n    <span class=\"pl-s\">'0,0'<\/span>: <span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-s\">'7,0'<\/span>: <span class=\"pl-c1\">0<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s\">'2,1'<\/span>: <span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s\">'7,1'<\/span>: <span class=\"pl-c1\">0<\/span>\n<span class=\"pl-kos\">}<\/span>\n            \n<span class=\"pl-k\">const<\/span> <span class=\"pl-s1\">typewriter<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-v\">Typewriter<\/span><span class=\"pl-kos\">(<\/span>\n    <span class=\"pl-s1\">element<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-smi\">document<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">querySelector<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">'#typewriter'<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">texts<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">texts<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-c1\">100<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c1\">50<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c1\">2000<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c1\">0<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">routeDict<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">routeDict<\/span><span class=\"pl-kos\">,<\/span> \n    <span class=\"pl-s1\">routeMap<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s1\">routeMap<\/span>\n<span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span><\/pre>\n<p>\u8fd9\u6837\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5f97\u5230\u540c\u4e00\u4e2a\u5b57\u5728\u4e0d\u540c\u60c5\u51b5\u4e0b\u4ee5\u4e0d\u540c\u952e\u5165\u65b9\u5f0f\u51fa\u73b0\u7684\u6548\u679c<\/p>\n<figure>\n  <img decoding=\"async\" src=\"https:\/\/www.martingrocery.top\/wp-content\/uploads\/2024\/04\/type_1.gif\" alt=\"\u4e24\u53e5\u8bdd\u7684\u6253\u5b57\u6548\u679c\"><figcaption>\u56fe 2 - \u4e24\u53e5\u8bdd\u7684\u8f93\u51fa\u6548\u679c<\/figcaption><\/figure>\n<p><code>routeMap<\/code> \u7684\u952e\u7531\u4e24\u90e8\u5206\u7ec4\u6210\uff0c\u5e76\u4e14\u4ee5\u5355\u4e2a\u534a\u89d2\u9017\u53f7\u201c<code>,<\/code>\u201d\u5206\u5272\u3002\u9017\u53f7\u4e24\u4fa7\u7684\u6570\u5b57\u786e\u5b9a\u4e86\u6240\u9700\u8981\u7279\u6b8a\u5904\u7406\u7684\u5b57\u7684\u5750\u6807\u3002\u9017\u53f7\u5de6\u4fa7\u7684\u6570\u5b57\u662f\u8be5\u5b57\u5728\u53e5\u5b50\u4e2d\u7684\u4f4d\u7f6e\uff08\u4ee5\u4e0b\u6807 0 \u4e3a\u8d77\u59cb\u8ba1\u7b97\uff09\uff0c\u9017\u53f7\u53f3\u4fa7\u662f\u53e5\u5b50\u5728 <code>texts<\/code> \u4e2d\u7684\u4f4d\u7f6e\uff08\u4ee5\u4e0b\u6807 0 \u4e3a\u8d77\u59cb\u8ba1\u7b97\uff09\u3002\u6bd4\u5982\uff0c\u952e <code>&quot;3,1&quot;<\/code> \u8868\u793a\u5bf9 <code>texts[1]<\/code> \u7684\u7b2c3+1\u4e2a\u5b57\uff08\u5373 <code>texts[1].charAt(3)<\/code>\uff09\u8fdb\u884c\u7279\u6b8a\u5904\u7406\u3002 <code>routeMap<\/code> \u7684\u7684\u503c\u4e3a\u4e00\u4e2a\u6574\u5f62\uff0c\u5bf9\u5e94\u7684\u662f <code>routeDict<\/code> \u4e2d\u503c\u90e8\u5206\u7684\u4e0b\u6807\u3002\u6bd4\u5982 <code>&#039;7,1&#039;: 0<\/code> \u6307\u7684\u662f\u201c\u7b2c 2\uff081+1\uff09\u53e5\u8bdd\u7684\u7b2c 8\uff087+1\uff09\u4e2a\u5b57\u7684\u7ec4\u6210\u65b9\u5f0f\u53d6 <code>route<\/code> \u6570\u7ec4\u4e2d\u7b2c 1\uff080+1\uff09\u4e2a\u201d\u3002<\/p>\n<h2><code>texts<\/code> \u7684\u6269\u5c55\u4f7f\u7528\u65b9\u6cd5<\/h2>\n<p><code>texts<\/code> \u662f\u4e00\u4e2a\u5b58\u50a8\u4e86\u6253\u5b57\u673a\u9700\u8981\u5faa\u73af\u6253\u5370\u7684\u53e5\u5b50\u7684\u6570\u7ec4\u3002<code>texts<\/code> \u4e2d\u7684\u5143\u7d20\u901a\u5e38\u4e3a\u5b57\u7b26\u4e32\u3002\u4f46\u662f\u4e5f\u53ef\u4ee5\u4e3a\u6570\u7ec4\u3002<\/p>\n<p><code>texts<\/code> \u7684\u4e00\u4e2a\u5143\u7d20\u4e3a\u6570\u7ec4\u65f6\uff0c\u610f\u5473\u7740\u8be5\u5b50\u6570\u7ec4\u4e2d\u7684\u5404\u4e2a\u5143\u7d20\u5c06\u4ee5\u6574\u4f53\u5728 <code>routeDict<\/code> \u4e2d\u5bfb\u627e <code>route<\/code>\u3002\u6bd4\u5982\u5bf9\u4e8e<\/p>\n<pre><span class=\"pl-s1\">texts<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">[<\/span>\n  <span class=\"pl-kos\">[<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u7ae0\u9b5a'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u3092'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u98df'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u3079'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u308b'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n  <span class=\"pl-kos\">[<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u6d77\u8001'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u3092'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u8cb7'<\/span><span class=\"pl-kos\">,<\/span><span class=\"pl-s\">'\u3046'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">]<\/span>\n<span class=\"pl-kos\">]<\/span><\/pre>\n<p>\u82e5\u4e0d\u8bbe\u5b9a <code>routeDict<\/code>\uff0c\u90a3\u4e48\u201c<span lang='ja'>\u7ae0\u9b5a<\/span>\u201d\u548c\u201c<span lang='ja'>\u6d77\u8001<\/span>\u201d\u5c06\u4f1a\u4ee5\u6574\u4f53\u7684\u5f62\u5f0f\u4e00\u9f50\u51fa\u73b0\uff0c\u800c\u4e0d\u662f\u4e24\u5b57\u5206\u5f00\u51fa\u73b0\u3002<\/p>\n<p>\u82e5\u8bbe\u5b9a <code>routeDict<\/code> \u5982\u4e0b\uff1a<\/p>\n<pre><span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">routeDict<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">{<\/span>\n  <span class=\"pl-s\">'\u7ae0\u9b5a'<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u305f'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u305f\u3053'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u7ae0\u9b5a'<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n  <span class=\"pl-s\">'\u6d77\u8001'<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-s\">'\u3048'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u3048\u3073'<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">'\u6d77\u8001'<\/span><span class=\"pl-kos\">]<\/span>\n<span class=\"pl-kos\">}<\/span><\/pre>\n<p>\u5219\u4f1a\u4ee5<span lang=\"ja\">\u305f\u2192\u305f\u3053\u2192\u7ae0\u9b5a<\/span>\u548c<span lang=\"ja\">\u3048\u2192\u3048\u3073\u2192\u6d77\u8001<\/span>\u7684\u987a\u5e8f\u6253\u51fa\u6765\u3002<\/p>\n<div style=\"display: flex; justify-content: center; align-items: center; margin-bottom: 3rem; margin-top: 3rem;\">\n<div style=\"width: 350px; background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 20px;\">\n<div style=\"width: 80px; height: 80px; background-color: #4CAF50; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 10px;\">\n            <img decoding=\"async\" src=\"https:\/\/www.martingrocery.top\/wp-content\/uploads\/2024\/04\/avatar.jpg\" style=\"border-radius: 50%\">\n        <\/div>\n<div class=\"intro\">\n<h1 style=\"margin: 0; font-size: 24px; color: #333;text-align: center\">\u6742\u8d27\u94fa\u7684Martin<\/h1>\n<p style=\"margin: 5px 0; font-size: 14px; color: #666;text-align: center\">\u5927\u5b66\u751f | \u4e1a\u4f59 Web \u5f00\u53d1\u8005 | \u5b57\u4f53\u7231\u597d\u8005<\/p>\n<p style=\"margin: 5px 0; font-size: 14px; color: #666;\">\u6d53\u539a\u7684\u5174\u8da3\uff0c\u662f\u652f\u6491\u81ea\u5df1\u4e0d\u65ad\u5b66\u4e60\u7684\u52a8\u529b\u3002<\/p>\n<hr style=\"border-color: grey; margin-top: 1rem; margin-bottom: 1rem\"\/>\n<p style=\"margin: 5px 0; font-size: 14px; color: #666;text-align: center\">\n            E-mail: <a href=\"mailto:me@martingrocery.top\">me@martingrocery.top<\/a><br \/>\n            Blog: <a href=\"https:\/\/www.martingrocery.top\">https:\/\/www.martingrocery.top<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u4ed3\u5e93\u5730\u5740\uff1ahttps:\/\/git&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1672","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/posts\/1672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/comments?post=1672"}],"version-history":[{"count":11,"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/posts\/1672\/revisions"}],"predecessor-version":[{"id":1729,"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/posts\/1672\/revisions\/1729"}],"wp:attachment":[{"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/media?parent=1672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/categories?post=1672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.martingrocery.top\/index.php\/wp-json\/wp\/v2\/tags?post=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}