javascript | 原生JS多语言切换简单实现
#编程技术 2022-08-11 10:42:00 | 全文 430 字，阅读约需 1 分钟 | 加载中... 次浏览👋 相关阅读
- 给Edge大声朗读同源的微软tts增加下载音频按钮（tampermonkey脚本）
- Typecho 评论弹幕插件下载及食用教程
- Artalk 自托管评论系统的基于宝塔后端部署
- 仿网易评论盖楼 JS 实现 | html
- NUC8黑苹果更新OpenCore引导教程，黑苹果EFI分区空间占满处理方法
由于项目需要实现一个前端的多语言切换，不想因为一个简单的功能就引入 jQuery，所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子，仅供参考。
<body>
<select id="langControl">
<option value="zh">中文</option>
<option value="en">English</option>
</select>
<div lang="title">H5编辑器</div>
<div lang="userLogin">用户登录</div>
</body>
<script>
// 语言字典
const lang = {
zh: {
'title': 'H5编辑器',
'userLogin': '用户登录',
},
en: {
'title': 'H5 editor',
'userLogin': 'The user logs on',
},
}
// 语言设置参数
var lang_key = '';
// 语言切换函数
function chenge_lang(){
var a = document.querySelectorAll('[lang]');
a.forEach(function (item) {
var key = item.getAttribute("lang");
item.innerHTML = lang[lang_key][key];
});
}
// 监控语言选择框
let oCon = document.getElementById("langControl");
oCon.onchange = function(e){
lang_key = oCon.value;
chenge_lang();
}
// 获取浏览器默认语言
let lan = navigator.systemLanguage || navigator.language;
if(lan.toLowerCase().indexOf('zh')!==-1){
console.log('当前浏览器默认语言为中文')
lang_key = 'zh';
}else if(lan.toLowerCase().indexOf('en')!==-1){
console.log('当前浏览器默认语言为英文');
lang_key = 'en';
chenge_lang();
document.getElementById("langControl").value = 'en';
}
</script>
×
![]()