网页上简体繁体汉字切换

Posted html55

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页上简体繁体汉字切换相关的知识,希望对你有一定的参考价值。

网页上简体繁体汉字切换

html文件

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <meta name="renderer" content="webkit">
 6 <title>js中文简体繁体切换-带缓存</title>
 7 
 8 <style>
 9 .container { max-width: 600px; height: auto; margin: auto; padding: 50px 0px; font-family: "microsoft yahei" }
10 .top { width: 100%; height: 50px; line-height: 50px; margin-bottom: 15px; }
11 .top a { width: 140px; height: 40px; display: block; float: left; margin-right: 10px; text-align: center; line-height: 40px; color: #00A1DF; text-decoration: none; }
12 .detail { width: 570px; padding: 10px; height: auto; line-height: 28px; text-indent: 28px; border: 5px solid #00A1DF; }
13 </style>
14 
15 </head>
16 <body>
17 
18 <div class="container">
19     <div class="top"> <a href="javascript:zh_tran(‘s‘);" class="zh_click" id="zh_click_s">简体</a> <a href="javascript:zh_tran(‘t‘);" class="zh_click" id="zh_click_t">繁體</a> </div>
20     <div class="detail">
21         有一天,一休和尚何老板、李武靖一起去非洲玩。不料他们竟误闯食人族部落。食人族把一休一群人绑住准备烤来吃,酋长:烤烤你。一休:尽管考。一休话一说出就后悔了...但已来不及接受被烤的命运,只好忍着火烤之痛,拼命地想办法......突然一休灵光一闪,“叮”一声!酋长:“烤好了。”</div>
22 </div>
23 
24 <script type="text/javascript" src="js/chinese.js"></script>
25 
26 </body>
27 </html>
View Code

 

js文件

技术分享图片
  1 // 网页简繁体转换
  2 // -------------- 以下参数大部分可以更改 --------------------
  3 //s = simplified 简体中文 t = traditional 繁体中文 n = normal 正常显示
  4 var zh_default = ‘n‘; //默认语言,请不要改变
  5 var zh_choose = ‘t‘; //当前选择
  6 var zh_expires = 7; //cookie过期天数
  7 var zh_class = ‘zh_click‘; //链接的class名,id为class + s/t/n 之一
  8 var zh_style_active = ‘background: #00A1DF; color:#FFFFFF;‘; //当前选择的链接式样
  9 var zh_style_inactive = ‘‘; //非当前选择的链接式样
 10 var zh_browserLang = ‘‘; //浏览器语言
 11 var zh_autoLang_t = true; //浏览器语言为繁体时自动进行操作
 12 var zh_autoLang_s = false; //浏览器语言为简体时自动进行操作
 13 var zh_autoLang_alert = false; //自动操作后是否显示提示消息
 14 
 15 var zh_autoLang_checked = 0; //次检测浏览器次数,第一次写cookie为1,提示后为2,今后将不再提示
 16 
 17 
 18 //判断浏览器语言的正则,ie为小写,ff为大写
 19 var zh_langReg_t = /^zh-tw|zh-hk$/i;
 20 var zh_langReg_s = /^zh-cn$/i;
 21 
 22 //简体繁体对照字表,可以自行替换
 23 var zh_s = ‘皑蔼碍爱翱袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鳖瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调迭谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗皋镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规硅归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红后壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑伙获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检碱硷拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较秸阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃凌灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么霉没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵捻酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扦钎铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗尸时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞苏诉肃虽绥岁孙损笋缩琐锁獭挞抬摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问瓮挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦锨鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彝蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣痈踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎札轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟么为只凶准启板里雳余链泄‘;
 24 var zh_t = ‘皚藹礙愛翺襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鼈癟瀕濱賓擯餅撥缽鉑駁蔔補參蠶殘慚慘燦蒼艙倉滄廁側冊測層詫攙摻蟬饞讒纏鏟産闡顫場嘗長償腸廠暢鈔車徹塵陳襯撐稱懲誠騁癡遲馳恥齒熾沖蟲寵疇躊籌綢醜櫥廚鋤雛礎儲觸處傳瘡闖創錘純綽辭詞賜聰蔥囪從叢湊竄錯達帶貸擔單鄲撣膽憚誕彈當擋黨蕩檔搗島禱導盜燈鄧敵滌遞締點墊電澱釣調叠諜疊釘頂錠訂東動棟凍鬥犢獨讀賭鍍鍛斷緞兌隊對噸頓鈍奪鵝額訛惡餓兒爾餌貳發罰閥琺礬釩煩範販飯訪紡飛廢費紛墳奮憤糞豐楓鋒風瘋馮縫諷鳳膚輻撫輔賦複負訃婦縛該鈣蓋幹趕稈贛岡剛鋼綱崗臯鎬擱鴿閣鉻個給龔宮鞏貢鈎溝構購夠蠱顧剮關觀館慣貫廣規矽歸龜閨軌詭櫃貴劊輥滾鍋國過駭韓漢閡鶴賀橫轟鴻紅後壺護滬戶嘩華畫劃話懷壞歡環還緩換喚瘓煥渙黃謊揮輝毀賄穢會燴彙諱誨繪葷渾夥獲貨禍擊機積饑譏雞績緝極輯級擠幾薊劑濟計記際繼紀夾莢頰賈鉀價駕殲監堅箋間艱緘繭檢堿鹼揀撿簡儉減薦檻鑒踐賤見鍵艦劍餞漸濺澗漿蔣槳獎講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較稭階節莖驚經頸靜鏡徑痙競淨糾廄舊駒舉據鋸懼劇鵑絹傑潔結誡屆緊錦僅謹進晉燼盡勁荊覺決訣絕鈞軍駿開凱顆殼課墾懇摳庫褲誇塊儈寬礦曠況虧巋窺饋潰擴闊蠟臘萊來賴藍欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂鐳壘類淚籬離裏鯉禮麗厲勵礫曆瀝隸倆聯蓮連鐮憐漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴淩靈嶺領餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄鹵虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡媽瑪碼螞馬罵嗎買麥賣邁脈瞞饅蠻滿謾貓錨鉚貿麽黴沒鎂門悶們錳夢謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆撚釀鳥聶齧鑷鎳檸獰甯擰濘鈕紐膿濃農瘧諾歐鷗毆嘔漚盤龐國愛賠噴鵬騙飄頻貧蘋憑評潑頗撲鋪樸譜臍齊騎豈啓氣棄訖牽扡釺鉛遷簽謙錢鉗潛淺譴塹槍嗆牆薔強搶鍬橋喬僑翹竅竊欽親輕氫傾頃請慶瓊窮趨區軀驅齲顴權勸卻鵲讓饒擾繞熱韌認紉榮絨軟銳閏潤灑薩鰓賽傘喪騷掃澀殺紗篩曬閃陝贍繕傷賞燒紹賒攝懾設紳審嬸腎滲聲繩勝聖師獅濕詩屍時蝕實識駛勢釋飾視試壽獸樞輸書贖屬術樹豎數帥雙誰稅順說碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻擡攤貪癱灘壇譚談歎湯燙濤縧騰謄銻題體屜條貼鐵廳聽烴銅統頭圖塗團頹蛻脫鴕馱駝橢窪襪彎灣頑萬網韋違圍爲濰維葦偉僞緯謂衛溫聞紋穩問甕撾蝸渦窩嗚鎢烏誣無蕪吳塢霧務誤錫犧襲習銑戲細蝦轄峽俠狹廈鍁鮮纖鹹賢銜閑顯險現獻縣餡羨憲線廂鑲鄉詳響項蕭銷曉嘯蠍協挾攜脅諧寫瀉謝鋅釁興洶鏽繡虛噓須許緒續軒懸選癬絢學勳詢尋馴訓訊遜壓鴉鴨啞亞訝閹煙鹽嚴顔閻豔厭硯彥諺驗鴦楊揚瘍陽癢養樣瑤搖堯遙窯謠藥爺頁業葉醫銥頤遺儀彜蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應纓瑩螢營熒蠅穎喲擁傭癰踴詠湧優憂郵鈾猶遊誘輿魚漁娛與嶼語籲禦獄譽預馭鴛淵轅園員圓緣遠願約躍鑰嶽粵悅閱雲鄖勻隕運蘊醞暈韻雜災載攢暫贊贓髒鑿棗竈責擇則澤賊贈紮劄軋鍘閘詐齋債氈盞斬輾嶄棧戰綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮陣掙睜猙幀鄭證織職執紙摯擲幟質鍾終種腫衆謅軸皺晝驟豬諸誅燭矚囑貯鑄築駐專磚轉賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鑽緻鐘麼為隻兇準啟闆裡靂餘鍊洩‘;
 25 String.prototype.tran=function(){
 26     var s1,s2;
 27     if(zh_choose==‘t‘){
 28        s1 = zh_s;
 29        s2 = zh_t;
 30     }else if(zh_choose==‘s‘){
 31        s1 = zh_t;
 32        s2 = zh_s;
 33     }else{
 34        return this;
 35     }
 36     var a = ‘‘;
 37     var l = this.length;
 38     for(var i=0;i<this.length;i++){
 39         var c = this.charAt(i);
 40         var p = s1.indexOf(c);
 41         a += p < 0 ? c : s2.charAt(p);
 42     }
 43     return a;
 44 }
 45 function setCookie(name, value){
 46     var argv = setCookie.arguments;
 47     var argc = setCookie.arguments.length;
 48     var expires = (argc > 2) ? argv[2] : null;
 49     if(expires != null){
 50        var LargeExpDate = new Date ();
 51        LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));
 52     }
 53     document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString()));
 54 }
 55 function getCookie(Name){
 56     var search = Name + "=";
 57     if(document.cookie.length > 0){
 58         offset = document.cookie.indexOf(search);
 59         if(offset != -1){
 60             offset += search.length;
 61             end = document.cookie.indexOf(";", offset);
 62             if(end == -1){
 63                 end = document.cookie.length;
 64             }
 65             return unescape(document.cookie.substring(offset, end));
 66         }else{
 67             return ‘‘;
 68         }
 69     }
 70 }
 71 function zh_tranBody(obj){
 72     var o = (typeof(obj) == "object") ? obj.childNodes : document.body.childNodes;
 73     for (var i = 0; i < o.length; i++){
 74         var c = o.item(i);
 75         if(‘||BR|HR|TEXTAREA|SCRIPT|‘.indexOf("|"+c.tagName+"|") > 0) continue;
 76         if(c.className == zh_class){
 77             if(c.id == zh_class + ‘_‘ + zh_choose){
 78                 c.setAttribute(‘style‘, zh_style_active);
 79                 c.style.cssText = zh_style_active;
 80             }else{
 81                 c.setAttribute(‘style‘, zh_style_inactive);
 82                 c.style.cssText = zh_style_inactive;
 83             }
 84             continue;   
 85         }
 86         if(c.title != ‘‘ && c.title != null){
 87             c.title = c.title.tran();
 88         }
 89         if(c.alt != ‘‘ && c.alt != null){
 90             c.alt = c.alt.tran();
 91         }
 92         if(c.tagName == "INPUT" && c.value != ‘‘ && c.type != ‘text‘ && c.type != ‘hidden‘ && c.type != ‘password‘){
 93             c.value = c.value.tran();
 94         }
 95         if(c.nodeType == 3){
 96             c.data = c.data.tran();  
 97         }else{
 98             zh_tranBody(c);
 99         }
100     }
101 }
102 function zh_tran(go){
103     if(go) zh_choose = go;
104     setCookie(‘zh_choose‘, zh_choose, zh_expires);
105     if(go == ‘n‘){
106        window.location.reload();
107     }else {
108        zh_tranBody();
109     }
110 }
111 function zh_getLang(){
112     if(getCookie(‘zh_choose‘)){
113        zh_choose = getCookie(‘zh_choose‘);
114        return true;
115     }
116     if(!zh_autoLang_t && !zh_autoLang_s){
117         return false;
118     }
119     if(getCookie(‘zh_autoLang_checked‘)){
120         return false;
121     }
122     if(navigator.language){
123         zh_browserLang = navigator.language;
124     }else if(navigator.browserLanguage){
125         zh_browserLang = navigator.browserLanguage;
126     }
127     if(zh_autoLang_t && zh_langReg_t.test(zh_browserLang)){
128         zh_choose = ‘t‘;
129     }else if(zh_autoLang_s && zh_langReg_s.test(zh_browserLang)){
130         zh_choose = ‘s‘;
131     }
132     zh_autoLang_checked = 1;
133     setCookie(‘zh_choose‘, zh_choose, zh_expires);
134     if(zh_choose == zh_default){
135         return false;
136     }
137     return true;
138 }
139 function zh_init(){
140     zh_getLang();
141     c = document.getElementById(zh_class + ‘_‘ + zh_choose);
142     if(zh_choose != zh_default){
143         if(window.onload){
144             window.onload_before_zh_init = window.onload;
145             window.onload = function(){
146                 zh_tran(zh_choose);
147                 if(zh_autoLang_alert){
148                     
149                 };
150                 window.onload_before_zh_init();
151             };
152         }else{
153             window.onload = function(){
154                 zh_tran(zh_choose);
155                 if(zh_autoLang_alert){
156                 
157                 };
158             };
159         }
160     }
161 }
162 zh_init();
View Code

 

以上是关于网页上简体繁体汉字切换的主要内容,如果未能解决你的问题,请参考以下文章

常见编码格式

新加坡的字体是繁体字还是简体字

Windows10输入法繁体简体切换

繁简汉字之争:简约与厚重之间的文明两难

易语言汉字转utf-8

day01-文件编码