js 實現html網頁簡繁體切換
阿新 • • 發佈：2019-01-05
荊軻刺秦王
我們在做網站的時候，有時候會遇到 簡繁體切換 或者 中英文切換（英文我還遇到 qaq 吼吼吼）（等我遇到了再更吧。。。）
廢話不多說，直接上程式碼（ps : 這個是我在網上找的，屬於那種比較簡單，拿來即用的那種，不會出什麼bug）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>荊軻刺秦王</title> </head> <body> <input type="button" value="繁體" onclick="zh_tran('t');"/><br/> <input type="button" value="簡體" onclick="zh_tran('s');"/> <div> <p>於千萬人之中，遇見你要遇見的人。於千萬年之中，時間無涯的荒野裡，沒有早一步，也沒有遲一步，遇上了也只能輕輕地說一句：“哦，你也在這裡嗎？”</p> </div> <div><a href="#">測試連結是否生效</a></div> <div> <p> 也許每一個男子全都有過這樣的兩個女人，至少兩個。娶了紅玫瑰，久而久之，紅的變了牆上的一抹蚊子血，白的還是“窗前明月光”；娶了白玫瑰，白的便是衣服上的一粒飯粘子，紅的卻是心口上的一顆硃砂痣。 </p> </div> <div> <p> 我要你知道，在這個世界上總有一個人是等著你的，不管在什麼時候，不管在什麼地方，反正你知道，總有這麼個人。 </p> </div> <div> <p> 愛情本來並不複雜，來來去去不過三個字，不是“我愛你，我恨你，”“便是算了吧，你好嗎？對不起。 </p> </div> <div> <p> 失望，有時候也是一種幸福，因為有所期待所以才會失望。因為有愛，才會有期待，所以縱使失望，也是一種幸福，雖然這種幸福有點痛 </p> </div> <div> <p> 如果我不愛你，我就不會思念你，我就不會妒忌你身邊的異性，我也不會失去自信心和鬥志，我更不會痛苦。如果我能夠不愛你，那該多好。 </p> </div> <div> <p> 如果情感和歲月也能輕輕撕碎，扔到海中，那麼，我願意從此就在海底沉默。你的言語，我愛聽，卻不懂得，我的沉默，你願見，卻不明白 </p> </div> <div> <p> 你問我愛你值比值得，其實你應該知道，愛就是不問值不值得。 </p> </div> <div> <p> 我喜歡錢，因為我沒吃過錢的苦，不知道錢的壞處，只知道錢的好處。 </p> </div> </body> </html>
js 程式碼：
// 網頁簡繁體轉換 // 本js用於客戶在網站頁面選擇繁體中文或簡體中文顯示，預設是正常顯示，即簡繁體同時顯示 // 在使用者第一次訪問網頁時,會自動檢測客戶端語言進行操作並提示.此功能可關閉 // 本程式只在UTF8編碼下測試過，不保證其他編碼有效 // -------------- 以下引數大部分可以更改 -------------------- //s = simplified 簡體中文 t = traditional 繁體中文 n = normal 正常顯示 var zh_default = 'n'; //預設語言，請不要改變 var zh_choose = 'n'; //當前選擇 var zh_expires = 7; //cookie過期天數 var zh_class = 'zh_click'; //連結的class名，id為class + s/t/n 之一 var zh_style_active = 'font-weight:bold; color:green;'; //當前選擇的連結式樣 var zh_style_inactive = 'color:blue;'; //非當前選擇的連結式樣 var zh_browserLang = ''; //瀏覽器語言 var zh_autoLang_t = true; //瀏覽器語言為繁體時自動進行操作 var zh_autoLang_s = false; //瀏覽器語言為簡體時自動進行操作 var zh_autoLang_alert = true; //自動操作後是否顯示提示訊息 //自動操作後的提示訊息 var zh_autoLang_msg = '歡迎來到本站,本站為方便臺灣香港的使用者\n1.採用UTF-8國際編碼,用任何語言發帖都不用轉碼.\n2.自動判斷繁體使用者,顯示繁體網頁\n3.在網頁最上方有語言選擇,如果瀏覽有問題時可以切換\n4.本訊息在cookie有效期內只顯示一次'; var zh_autoLang_checked = 0; //次檢測瀏覽器次數,第一次寫cookie為1,提示後為2,今後將不再提示 //判斷瀏覽器語言的正則,ie為小寫,ff為大寫 var zh_langReg_t = /^zh-tw|zh-hk$/i; var zh_langReg_s = /^zh-cn$/i; //簡體繁體對照字表,可以自行替換 var zh_s = '皚藹礙愛翱襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鱉癟瀕濱賓擯餅撥鉢鉑駁卜補參蠶殘慚慘燦蒼艙倉滄廁側冊測層詫攙摻蟬饞讒纏鏟產闡顫場嘗長償腸廠暢鈔車徹塵陳襯撐稱懲誠騁痴遲馳恥齒熾衝蟲寵疇躊籌綢醜櫥廚鋤雛礎儲觸處傳瘡闖創錘純綽辭詞賜聰蔥囪從叢湊竄錯達帶貸擔單鄲撣膽憚誕彈當擋黨蕩檔搗島禱導盜燈鄧敵滌遞締點墊電澱釣調迭諜疊釘頂錠訂東動棟凍鬥犢獨讀賭鍍鍛斷緞兌隊對噸頓鈍奪鵝額訛惡餓兒爾餌貳發罰閥琺礬釩煩範販飯訪紡飛廢費紛墳奮憤糞豐楓鋒風瘋馮縫諷鳳膚輻撫輔賦復負訃婦縛該鈣蓋幹趕稈贛岡剛鋼綱崗皋鎬擱鴿閣鉻個給龔宮鞏貢鉤溝構購夠蠱顧剮關觀館慣貫廣規矽歸龜閨軌詭櫃貴劊輥滾鍋國過駭韓漢閡鶴賀橫轟鴻紅後壺護滬戶譁華畫劃話懷壞歡環還緩換喚瘓煥渙黃謊揮輝毀賄穢會燴匯諱誨繪葷渾夥獲貨禍擊機積飢譏雞績緝極輯級擠幾薊劑濟計記際繼紀夾莢頰賈鉀價駕殲監堅箋間艱緘繭檢鹼礆揀撿簡儉減薦檻鑑踐賤見鍵艦劍餞漸濺澗漿蔣槳獎講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較秸階節莖驚經頸靜鏡徑痙競淨糾廄舊駒舉據鋸懼劇鵑絹傑潔結誡屆緊錦僅謹進晉燼盡勁荊覺決訣絕鈞軍駿開凱顆殼課墾懇摳庫褲誇塊儈寬礦曠況虧巋窺饋潰擴闊蠟臘萊來賴藍欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂鐳壘類淚籬離裡鯉禮麗厲勵礫歷瀝隸倆聯蓮連鐮憐漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴凌靈嶺領餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄滷虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡媽瑪碼螞馬罵嗎買麥賣邁脈瞞饅蠻滿謾貓錨鉚貿麼黴沒鎂門悶們錳夢謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆捻釀鳥聶齧鑷鎳檸獰寧擰濘鈕紐膿濃農瘧諾歐鷗毆嘔漚盤龐國愛賠噴鵬騙飄頻貧蘋憑評潑頗撲鋪樸譜臍齊騎豈啟氣棄訖牽扦釺鉛遷籤謙錢鉗潛淺譴塹槍嗆牆薔強搶鍬橋喬僑翹竅竊欽親輕氫傾頃請慶瓊窮趨區軀驅齲顴權勸卻鵲讓饒擾繞熱韌認紉榮絨軟銳閏潤灑薩鰓賽傘喪騷掃澀殺紗篩晒閃陝贍繕傷賞燒紹賒攝懾設紳審嬸腎滲聲繩勝聖師獅溼詩屍時蝕實識駛勢釋飾視試壽獸樞輸書贖屬術樹豎數帥雙誰稅順說碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻擡攤貪癱灘壇譚談嘆湯燙濤絛騰謄銻題體屜條貼鐵廳聽烴銅統頭圖塗團頹蛻脫鴕馱駝橢窪襪彎灣頑萬網韋違圍為濰維葦偉偽緯謂衛溫聞紋穩問甕撾蝸渦窩嗚鎢烏誣無蕪吳塢霧務誤錫犧襲習銑戲細蝦轄峽俠狹廈杴鮮纖鹹賢銜閒顯險現獻縣餡羨憲線廂鑲鄉詳響項蕭銷曉嘯蠍協挾攜脅諧寫瀉謝鋅釁興洶鏽繡虛噓須許緒續軒懸選癬絢學勳詢尋馴訓訊遜壓鴉鴨啞亞訝閹煙鹽嚴顏閻豔厭硯彥諺驗鴦楊揚瘍陽癢養樣瑤搖堯遙窯謠藥爺頁業葉醫銥頤遺儀彝蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應纓瑩螢營熒蠅穎喲擁傭癰踴詠湧優憂郵鈾猶遊誘輿魚漁娛與嶼語籲御獄譽預馭鴛淵轅園員圓緣遠願約躍鑰嶽粵悅閱雲鄖勻隕運蘊醞暈韻雜災載攢暫贊贓髒鑿棗灶責擇則澤賊贈扎札軋鍘閘詐齋債氈盞斬輾嶄棧戰綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮陣掙睜猙幀鄭證織職執紙摯擲幟質鍾終種腫眾謅軸皺晝驟豬諸誅燭矚囑貯鑄築駐專磚轉賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鑽致鍾麼為只凶準啟板裡靂餘鏈洩'; var zh_t = '皚藹礙愛翺襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鼈癟瀕濱賓擯餅撥缽鉑駁蔔補參蠶殘慚慘燦蒼艙倉滄廁側冊測層詫攙摻蟬饞讒纏鏟産闡顫場嘗長償腸廠暢鈔車徹塵陳襯撐稱懲誠騁痴遲馳恥齒熾沖蟲寵疇躊籌綢醜櫥廚鋤雛礎儲觸處傳瘡闖創錘純綽辭詞賜聰蔥囪從叢湊竄錯達帶貸擔單鄲撣膽憚誕彈當擋黨蕩檔搗島禱導盜燈鄧敵滌遞締點墊電澱釣調疊諜疊釘頂錠訂東動棟凍鬥犢獨讀賭鍍鍛斷緞兌隊對噸頓鈍奪鵝額訛惡餓兒爾餌貳發罰閥琺礬釩煩範販飯訪紡飛廢費紛墳奮憤糞豐楓鋒風瘋馮縫諷鳳膚輻撫輔賦複負訃婦縛該鈣蓋幹趕稈贛岡剛鋼綱崗臯鎬擱鴿閣鉻個給龔宮鞏貢鈎溝構購夠蠱顧剮關觀館慣貫廣規矽歸龜閨軌詭櫃貴劊輥滾鍋國過駭韓漢閡鶴賀橫轟鴻紅後壺護滬戶嘩華畫劃話懷壞歡環還緩換喚瘓煥渙黃謊揮輝毀賄穢會燴彙諱誨繪葷渾夥獲貨禍擊機積饑譏雞績緝極輯級擠幾薊劑濟計記際繼紀夾莢頰賈鉀價駕殲監堅箋間艱緘繭檢堿鹼揀撿簡儉減薦檻鑒踐賤見鍵艦劍餞漸濺澗漿蔣槳獎講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較稭階節莖驚經頸靜鏡徑痙競淨糾廄舊駒舉據鋸懼劇鵑絹傑潔結誡屆緊錦僅謹進晉燼盡勁荊覺決訣絕鈞軍駿開凱顆殼課墾懇摳庫褲誇塊儈寬礦曠況虧巋窺饋潰擴闊蠟臘萊來賴藍欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂鐳壘類淚籬離裡鯉禮麗厲勵礫曆瀝隸倆聯蓮連鐮憐漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴淩靈嶺領餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄鹵虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡媽瑪碼螞馬罵嗎買麥賣邁脈瞞饅蠻滿謾貓錨鉚貿麼黴沒鎂門悶們錳夢謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆撚釀鳥聶齧鑷鎳檸獰甯擰濘鈕紐膿濃農瘧諾歐鷗毆嘔漚盤龐國愛賠噴鵬騙飄頻貧蘋憑評潑頗撲鋪樸譜臍齊騎豈啟氣棄訖牽扡釺鉛遷簽謙錢鉗潛淺譴塹槍嗆牆薔強搶鍬橋喬僑翹竅竊欽親輕氫傾頃請慶瓊窮趨區軀驅齲顴權勸卻鵲讓饒擾繞熱韌認紉榮絨軟銳閏潤灑薩鰓賽傘喪騷掃澀殺紗篩晒閃陝贍繕傷賞燒紹賒攝懾設紳審嬸腎滲聲繩勝聖師獅濕詩屍時蝕實識駛勢釋飾視試壽獸樞輸書贖屬術樹豎數帥雙誰稅順說碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻擡攤貪癱灘壇譚談歎湯燙濤縧騰謄銻題體屜條貼鐵廳聽烴銅統頭圖塗團頹蛻脫鴕馱駝橢窪襪彎灣頑萬網韋違圍為濰維葦偉偽緯謂衛溫聞紋穩問甕撾蝸渦窩嗚鎢烏誣無蕪吳塢霧務誤錫犧襲習銑戲細蝦轄峽俠狹廈鍁鮮纖鹹賢銜閑顯險現獻縣餡羨憲線廂鑲鄉詳響項蕭銷曉嘯蠍協挾攜脅諧寫瀉謝鋅釁興洶鏽繡虛噓須許緒續軒懸選癬絢學勳詢尋馴訓訊遜壓鴉鴨啞亞訝閹煙鹽嚴顔閻豔厭硯彥諺驗鴦楊揚瘍陽癢養樣瑤搖堯遙窯謠藥爺頁業葉醫銥頤遺儀彜蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應纓瑩螢營熒蠅穎喲擁傭癰踴詠湧優憂郵鈾猶遊誘輿魚漁娛與嶼語籲禦獄譽預馭鴛淵轅園員圓緣遠願約躍鑰嶽粵悅閱雲鄖勻隕運蘊醞暈韻雜災載攢暫贊贓髒鑿棗灶責擇則澤賊贈紮劄軋鍘閘詐齋債氈盞斬輾嶄棧戰綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮陣掙睜猙幀鄭證織職執紙摯擲幟質鍾終種腫眾謅軸皺晝驟豬諸誅燭矚囑貯鑄築駐專磚轉賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鑽緻鐘麼為隻凶準啟闆裡靂餘鍊洩'; String.prototype.tran = function() { var s1,s2; if (zh_choose == 't') { s1 = zh_s; s2 = zh_t; }else if(zh_choose == 's') { s1 = zh_t; s2 = zh_s; }else { return this; } var a = ''; var l = this.length; for(var i=0;i<this.length;i++){ var c = this.charAt(i); var p = s1.indexOf(c) a += p < 0 ? c : s2.charAt(p); } return a; } function setCookie(name, value) { var argv = setCookie.arguments; var argc = setCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; if (expires != null) { var LargeExpDate = new Date (); LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24)); } document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString())); } function getCookie(Name) { var search = Name + "=" if (document.cookie.length > 0) { offset = document.cookie.indexOf(search); if(offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if(end == -1) end = document.cookie.length; return unescape(document.cookie.substring(offset, end)); }else { return ''; } } } function zh_tranBody(obj) { var o = (typeof(obj) == "object") ? obj.childNodes : document.body.childNodes; for (var i = 0; i < o.length; i++) { var c = o.item(i); if ('||BR|HR|TEXTAREA|SCRIPT|'.indexOf("|"+c.tagName+"|") > 0) continue; if (c.className == zh_class) { if (c.id == zh_class + '_' + zh_choose) { c.setAttribute('style', zh_style_active); c.style.cssText = zh_style_active; }else { c.setAttribute('style', zh_style_inactive); c.style.cssText = zh_style_inactive; } continue; } if (c.title != '' && c.title != null) c.title = c.title.tran(); if (c.alt != '' && c.alt != null) c.alt = c.alt.tran(); if (c.tagName == "INPUT" && c.value != '' && c.type != 'text' && c.type != 'hidden' && c.type != 'password') c.value = c.value.tran(); if (c.nodeType == 3) { c.data = c.data.tran(); }else{ zh_tranBody(c); } } } function zh_tran(go) { if (go) zh_choose = go; setCookie('zh_choose', zh_choose, zh_expires); if (go == 'n') { window.location.reload(); }else { zh_tranBody(); } } function zh_getLang() { if (getCookie('zh_choose')) { zh_choose = getCookie('zh_choose'); return true; } if (!zh_autoLang_t && !zh_autoLang_s) return false; if (getCookie('zh_autoLang_checked')) return false; if (navigator.language) { zh_browserLang = navigator.language; }else if (navigator.browserLanguage) { zh_browserLang = navigator.browserLanguage; } if (zh_autoLang_t && zh_langReg_t.test(zh_browserLang)) { zh_choose = 't'; }else if (zh_autoLang_s && zh_langReg_s.test(zh_browserLang)) { zh_choose = 's'; } zh_autoLang_checked = 1; setCookie('zh_choose', zh_choose, zh_expires); if (zh_choose == zh_default) return false; return true; } function zh_init() { zh_getLang(); c = document.getElementById(zh_class + '_' + zh_choose); if (zh_choose != zh_default) { if (window.onload) { window.onload_before_zh_init = window.onload; window.onload = function() { zh_tran(zh_choose); if (getCookie('zh_autoLang_check')) {alert(zh_autoLang_msg);}; window.onload_before_zh_init(); }; }else { window.onload = function() { zh_tran(zh_choose); if (getCookie('zh_autoLang_check')) {alert(zh_autoLang_msg);}; }; } } } zh_init();
js 程式碼可以直接放到 html 頁面，也可以引用過來。。。。。
樓主親測十分好用
最最後 感謝大神，把程式碼分享出來