成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

無后端完成在線翻譯功能

RaoMeng / 1705人閱讀

摘要：在線翻譯純前端百度翻譯本地存儲完成提取文本中的生詞，并返回單詞的翻譯結(jié)果項(xiàng)目內(nèi)容之前背單詞的時候發(fā)現(xiàn)，直接背單詞的話太枯燥，直接閱讀英文書籍報紙又有太多的單詞不認(rèn)識，就想能夠做個，直接檢查出一個英文文本中的生詞，并翻譯出來。

在線翻譯

純前端 + 百度翻譯API + localStorage本地存儲
完成提取文本中的生詞，并返回單詞的翻譯結(jié)果

項(xiàng)目內(nèi)容

之前背單詞的時候發(fā)現(xiàn)，直接背單詞的話太枯燥，直接閱讀英文書籍、報紙又有太多的單詞不認(rèn)識，
就想能夠做個demo，直接檢查出 一個英文文本中的 生詞，并翻譯出來。

本demo有下列內(nèi)容

前端界面

用localStorage存儲用戶已近掌握的單詞

利用百度翻譯API翻譯單詞

項(xiàng)目演示

所以項(xiàng)目本身不需要服務(wù)器，編寫玩靜態(tài)資源后可以直接托管在GitHub Page上（GitHub真是偉大的網(wǎng)站）

在線地址

操作演示：

（無法加載GIF可以自行打開該鏈接）

代碼邏輯

代碼倉庫
目前項(xiàng)目正處于初級階段，所以簡陋，還有許多未添加的功能

目錄結(jié)構(gòu) 
.
├── README.md
├── css
│?? └── style.css
├── index.html
└── js
    ├── getTrans.js
    ├── getVocabulariesFromText.js
    └── static
        ├── jQuery.min.js
        └── md5.js

其中js/static目錄下 一個提供jQuery，另一個用于百度翻譯要求的MD5加密

localStorage

從項(xiàng)目網(wǎng)站所在的便簽也打開控制臺，觀察localStorage

我把把所有單詞分為已知know，正在學(xué)習(xí)learn和未知。并把已知的單詞存儲在localStorage。
這樣做的好處是不需要服務(wù)器，壞處是用戶換個瀏覽器之前的內(nèi)容就沒了

前端頁面

分為三個部分：

輸入框，用來等待用戶輸入文本

提交按鈕，點(diǎn)擊后開始翻譯文本框中的內(nèi)容

用來顯示翻譯結(jié)果的表格

js代碼流程

為提交按鈕綁定onClick時間

當(dāng)用戶點(diǎn)擊提交按鈕后

獲得輸入框中的文本

用正則表達(dá)式提取其中的英語單詞

對提取到的單詞做兩個處理

去除重復(fù)的單詞

去除已經(jīng)學(xué)會的單詞

利用百度翻譯API翻譯單詞

將返回的結(jié)果渲染到頁面

倉庫的代碼都有注釋，就不多說廢話了

結(jié)語

項(xiàng)目還很簡陋，有時間再完善下。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94671.html

相關(guān)文章

  • 無后端完成在線翻譯功能

    摘要：在線翻譯純前端百度翻譯本地存儲完成提取文本中的生詞，并返回單詞的翻譯結(jié)果項(xiàng)目內(nèi)容之前背單詞的時候發(fā)現(xiàn)，直接背單詞的話太枯燥，直接閱讀英文書籍報紙又有太多的單詞不認(rèn)識，就想能夠做個，直接檢查出一個英文文本中的生詞，并翻譯出來。 在線翻譯 純前端 + 百度翻譯API + localStorage本地存儲完成提取文本中的生詞，并返回單詞的翻譯結(jié)果 項(xiàng)目內(nèi)容 之前背單詞的時候發(fā)現(xiàn)，直接背單詞的...

    Jason 評論0 收藏0

  • 基于vue2 + muse-ui構(gòu)建的移動端、PC端輕社區(qū)項(xiàng)目 F-Rent 友租

    摘要：如果有什么可以幫到你的無論是不是此項(xiàng)目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點(diǎn)子，我會第一時間去修正。 前言 本項(xiàng)目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構(gòu)建的一個移動端、PC端輕社區(qū)項(xiàng)目 項(xiàng)目地址GitHub 項(xiàng)目更新歷史 開發(fā)環(huán)境 Macos + Vs code + Chrome 項(xiàng)目的靈感最初來源：由于我是一個宅男在...

    linkFly 評論0 收藏0

  • 基于vue2 + muse-ui構(gòu)建的移動端、PC端輕社區(qū)項(xiàng)目 F-Rent 友租

    摘要：如果有什么可以幫到你的無論是不是此項(xiàng)目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點(diǎn)子，我會第一時間去修正。 前言 本項(xiàng)目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構(gòu)建的一個移動端、PC端輕社區(qū)項(xiàng)目 項(xiàng)目地址GitHub 項(xiàng)目更新歷史 開發(fā)環(huán)境 Macos + Vs code + Chrome 項(xiàng)目的靈感最初來源：由于我是一個宅男在...

    X_AirDu 評論0 收藏0

  • 4月份前端資源分享

    摘要：更多資源請文章轉(zhuǎn)自月份前端資源分享關(guān)于的思考一款有趣的動畫效果跨站資源共享之二最流行的編程語言能做什么到底什么是閉包的第三個參數(shù)跨域資源共享詳解阮一峰前端要給力之語句在中的值周愛民中國第二屆視頻花絮編碼規(guī)范前端工程師手冊奇舞周刊被忽視的 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfron...

    jsdt 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<