位置: 编程技术 - 正文

JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招(javascript点击切换div内容)

编辑:rootadmin

推荐整理分享JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招(javascript点击切换div内容),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript点击切换div内容,使用js实现内容的切换,javascript切片,javascript切片,javascript快速切换图片闪烁,javascript切片,javascript切片,js 切换页面,内容如对您有帮助,希望把文章链接给更多的朋友!

一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”)。传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言。这里笔者介绍一种简单可行的方法,不是在服务端而是利用前端的 JavaScript 就可以切换正体中文。

大概六年前我还专门写过这议题的博文,这篇也是奠基在那篇文章(旧文也是参考了一高手代码)之上,《对 JavaScript 繁简字切换的小改进》。时过境迁,有必要把代码进行更新一下——以前的太稚嫩啦。

如下图,我们把切换按钮放在页脚(当然你也可以放置在“导航”或者其他更醒目的位置)。

由于页面假设设定均使用 Unicode 字符集,于是一般不用考虑 GB/BIG5 字符集问题,伟大的 Unicode 字符集已经涵盖了繁体字的字符了(UTF-8 编码)。

怎么在页面调用这个功能呢?很简单,首先引入下面 Js(注意还依赖 Function.prototype.delegate(), 下面会提及):

然后绑定按钮事件,我们简单地使用 onclick 绑定来全局函数 window.toChinese(el)、window.toSimpleChinese(el)。el 是按钮元素。

js 代码中比较长的两个字符串变量分别是简体中文和繁体中文,他们之间的切换没有什么神奇之处,只是所有文本经过这些变量一一对应即可。当然这里只是常用的繁简对应,而且是机械的,有些特殊的翻译需要联系上下文的,那种高级转换不在此讨论之列。

首先我们看看变量函数 translate,执行它会通过递归遍历完整个 DOM(可以说比较笨的方法)

JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招(javascript点击切换div内容)

转换 DOM 内容,我们第一时间想到的可能是 el.innerHTML,但其实大可不必,而且递归的时候 innerHTML 不太方便。不妨再想想看,我们其实只需要对文本转换即可,DOM API 能够判断 文本节点(node.nodeType == 3),然后可读可写的 data 属性就是设置文本的(textNode.data),由此我们就可以完成到繁体的切换。节点其他属性 title、alt、value 亦是同样原理。另外,if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; 是排除某些节点的方法,其思路比较特别,可以多观摩下。

至于 coverntFn 是一函数参数。通过根函数 translateText(text, isBig5) 新生成两个函数 :var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);

Function.prototype.delegate() 方法如下。

繁简的转换基本如此了。值得一提的是,浏览器其实替我们识别语言环境的变量,主要是 navigator.userLanguage || navigator.language。这个变量在服务端也可以获取,头读取:Request.ServerVariables("http_accept_language")。

最后我们还通过 cookie 来保存语言状态。

下面给大家介绍下三步让你的网站支持简体繁体切换

不少网站为了更好地照顾不同用户使用简体/繁体的阅读习惯,会提供简体繁体两种版本字体切换,提高用户体验。例如hexo虽然作者是来自台湾的,但是hexo的官网不仅提供了适合台湾同胞阅读的繁体中文版,还提供了适合我们内地同胞阅读的简体中文版,照顾了我们这些习惯使用简体读写的大陆用户,hexo得到了不少内地忠实粉丝追捧。同样,我们也可以提供繁体版来照顾那些使用繁体字的台湾、香港同胞阅读习惯。

具体实现:

首先,点击这里右键另存下载简繁字体切换所需的 tw_cn.js 文件,上传到自己的网站空间。其次,修改模板,在你想要显示简繁转换按钮的地方加上下面一段代码,正常情况添加到 header.php 或者 siderbar.php 就可以了。

最后,在footer.php添加下面代码,记得更改 cookieDomain 这一项。

这就基本完成了简体繁体切换功能,不管你是hexo,jelly,Octopress等静态博客,还是wordpress,typecho,emlog,Z-Blog等动态的,都可以用上。具体的演示效果可以点击我博客底部简体中文切换字体,至于简体繁体切换按钮嘛,文字和样式可以按个人喜好自行更改。

