

[JavaScript] Button For Traditional/Simplified Chinese Conversion on Website
source link: https://siongui.github.io/2016/02/29/javascript-button-for-traditional-simplified-chinese-conversion/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
[JavaScript] Button For Traditional/Simplified Chinese Conversion on Website
February 29, 2016Conversion Button of Traditional/Simplified Chinese on Website via JavaScript.
First we implement button-like element by HTML and SCSS: (Assume default language of website is Traditional Chinese)
HTML
<div id="zh-convert" class="zh-convert" data-zh="tw">简体</div>
SCSS
.zh-convert { &:hover {cursor: pointer;} float: right; margin-right: 3px; padding: 5px 5px; background: #fff; border-radius: 4px; }
We need New Tong Wen Tang (GitHub) library to do the conversion for us. Insert the following line in your HTML right before the end of body tag.
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_core.js"></script> <script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_s2t.js"></script> <script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_t2s.js"></script> <script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_ps2t.js"></script> <script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_pt2s.js"></script>
When users click on 简体, the whole website will be converted to Simplified Chinese. When users click on 繁體, the whole website will be converted to Traditional Chinese.
JavaScript
var zhconvert = document.getElementById("zh-convert"); zhconvert.onclick = function() { if (zhconvert.dataset.zh == "tw") { TongWen.trans2Simp(document); zhconvert.dataset.zh = "cn"; setTimeout(function() {zhconvert.textContent = "繁體";}, 500); } else { TongWen.trans2Trad(document); zhconvert.dataset.zh = "tw"; setTimeout(function() {zhconvert.textContent = "简体";}, 500); } }
References:
[1]zh_TW to/from zh_CN · twnanda/twnanda@6897761 · GitHubRecommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK