{"@attributes":{"version":"2.0"},"channel":{"title":"html on \u6021\u7ea2\u9662\u843d","link":"https:\/\/imnerd.org\/tags\/html.html","description":"Recent content in html on \u6021\u7ea2\u9662\u843d","language":"zh-CN","copyright":"\u00a9 2021","lastBuildDate":"Sat, 16 Nov 2013 20:23:00 +0800","item":[{"title":"OriginalEditor 1.0.1 for Typecho 0.9 - \u8ba9Typecho\u56de\u5f52HTML\u6a21\u5f0f","link":"https:\/\/imnerd.org\/originaleditor-plugin-for-typecho.html","pubDate":"2013-08-16","guid":"https:\/\/imnerd.org\/originaleditor-plugin-for-typecho.html","description":"Typecho\u5347\u7ea7\u52300.9\u6539\u7528Markdown\u4f5c\u4e3a\u7f16\u8f91\u5668\u662f\u4e00\u4ef6\u4ee4\u4eba\u9ad8\u5174\u7684\u4e8b\u60c5\u3002\u4f46\u662f\u6709\u4e9b\u4e8b\u60c5\u603b\u662f\u4e0d\u80fd\u4e24\u5168\u5176\u7f8e\uff0c\u4e00\u90e8\u5206\u4eba\u6b63\u5728\u9ad8\u5174\u7684\u540c\u65f6\uff0c\u4e5f\u6709\u4e00\u5c0f\u64ae\u540c\u5fd7\u5728\u57cb\u6028Markdown\u7f16\u8f91\u5668\u600e\u4e48\u600e\u4e48\u4e0d\u597d\u7528\uff0c\u600e\u4e48\u600e\u4e48\u96be\u7528\uff0c\u600e\u4e48\u600e\u4e48\u591a\u7684BUG\u3002\u4ecb\u4e8e\u5b98\u65b9\u4f17\u53e3\u96be\u8c03\u7684\u60c5\u51b5\uff0c\u6211\u5c31\u7b54\u5e94\u8bba\u575b\u7684@sujianlin \u505a\u4e86\u8fd9\u6b3e\u63d2\u4ef6\u3002\n\u63d2\u4ef6\u7684\u4f5c\u7528\u63d2\u4ef6\u540d\u5b57\u5df2\u7ecf\u8868\u8fbe\u7684\u975e\u5e38\u660e\u767d\u4e86\uff1a\u8ba9\u7f16\u8f91\u5668\u56de\u5f52\u539f\u59cb\u3002\u8bf4\u767d\u4e86\u5c31\u662f\u53bb\u9664\u4e860.9\u7248\u7684Markdown\u7f16\u8f91\u5668\uff08\u5305\u62ec\u540e\u53f0\u7684\u7f16\u8f91\u5668\u548c\u524d\u53f0\u7f51\u9875\u7684\u89e3\u6790\uff09\uff0c\u56de\u52300.8\u4ee5\u524d\u7684HTML MODEL\u3002\u63d2\u4ef6\u6ca1\u6709\u591a\u505a\u6d4b\u8bd5\uff0c\u5982\u679c\u6709\u95ee\u9898\u7684\u8bdd\u8bf7\u53ca\u65f6\u53cd\u9988\u3002\n\u6700\u540e\u8bf4\u4e00\u53e5\uff0c\u6211\u7231Markdown\uff0c\u4f60\u4eec\u6839\u672c\u4e0d\u77e5\u9053Markdown\u914d\u4e0a\u5feb\u6377\u952e\u662f\u6709\u591a\u4e48\u7684\u597d\u7528\uff01\u4ee5\u4e0a\uff01\ntoc: true authors: [&rsquo;lizheming'] \u672c\u63d2\u4ef6\u7d27\u6025\u5347\u7ea7\u81f31.0.1\u7248\uff0c\u4fee\u590d\u63d2\u4ef6\u65e0\u6cd5\u5b89\u88c5\u7684\u95ee\u9898\u3002\u5b9e\u8df5\u544a\u8bc9\u6211\u4eec\uff0c\u5343\u4e07\u522b\u624b\u8d31\u554a\uff01\n\u4e0b\u8f7d\u5730\u5740\uff1aBOX | \u767e\u5ea6\u4e91"},{"title":"PMBlog","link":"https:\/\/imnerd.org\/pmblog.html","pubDate":"2013-03-15","guid":"https:\/\/imnerd.org\/pmblog.html","description":" --\nPMBlog\u662f\u6211\u6700\u8fd1\u5199\u4e2a\u4e00\u4e2amarkdown\u9759\u6001\u5316\u8f93\u51fa\u7684\u5c0f\u7a0b\u5e8f\u3002\u76ee\u524d\u80fd\u591f\u5b9e\u73b0\u53d1\u5e03\u6587\u7ae0\u548c\u9875\u9762\uff0c\u81ea\u5b9a\u4e49\u6a21\u677f\u7b49\u57fa\u672c\u529f\u80fd\u3002\u867d\u7136PHP\u5e72\u8fd9\u6d3b\u53ef\u80fd\u4e9a\u5386\u5c71\u5927\uff0c\u4e0d\u8fc7PHP\u642d\u914d\u8d77\u6765\u7b80\u5355\u800c\u4e14\u505a\u4e2d\u5c0f\u578b\u535a\u5ba2\u7684\u8bdd\u5e94\u8be5\u662f\u6ca1\u6709\u95ee\u9898\u7684\u3002\n\u76ee\u524d\u66f4\u65b0\u52304.0\u7248\uff0c\u91c7\u7528\u6743\u9650\u7684\u6a21\u677f\u5f15\u64ceTwig\uff0c\u5e76\u66f4\u6362\u4ed3\u5e93\u5230Github\u4e0a\uff0c\u6b22\u8fce\u5927\u5bb6\u7ee7\u7eed\u4f7f\u7528\u3002\n\u5b98\u65b9\u7ad9\u70b9\uff1ahttp:\/\/lizheming.github.io\/PMBlog\n\u9879\u76ee\u5730\u5740\uff1ahttp:\/\/github.com\/lizheming\/PMBlog\n\u5b98\u65b9\u7ad9\u70b9\uff1ahttp:\/\/lizheming.gitcafe.com\n\u9879\u76ee\u5730\u5740\uff1aHTTPS:\/\/GitCafe.com\/lizheming\/PMBlog\n\u5b89\u88c5\u65b9\u6cd5\n\u642d\u914d\u672c\u5730PHP\u73af\u5883\n\u4e0b\u8f7d\u4ee3\u7801\u5e76\u4fee\u6539config.php\n\u8bbf\u95eeindex.php\u5373\u4f1a\u5728html\u76ee\u5f55\u751f\u6210\u9759\u6001\u6587\u4ef6\nMarkdown\u6587\u4ef6\u4e66\u5199\u89c4\u5219\n\u9ed8\u8ba4\u6587\u4ef6\u540d\u662f\u8f93\u51fa\u7684\u9759\u6001\u9875\u9762\u7684\u6587\u4ef6\u540d\uff0c\u5373'hello-world.md'\u5c06\u4f1a\u751f\u6210'hello-world.html'\u3002\u53e6\u5916\u4e0d\u63a8\u8350\u4f7f\u7528\u4e2d\u6587\u540d\u4f5c\u4e3a\u6587\u4ef6\u540d\u3002\nmarkdown(\u4ee5\u4e0b\u7b80\u79f0md\uff09\u6587\u4ef6\u652f\u6301\u4e00\u4e9b\u81ea\u5b9a\u4e49\u5b57\u6bb5\u3002\n\u6587\u4ef6\u5f00\u5934\u8f93\u5165\"title: Hello World\"\u5373\u53ef\u81ea\u5b9a\u4e49\u6587\u7ae0\u6807\u9898\u4e3a\"Hello World\"\uff08\u5fc5\u5199\u5b57\u6bb5\uff09\n\"date: 2013\u5e742\u670811\u65e5\"\u5373\u53ef\u81ea\u5b9a\u4e49\u6587\u7ae0\u53d1\u5e03\u65f6\u95f4\uff0c\u5982\u679c\u4e0d\u5b9a\u4e49\u6b64\u5b57\u6bb5\u7a0b\u5e8f\u4f1a\u8fd4\u56de\u6587\u4ef6\u7684\u521b\u5efa\u65f6\u95f4\u4e3a\u6587\u7ae0\u53d1\u5e03\u65f6\u95f4\uff08\u53ef\u9009\u5b57\u6bb5\uff09\n\"type: page\"\u5373\u53ef\u81ea\u5b9a\u4e49\u672c\u7bc7\u6587\u7ae0\u4e3a\u9875\u9762\uff0c\u6b64\u5b57\u6bb5\u53ea\u63a5\u53d7page\/post\u4e24\u4e2a\u53c2\u6570\uff0c\u4e0d\u5b9a\u4e49\u6b64\u5b57\u6bb5\u9ed8\u8ba4\u8fd4\u56de\u4e3apost\uff08\u53ef\u9009\u5b57\u6bb5\uff09\n\"status: draft\"\u5373\u53ef\u81ea\u5b9a\u4e49\u672c\u7bc7\u6587\u7ae0\u4e3a\u8349\u7a3f\uff0c\u5b9a\u4e49\u4e3a\u8349\u7a3f\u7684\u6587\u7ae0\u5c06\u4e0d\u88ab\u7a0b\u5e8f\u8f93\u51fa\u3002\u6b64\u5b57\u6bb5\u53ea\u63a5\u53d7draft\u4e00\u4e2a\u53c2\u6570\uff0c\u975e\u8be5\u53c2\u6570\u65e0\u6548\u3002\u4e0d\u5b9a\u4e49\u6b64\u5b57\u6bb5\u5219\u9ed8\u8ba4\u8be5\u6587\u7ae0\u4e3a\u53d1\u5e03\u72b6\u6001\uff08\u53ef\u9009\u5b57\u6bb5\uff09\n\"tags: tag1, tag2\"\u5373\u53ef\u81ea\u5b9a\u4e49\u8be5\u6587\u7ae0\u7684\u5173\u952e\u8bcd\uff0c\u5404\u4e2a\u5173\u952e\u8bcd\u4e4b\u95f4\u4f7f\u7528\u534a\u89d2\u9017\u53f7\u5206\u5f00\uff08\u53ef\u9009\u5b57\u6bb5\uff09\n\u4e5f\u5c31\u662f\u8bf4\u76ee\u524d\u6700\u7b80\u5355\u7684\u5199\u6cd5\u5c31\u662f\u53ea\u8981\u5b9a\u4e49\u4e00\u4e2a\"title:\"\u5b57\u6bb5\u7136\u540e\u5f00\u59cb\u6b63\u6587\u5c31\u597d\u4e86\u3002"},{"title":"\u521d\u63a2<audio>\u6807\u7b7e\u5b9e\u73b0\u540c\u6b65\u663e\u793a\u6b4c\u8bcd","link":"https:\/\/imnerd.org\/player-lyric-by-audio.html","pubDate":"2013-10-29","guid":"https:\/\/imnerd.org\/player-lyric-by-audio.html","description":"\u4eca\u5929\u7fa4\u91cc\u7684\u5c0f\u80d6\u8bf4\u7528&lt;audio&gt;\u6807\u7b7e\u5199\u4e86\u4e2a\u542c\u8bc4\u4e66\u7684\u7f51\u9875\u7ed9\u7236\u6bcd\u7528\uff0c\u6280\u672f\u5b9e\u5728\u662f\u4f4e\u7ea7\u771f\u5fc3\u975e\u5e38\u6709\u5b5d\u5fc3\u7684\u8bf4\uff01\u7136\u540e\u6211\u4e5f\u987a\u5e26\u53bb\u4e86\u89e3\u4e86\u4e00\u4e0baudio\u6807\u7b7e\u73b0\u5728\u7684\u652f\u6301\u60c5\u51b5\uff0c\u4e00\u4e0d\u5c0f\u5fc3\u5c31\u8111\u8865\u4e86\u4e00\u4e9b\u65b0\u77e5\u8bc6\u3002\u770b\u5230\u4e86audio\u6807\u7b7e\u6709duration\u5c5e\u6027\u548ccurrentTime\u5c5e\u6027\uff0c\u5206\u522b\u7528\u6765\u8bfb\u53d6\u6b4c\u66f2\u603b\u65f6\u95f4\u548c\u5f53\u524d\u64ad\u653e\u65f6\u95f4\uff0c\u6b63\u597d\u5f25\u8865\u4e86\u6211\u4e4b\u524d\u60f3\u5199\u64ad\u653e\u5668\u540c\u6b65\u663e\u793a\u6b4c\u8bcd\u4e00\u76f4\u5361\u5728\u7684\u5982\u4f55\u83b7\u53d6\u64ad\u653e\u65f6\u95f4\u7684\u95ee\u9898\u4e0a\u3002\u6240\u4ee5\u5c31\u5f00\u59cb\u64cd\u5200\u4e86\u3002\n\u6b4c\u66f2\u548c\u6b4c\u8bcd\u7684\u51c6\u5907 \u6211\u6682\u65f6\u662f\u5199\u5230\u4e86\u4e4b\u524d\u7684\u867e\u7c73\u641c\u7d22\u9875\u9762\u91cc\u9762\uff0c\u5b9e\u73b0\u641c\u7d22\u83b7\u5f97\u6b4c\u66f2\u7528audio\u6807\u7b7e\u64ad\u653e\u5e76\u663e\u793a\u6b4c\u8bcd\u3002\u6240\u4ee5\u6b4c\u66f2\u548c\u6b4c\u8bcd\u6587\u4ef6\u81ea\u7136\u5c31\u6765\u81ea\u76d7\u7248\u5e1d\u56fd\u867e\u7c73\u4e86\u3002\u7531\u4e8e\u867e\u7c73\u7684\u6b4c\u66f2\u6587\u4ef6\u90fd\u662fMP3\u683c\u5f0f\u7684\uff0c\u6240\u4ee5\u60b2\u5267\u5982FireFox\u7b49\u867d\u7136\u652f\u6301\u4e86HTML5\u4f46\u662f\u4e0d\u652f\u6301MP3\u683c\u5f0f\u7684\u6587\u4ef6\u8fd9\u8ba9\u6211\u4e5f\u662f\u611f\u5230\u5f88\u6349\u6025\u7684\uff0c\u6240\u4ee5\u6682\u65f6\u662f\u63a8\u8350\u5927\u5bb6\u4f7f\u7528Chrome\u6d4f\u89c8\u5668\u5236\u4f5c\u5e76\u8bbf\u95ee\u7684\u3002\u5173\u4e8e\u76ee\u524d\u5404\u6d4f\u89c8\u5668\u7684\u652f\u6301\u60c5\u51b5\u53ef\u4ee5\u770b\u8fd9\u91cc\uff1a\u5c45\u7136\u8fdeIE\u90fd\u652f\u6301\u4e86\uff01\u8fd9\u91cc\u5229\u7528\u4e86\u4e00\u4e0b\u867e\u7c73\u7684API\uff1ahttp:\/\/www.xiami.com\/song\/playlist\/id\/\u6b4c\u66f2ID \u83b7\u53d6\u6b4c\u66f2\u7684\u76f8\u5173\u4fe1\u606f\uff0c\u5176\u4e2d\u5c31\u6709\u6b4c\u66f2\u5730\u5740\u548c\u6b4c\u8bcd\u3002\u83b7\u53d6\u5230\u7684XML\u6587\u4ef6\u4e2d\uff0c\u6b4c\u66f2\u5730\u5740\u662f\u52a0\u5bc6\u653e\u7f6e\u7684\uff0c\u81f3\u4e8e\u89e3\u6790\u539f\u7406\uff0c\u5927\u5bb6\u53ef\u4ee5\u53c2\u89c1\u867e\u7c73\u97f3\u4e50\u6587\u4ef6\u7edd\u5bf9\u5730\u5740\u89e3\u6790\u3002\u8be6\u7ec6\u7684\u89e3\u91ca\u4e00\u4e0b\u5c31\u662f\uff1a\n\u83b7\u53d6\u5230\u7684\u5b57\u7b26\u4e32\u7b2c\u4e00\u4e2a\u5b57\u6bcd\u662f\u77e9\u9635\u7684\u884c\u6570\uff0c\u9664\u53bb\u7b2c\u4e00\u4e2a\u5b57\u6bcd\u7684\u5b57\u7b26\u603b\u6570\u9664\u4ee5\u884c\u6570\u5f97\u5230\u7684\u6574\u6570\u662f\u6bcf\u884c\u653e\u7f6e\u591a\u5c11\u4e2a\u5b57\u7b26\uff0c\u4f59\u6570\u5219\u662f\u524d\u4f59\u6570\u884c\u8981\u5728\u672b\u5c3e\u591a\u653e\u7f6e\u4e00\u4e2a\u5b57\u7b26\u3002\u8fd9\u6837\u5c31\u80fd\u7ec4\u6210\u5f15\u6587\u4e2d\u7684\u77e9\u9635\u4e86\u3002\u6309\u7167\u7ad6\u884c\u8bfb\u53d6\uff0c^\u66ff\u6362\u4e3a0\u7684\u5904\u7406\u540e\u5c31\u53ef\u4ee5\u83b7\u5f97\u7edd\u5bf9\u5730\u5740\u4e86\u3002\n\u61d2\u60f0\u5982\u6211\u4e3a\u4e86\u65b9\u4fbf\u81ea\u5df1\uff0c\u6211\u628a\u89e3\u6790\u7684\u8fc7\u7a0b\u5199\u6210\u4e86\u51fd\u6570\u3002\u6700\u5f00\u59cb\u6211\u662f\u5c06\u5b57\u7b26\u4e32\u6253\u6563\u6210\u4e3a\u4e8c\u7ef4\u6570\u7ec4\uff0c\u7136\u540e\u5d4c\u5957\u5faa\u73af\u8fde\u63a5\u5b57\u7b26\u4e32\u3002\u540e\u6765\u89c9\u5f97\u6253\u6563\u6210\u4e00\u4f4d\u6570\u7ec4\u5e94\u8be5\u4f1a\u66f4\u65b9\u4fbf\u4e00\u70b9\uff0c\u6240\u4ee5\u4e3a\u4e86\u7b97\u83b7\u53d6\u6570\u7ec4\u7d22\u5f15\u987a\u5e8f\u7684\u89c4\u5f8b\uff0c\u6b7b\u4e86\u597d\u591a\u4e2a\u8111\u7ec6\u80de\u554a\uff0c\u679c\u7136\u6570\u5b66\u5df2\u7ecf\u5fd8\u5230\u59e5\u59e5\u5bb6\u4e86\u3002\n\u6b4c\u8bcd\u7531\u4e8e\u540e\u671f\u8981\u7528js\u5904\u7406\uff0cjs\u53c8\u4e0d\u80fd\u8de8\u57df\u83b7\u53d6\u4ec0\u4e48\u7684\u3002\u6240\u4ee5\u53ea\u80fd\u52b3\u70e6PHP\u83b7\u53d6\u5230\u6b4c\u8bcd\u5730\u5740\u540e\u8fdc\u7a0b\u6293\u53d6\u8fc7\u6765\u4e86\u3002\u4ee5\u4e0a\u89e3\u6790\u5f97\u5230\u7edd\u5bf9\u5730\u5740\u548c\u6b4c\u8bcd\u90fd\u662f\u5728\u670d\u52a1\u5668\u7aef\u5b8c\u6210\u7684\u3002\u6211\u5199\u6210\u4e86API\u7684\u5f62\u5f0f\uff0chttps:\/\/imnerd.org\/lab\/search\/api.php?id=\u6b4c\u66f2ID\u53ef\u4ee5\u67e5\u770b\u83b7\u53d6\u5230\u7684\u5185\u5bb9\u683c\u5f0f\u3002\naudio\u6b4c\u66f2\u64ad\u653e\u4e0e\u6682\u505c \u679c\u7136\u6211\u8fd8\u662f\u5bf9\u89e3\u7801\u4ec0\u4e48\u7684\u6bd4\u8f83\u611f\u5174\u8da3\uff0c\u4e00\u4e0d\u5c0f\u5fc3\u5c31\u504f\u9898\u4e86\u5462\u3002\u597d\u5566\u597d\u5566\uff0c\u4ee5\u4e0a\u90fd\u4e0d\u5e94\u8be5\u662f\u672c\u6587\u7684\u91cd\u70b9\u5566\uff0c\u4e0b\u9762\u6211\u4eec\u5f00\u59cb\u597d\u597d\u7684\u8e42\u8e8f\u5b66\u4e60\u4e00\u4e0baudio\u6807\u7b7e\u5566\u3002audio\u6807\u7b7e\u7684\u7b80\u5355\u5199\u6cd5\u4e3a\n&lt;audio src=&#34;\u6b4c\u66f2\u5730\u5740&#34;&gt;&lt;\/audio&gt; \u63a7\u5236\u6b4c\u66f2\u7684\u64ad\u653e\u548c\u6682\u505c\u4e5f\u662f\u975e\u5e38\u7b80\u5355\u7684\uff0c\u53ea\u8981\u5229\u7528play()\u548cpause()\u4e8b\u4ef6\u5c31\u597d\u4e86\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\nm = document.getElementsByTagName(&#39;audio&#39;)[0]; m.play(); \/\/\u6b4c\u66f2\u7684\u64ad\u653e m.pause(); \/\/\u6b4c\u66f2\u7684\u6682\u505c \u60f3\u8981\u4e86\u89e3\u66f4\u591aaudio\u6807\u7b7e\u7684\u5c5e\u6027\u548c\u4e8b\u4ef6\u7684\u8bdd\u53ef\u4ee5\u70b9\u51fb\u8fd9\u91cc\uff1aHTML 5 \u89c6\u9891\/\u97f3\u9891\u53c2\u8003\u624b\u518c\n\u540c\u6b65\u663e\u793a\u6b4c\u8bcd\u7684\u5b9e\u73b0 \u6211\u5728\u5f00\u5934\u5df2\u7ecf\u8bb2\u4e86\uff0caudio\u7684currentTime\u5c5e\u6027\u53ef\u4ee5\u83b7\u53d6\u5f53\u524d\u64ad\u653e\u65f6\u95f4\u3002\u53c8\u5982\u679c\u4f60\u521a\u624d\u6709\u53bb\u70b9\u51fb\u4e0a\u9762\u7684\u53c2\u8003\u624b\u518c\u7684\u94fe\u63a5\u7684\u8bdd\uff0c\u4f60\u5c31\u4f1a\u53d1\u73b0audio\u8fd8\u6709\u4e00\u4e2a\u795e\u5947\u7684timeupdate\u4e8b\u4ef6\uff0c\u76ee\u7684\u662f\u5f53\u76ee\u524d\u7684\u64ad\u653e\u4f4d\u7f6e\u5df2\u66f4\u6539\u65f6\u505a\u51fa\u52a8\u4f5c\u3002\u4e5f\u5c31\u662f\u8bf4\u6211\u4eec\u53ef\u4ee5\u5229\u7528timeupdate\u4e8b\u4ef6\u5728currentTime\u53d8\u5316\u7684\u65f6\u5019\u505a\u51fa\u5224\u65ad\uff0c\u7136\u540e\u653e\u7f6e\u76f8\u5e94\u7684\u6b4c\u8bcd\u3002\n\u57fa\u672c\u65b9\u6cd5\u5927\u6982\u5c31\u662f\u8fd9\u4e2a\u6837\u5b50\uff0c\u64ad\u653e\u5668\u7684\u5f53\u524d\u64ad\u653e\u65f6\u95f4\u6211\u4eec\u5df2\u7ecf\u83b7\u53d6\u5230\u4e86\uff0c\u5269\u4e0b\u7684\u5c31\u662f\u83b7\u53d6\u6b4c\u8bcd\u7684\u64ad\u653e\u65f6\u95f4\u7684\u95ee\u9898\u4e86\u3002\u7531\u4e8e\u6807\u51c6\u7684\u6b4c\u8bcd\u6bcf\u884c\u5e94\u8be5\u662f\u201c[\u4f60\u597d\u6211\u662f\u64ad\u653e\u65f6\u95f4\uff0c\u6211\u7684\u683c\u5f0f\u662f\u5206:\u79d2]\u4f60\u597d\u6211\u662f\u8be5\u64ad\u653e\u65f6\u95f4\u4e0b\u7684\u6b4c\u8bcd\u201d\u8fd9\u79cd\u683c\u5f0f\u7684\uff0c\u60f3\u5fc5\u5927\u5bb6\u65e9\u5c31\u4e86\u89e3\u4e86\u5427\u3002\u5229\u7528\u6b63\u5219\u83b7\u53d6split\u5206\u5272\u7b49\u4e00\u7cfb\u5217\u65b9\u6cd5\u5c06\u6b4c\u8bcd\u5206\u5272\u6210\u4e00\u4e2a\u4e8c\u7ef4\u6570\u7ec4\uff0c\u4e00\u7eac\u4e3a\u6bcf\u884c\u6b4c\u8bcd\uff0c\u4e8c\u7ef4\u4e3a\u6bcf\u884c\u6b4c\u8bcd\u7684\u65f6\u95f4\u548c\u6bcf\u884c\u6b4c\u8bcd\u7684\u5185\u5bb9\u3002\u5176\u4e2d\u6b4c\u8bcd\u7684\u65f6\u95f4\u7531\u4e8e\u662f\u5206\u949f\uff1a\u79d2\u7684\u5f62\u5f0f\uff0c\u9700\u8981\u8f6c\u5316\u4e3a\u5355\u4f4d\u4e3a\u79d2\u7684\u6570\u5b57\u3002\u4e0b\u9762\u7ed9\u51fa\u6b4c\u8bcd\u8f6c\u5316\u4e3a\u4e8c\u7ef4\u6570\u7ec4\u7684\u65b9\u6cd5\u3002\u65b9\u6cd5\u53ef\u80fd\u5751\u7239\u4e0d\u662f\u6700\u597d\u7684\uff0c\u4f46\u662f\u57fa\u672c\u51d1\u5408\uff0c\u8fd9\u4e00\u90e8\u5206\u5927\u5bb6\u53ef\u4ee5\u968f\u610f\u53d1\u6325\uff1a\n\/\/\u5199\u6210\u51fd\u6570\u7684\u5f62\u5f0f\u5927\u5bb6\u53ef\u80fd\u4f1a\u66f4\u597d\u7406\u89e3\u4e00\u70b9 function parseLyric(text) { lyric = text.split(&#39;\\r\\n&#39;); \/\/\u5148\u6309\u884c\u5206\u5272 var _l = lyric.length; \/\/\u83b7\u53d6\u6b4c\u8bcd\u884c\u6570 lrc = new Array(); \/\/\u65b0\u5efa\u4e00\u4e2a\u6570\u7ec4\u5b58\u653e\u6700\u540e\u7ed3\u679c for(i=0;i&lt;_l;i++) { var d = lyric[i].match(\/\\[\\d{2}:\\d{2}((\\.|\\:)\\d{2})\\]\/g); \/\/\u6b63\u5219\u5339\u914d\u64ad\u653e\u65f6\u95f4 var t = lyric[i].split(d); \/\/\u4ee5\u65f6\u95f4\u4e3a\u5206\u5272\u70b9\u5206\u5272\u6bcf\u884c\u6b4c\u8bcd\uff0c\u6570\u7ec4\u6700\u540e\u4e00\u4e2a\u4e3a\u6b4c\u8bcd\u6b63\u6587 if(d != null) { \/\/\u8fc7\u6ee4\u6389\u7a7a\u884c\u7b49\u975e\u6b4c\u8bcd\u6b63\u6587\u90e8\u5206 \/\/\u6362\u7b97\u65f6\u95f4\uff0c\u4fdd\u7559\u4e24\u4f4d\u5c0f\u6570 var dt = String(d).split(&#39;:&#39;); \/\/\u4e0d\u77e5\u9053\u4e3a\u4ec0\u4e48\u4e00\u5b9a\u8981\u8f6c\u6362\u65f6\u95f4\u4e3a\u5b57\u7b26\u4e32\u4e4b\u540e\u624d\u80fdsplit\uff0c\u96be\u9053\u4e4b\u524d\u6b63\u5219\u83b7\u53d6\u7684\u65f6\u95f4\u5df2\u7ecf\u4e0d\u662f\u5b57\u7b26\u4e32\u4e86\u4e48\uff1f var _t = Math.round(parseInt(dt[0].split(&#39;[&#39;)[1])*60+parseFloat(dt[1].split(&#39;]&#39;)[0])*100)\/100; \/\/\u8fd9\u4e00\u6b65\u6211\u81ea\u5df1\u90fd\u89c9\u5f97\u751a\u662f\u5751\u7239\u554a\uff01 lrc.push([_t, t[1]]); } return lrc; } \u8fd9\u6837\u6211\u4eec\u53ea\u8981\u5339\u914d\u6b4c\u8bcd\u6bcf\u884c\u7684\u65f6\u95f4\u548ccrrentTime\u5c31\u884c\u4e86\uff0c\u5982\u679c\u5f53\u524d\u64ad\u653e\u65f6\u95f4\u8d85\u8fc7\u4e86\u8fd9\u4e00\u53e5\u6b4c\u8bcd\u7684\u65f6\u95f4\uff0c\u5219\u663e\u793a\u8fd9\u4e00\u53e5\u6b4c\u8bcd\uff0c\u5426\u5219\u4e0d\u663e\u793a\u3002\u8fd9\u662f\u6211\u4eec\u4e0b\u9762\u4ee3\u7801\u7684\u5173\u952e\u5224\u65ad\u3002\u53e6\u5916\uff0c\u8fd9\u91cc\u6211\u4f7f\u7528\u4e86\u4e00\u4e2a\u81ea\u6211\u611f\u89c9\u8fd8\u4e0d\u9519\u7684\u5c0f\u6280\u5de7\uff1a\u663e\u793a\u5b8c\u6b4c\u8bcd\u4e4b\u540e\u7acb\u5373\u5c06\u8fd9\u884c\u6b4c\u8bcd\u4ece\u6b4c\u8bcd\u6570\u7ec4\u4e2d\u5254\u9664\u51fa\u53bb\uff0c\u8fd9\u6837\u6211\u4eec\u5c31\u6c38\u8fdc\u53ea\u8981\u5c06currentTime\u548clrc[1][0]\u6bd4\u8f83\u5c31\u597d\u4e86\uff0c\u800c\u4e0d\u7528\u9ebb\u70e6\u7684\u53bb\u6bcf\u4e2a\u90fd\u53bb\u6bd4\u8f83\u4e00\u4e0b\u3002\nm.addEventListener(&#39;timeupdate&#39;, function() { if(audio.currentTime &gt; lrc[1][0]) { document.getElementById(&#39;lrc&#39;).innerHTML = lrc[1][1]; lrc.shift(); } },false); \/\/addEventListener\u7b49\u540c\u4e8em.timeupdate(function() {...}); \u6b4c\u66f2\u64ad\u653e\u5e76\u663e\u793a\u6b4c\u8bcd\u7684\u601d\u8def\u5927\u6982\u5c31\u8fd9\u4e2a\u6837\u5b50\u4e86\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u53ef\u4ee5\u53bb\u770b\u6211\u7684DEMO\u3002DEMO\u53ea\u662f\u7ed9\u51fa\u4e86\u5927\u6982\u7684\u529f\u80fd\uff0cUI\u65b9\u9762\u90fd\u8fd8\u6728\u6709\u7f8e\u5316\uff0c\u5927\u5bb6\u4e60\u60ef\u5c31\u597d\uff0c\u8fd9\u4e2a\u662f\u5728\u662f\u529b\u4e0d\u4ece\u5fc3\u554a\uff01\u672c\u4eba\u4e00\u5411\u4e5f\u4e0d\u662f\u5f88\u5728\u610fUI\u7684\u3002\u6700\u540e\u7684\u6700\u540e\uff0c\u611f\u8c22\u4e00\u4e0bJclyn\u5e2e\u6211\u505a\u4e86\u6d4b\u8bd5\u5e76\u63a8\u8350\u4e86\u672c\u6587\u5f00\u5934\u7684\u6b4c\u66f2\u3002\u54e6\uff0c\u53c8\u7a81\u7136\u60f3\u8d77\u6765\u4e86\uff0cDEMO\u7684\u8303\u4f8b\u662f\u7528JQuery\u64cd\u4f5c\u7684\uff0c\u867d\u7136\u8ddfJavascript\u6709\u4e9b\u4e0d\u540c\uff0c\u4f46\u662f\u5bf9\u4e8e\u601d\u8def\u4ec0\u4e48\u7684\u662f\u6ca1\u6709\u95ee\u9898\u7684\uff0c\u6709\u4e0d\u61c2\u7684\u53ef\u4ee5\u7559\u8a00\u63d0\u95ee\u54e6\uff0c\u6211\u4f1a\u770b\u5fc3\u60c5\u8010\u5fc3\u89e3\u7b54\u7684\u3002"}]}}