JavaScript过滤字符串中的中文与空格方法汇总 js如何过滤字符串里中文或空格呢?方法有很多种,我们可以使用替换与正则表达式来实现,本文向大家介绍两个简单的例子,感兴趣的朋友可以参考一

Bootstrap每天必学之日期控制 一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的,控件地址:

JavaScript实现字符串与日期的互相转换及日期的格式化 字符串转日期、日期转字符串//--/***字符串转时间(yyyy-MM-ddHH:mm:ss)*result(分钟)*/stringToDate:function(fDate){varfullDate=fDate.split("-");returnnewDate(fullDate[0

标签: javascript点击切换div内容

本文链接地址:https://www.jiuchutong.com/biancheng/378970.html 转载请保留说明!

上一篇:javascript特殊日历控件分享(js特殊字符有哪些)

下一篇:JavaScript过滤字符串中的中文与空格方法汇总(js过滤字符串中的特殊字符)

  • 全国增值税发票服务平台
  • 应收出口退税金额无法收回怎么做账?
  • 分公司可以在银行开户吗
  • 补贴收入如何入账
  • 电子承兑汇票怎么做账
  • 期末现金及现金等价物余额公式
  • 高速公路通行费发票可以抵扣增值税吗
  • 转业士官自谋职业
  • 分类账和明细账平行登记规则
  • 可供出售金融资产新准则叫什么
  • 公司员工的伙食费计入什么科目
  • 应付账款扣款怎么做账
  • 房地产企业作为甲方开票给施工单位
  • 资本公积提取比例怎么算
  • 企业重组有什么好处
  • 发票请求流水号不能为空
  • 多缴税款能否跨年抵扣
  • 已认证的发票开红字红发要去税局吗
  • 房产税计税税率怎么算
  • 我的初级奋斗经历作文
  • 小规模纳税人一个月能开多少税票
  • 实收资本未到位借款利息可以税前扣除吗
  • 税局代开专票季度未达起征点怎么缴纳地税?
  • win10 20h2更新后闪屏
  • 开发间接费用定义
  • win10电脑输入法不见了怎么恢复
  • 运行网络操作系统的设备
  • msgdlg.exe是什么意思
  • 外地的社保在本地个税扣除
  • 日记账登记错了怎么办
  • 房地产企业土地增值税预缴
  • php实现功能
  • 残疾人增值税即征即退税收减免备案
  • 公司报亏损需要交税吗
  • laravel 5.1下php artisan migrate的使用注意事项总结
  • 专利代理服务费计入什么科目
  • 其他综合收益什么类科目
  • 企业的存货采用计划成本核算的,在资产负债表日
  • node与nodejs
  • php array_slice 取出数组中的一段序列实例
  • 命令压缩文件
  • 织梦怎么样
  • 苗木可以进项抵扣的么
  • 新租赁准则下的会计分录
  • 入库单如何做账分录
  • 快速实现愿望超灵的方法
  • 小企业销售商品时,确认收入的标志有
  • 税务怎么认定虚列工资
  • 应付账款不需要支付了会计怎么处理
  • 已开普通发票记账联丢失怎么办?
  • 水费差额缴税如何计算
  • 车辆抵押贷款怎么办理
  • 营改增和个税改革的意义
  • 增值税附加税印花税都是什么
  • 印花税 不足
  • 支付残疾人保证金的现金流
  • sqlserver1053怎么解决
  • mysql57服务无法启动,找不到文件夹
  • win8.1的开始菜单在哪
  • WINDOWS SERVER 2008开启桌面主题具体步骤
  • linux安装mailx
  • WIN10开启高性能模式
  • win10激活后是什么样子
  • mac dock栏不见了
  • windows7开机启动
  • win8系统切换桌面
  • schupd.exe - schupd是什么进程 有什么用
  • linux怎么查看挂载点
  • google collections
  • 粒子form
  • 如何修改android studio的下载路径
  • Javascript & DHTML 实例编程(教程)(四)初级实例篇2—动画
  • 关于python中的判断条件
  • ajax与java使用实例
  • 安徽省低保查询入口官网
  • 电子发票版式文件生成失败怎么办
  • 电脑多窗口同步操作
  • 南宁税务局进面分数线
  • 2020年个税截止时间
  • 石家庄经开区税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设