js 实现html网页简繁体切换
2024-05-17 14:16:53
荆轲刺秦王
我们在做网站的时候，有时候会遇到 简繁体切换 或者 中英文切换（英文我还遇到 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 页面，也可以引用过来。。。。。
楼主亲测十分好用
最最后 感谢大神，把代码分享出来
js 实现html网页简繁体切换相关推荐
- 记录：前端js实现页面内简繁体切换
一.效果 二.实现 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- js网页简繁体切换cookie记录状态
本地file浏览器时不要使用webkit核心浏览器测试,如chrome,无法生成cookie,需要发布后通过http协议访问 测试代码如下 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代 ...
- js实现网页简繁体自动转换
js实现网页简繁体自动转换 页面内容如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- jsp中实现中文简繁体切换
先导入插件zh.js <a title="点击进行简繁体切换" οnclick="javascript:LinkClick();"><span ...
- windows10 自带拼音输入法，简繁体切换快捷键怎么设置？
windows10 自带拼音输入法,简繁体切换Ctrl+Shift+F,与PyCharm中查找Ctrl+Shift+F冲突
- ubuntu Android Studio find in files 的快捷键 与搜狗输入法Linux版 简繁体切换快捷键冲突问题的解决办法【ctrl+ shift+F】
注意点 搜狗输入法属性设置的图形界面中>高级>简繁切换>先设置为勾选状态 解决方案 1. 修改搜狗拼音的配置文件 首先打开搜狗拼音的配置文件: #gedit ~/.config/so ...
- JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰"繁体中文").传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语 ...
- 如何关闭或者切换win10的简繁体切换快捷键
对于开发人员来说,win10的简繁体快捷键真的是让人无语 ,dev only bug 进入正题 1:右键任务栏的输入法点击"设置" 2:选择"按键" 3 3:选 ...
- JS 实现网站简繁体切换
<A id=StranLink href="" name=StranLink style="display:none;"><font colo ...
- Vue、elmentUI国际化 vue-i18n项目实行简繁体切换
1.安装国际化插件vue-i18n npm install vue-i18n --save 2.增加国际化翻译文件 在项目的src下添加lang文件夹增加中文简体翻译文件(zh-cn.js)以及繁体翻 ...
最新文章
- linux会话管理,Linux 安装 screen 远程会话管理工具
- origin中文版散点图拟合曲线_「测试狗」Origin入门教程：如何进行单段及多段线性拟合...
- 【Linux 内核 内存管理】Linux 内核堆内存管理 ① ( 堆内存管理 | 内存描述符 mm_struct 结构体 | mm_struct 结构体中的 start_brk、brk 成员 )
- 2018.7.6 TX射频调试-PP
- 《JavaScript模式》读书笔记一：基本技巧
- Codeforces Round #579 (Div. 3) F2. Complete the Projects (hard version) dp + 贪心
- 栈的应用--数制转换
- 怎样成为一个好的技术领导者
- imx6ull EMMC和NABD 的移植注意事项，差别
- Siri 自动拨打 911、Google 建筛查网站、IBM 测药物成分，国际抗疫在行动！
- 泉金海上航线春节期间航班调整 除夕初一各停航4个班次
- JDK(Install)
- ABAP-生成会计凭证
- 高级语言 和 低级语言 的区别
- 【论文笔记_自监督知识蒸馏】Refine Myself by Teaching Myself : Feature Refinement via Self-Knowledge Distillation
- 关于Nginx mmap(MAP_ANON|MAP_SHARED, 314572800)报错
- 假设检验：如何理解单侧、双侧检验的拒绝域
- 阿里云上传图片的使用，AccessKey查看，入门级别
- Windows Live Writer插件：在WLW中插入语法高亮代码（二）
- 图象恢复——（逆滤波，维纳滤波）