資訊專欄INFORMATION COLUMN
摘要：在線翻譯純前端百度翻譯本地存儲(chǔ)完成提取文本中的生詞，并返回單詞的翻譯結(jié)果項(xiàng)目?jī)?nèi)容之前背單詞的時(shí)候發(fā)現(xiàn)，直接背單詞的話太枯燥，直接閱讀英文書籍報(bào)紙又有太多的單詞不認(rèn)識(shí)，就想能夠做個(gè)，直接檢查出一個(gè)英文文本中的生詞，并翻譯出來(lái)。
在線翻譯
純前端 + 百度翻譯API + localStorage本地存儲(chǔ)
完成提取文本中的生詞，并返回單詞的翻譯結(jié)果
之前背單詞的時(shí)候發(fā)現(xiàn)，直接背單詞的話太枯燥，直接閱讀英文書籍、報(bào)紙又有太多的單詞不認(rèn)識(shí)，
就想能夠做個(gè)demo，直接檢查出 一個(gè)英文文本中的 生詞，并翻譯出來(lái)。
本demo有下列內(nèi)容
前端界面
用localStorage存儲(chǔ)用戶已近掌握的單詞
利用百度翻譯API翻譯單詞
項(xiàng)目演示所以項(xiàng)目本身不需要服務(wù)器，編寫玩靜態(tài)資源后可以直接托管在GitHub Page上（GitHub真是偉大的網(wǎng)站）
在線地址
操作演示：
（無(wú)法加載GIF可以自行打開(kāi)該鏈接）
代碼邏輯代碼倉(cāng)庫(kù)
目前項(xiàng)目正處于初級(jí)階段，所以簡(jiǎn)陋，還有許多未添加的功能
.
├── README.md
├── css
│?? └── style.css
├── index.html
└── js
├── getTrans.js
├── getVocabulariesFromText.js
└── static
├── jQuery.min.js
└── md5.js
其中js/static目錄下 一個(gè)提供jQuery，另一個(gè)用于百度翻譯要求的MD5加密
localStorage從項(xiàng)目網(wǎng)站所在的便簽也打開(kāi)控制臺(tái)，觀察localStorage
我把把所有單詞分為已知know，正在學(xué)習(xí)learn和未知。并把已知的單詞存儲(chǔ)在localStorage。
這樣做的好處是不需要服務(wù)器，壞處是用戶換個(gè)瀏覽器之前的內(nèi)容就沒(méi)了
分為三個(gè)部分：
輸入框，用來(lái)等待用戶輸入文本
提交按鈕，點(diǎn)擊后開(kāi)始翻譯文本框中的內(nèi)容
用來(lái)顯示翻譯結(jié)果的表格
js代碼流程為提交按鈕綁定onClick時(shí)間
當(dāng)用戶點(diǎn)擊提交按鈕后
獲得輸入框中的文本
用正則表達(dá)式提取其中的英語(yǔ)單詞
對(duì)提取到的單詞做兩個(gè)處理
去除重復(fù)的單詞
去除已經(jīng)學(xué)會(huì)的單詞
利用百度翻譯API翻譯單詞
將返回的結(jié)果渲染到頁(yè)面
倉(cāng)庫(kù)的代碼都有注釋，就不多說(shuō)廢話了
結(jié)語(yǔ)項(xiàng)目還很簡(jiǎn)陋，有時(shí)間再完善下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/52255.html
摘要：在線翻譯純前端百度翻譯本地存儲(chǔ)完成提取文本中的生詞，并返回單詞的翻譯結(jié)果項(xiàng)目?jī)?nèi)容之前背單詞的時(shí)候發(fā)現(xiàn)，直接背單詞的話太枯燥，直接閱讀英文書籍報(bào)紙又有太多的單詞不認(rèn)識(shí)，就想能夠做個(gè)，直接檢查出一個(gè)英文文本中的生詞，并翻譯出來(lái)。 在線翻譯 純前端 + 百度翻譯API + localStorage本地存儲(chǔ)完成提取文本中的生詞，并返回單詞的翻譯結(jié)果 項(xiàng)目?jī)?nèi)容 之前背單詞的時(shí)候發(fā)現(xiàn)，直接背單詞的...
摘要：如果有什么可以幫到你的無(wú)論是不是此項(xiàng)目中的問(wèn)題都可以在提出我會(huì)盡我所能幫你解決歡迎大佬們提出好的問(wèn)題和點(diǎn)子，我會(huì)第一時(shí)間去修正。 前言 本項(xiàng)目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構(gòu)建的一個(gè)移動(dòng)端、PC端輕社區(qū)項(xiàng)目 項(xiàng)目地址GitHub 項(xiàng)目更新歷史 開(kāi)發(fā)環(huán)境 Macos + Vs code + Chrome 項(xiàng)目的靈感最初來(lái)源：由于我是一個(gè)宅男在...
摘要：如果有什么可以幫到你的無(wú)論是不是此項(xiàng)目中的問(wèn)題都可以在提出我會(huì)盡我所能幫你解決歡迎大佬們提出好的問(wèn)題和點(diǎn)子，我會(huì)第一時(shí)間去修正。 前言 本項(xiàng)目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構(gòu)建的一個(gè)移動(dòng)端、PC端輕社區(qū)項(xiàng)目 項(xiàng)目地址GitHub 項(xiàng)目更新歷史 開(kāi)發(fā)環(huán)境 Macos + Vs code + Chrome 項(xiàng)目的靈感最初來(lái)源：由于我是一個(gè)宅男在...
摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享關(guān)于的思考一款有趣的動(dòng)畫效果跨站資源共享之二最流行的編程語(yǔ)言能做什么到底什么是閉包的第三個(gè)參數(shù)跨域資源共享詳解阮一峰前端要給力之語(yǔ)句在中的值周愛(ài)民中國(guó)第二屆視頻花絮編碼規(guī)范前端工程師手冊(cè)奇舞周刊被忽視的 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfron...
閱讀 2839·2021-09-28 09:45
閱讀 1511·2021-09-26 10:13
閱讀 908·2021-09-04 16:45
閱讀 3669·2021-08-18 10:21
閱讀 1094·2019-08-29 15:07
閱讀 2638·2019-08-29 14:10
閱讀 3151·2019-08-29 13:02
閱讀 2468·2019-08-29 12:31
