本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

472

javascript | 原生JS多语言切换简单实现

编程技术 | WangTwoThree | 2022-08-11 | 等你评论 | 0 次点赞

由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。

图片alt

<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>

猜你喜欢

暂无评论

有话要说

tips:首次评论须经过审核才会显示,请不要重复提交
本页二维码

扫码手机打开

浏览TOP5
热门标签
点赞TOP5
最新评论
别人在看