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

当前位置:首页 / 正文

2022-08-11 | 编程技术 | 1857 次阅读 | 等你评论 | 2 次点赞 | 繁体

由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 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>

标签: javascript源码前端教程

猜你喜欢
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
typecho使用文件缓存加快打开速度
typecho 是一个伪静态的博客系统,如果不使用缓存,每次打开页面都会查询数据库,访问人数多了以后服务器压力倍增。但是,typecho 是一个 php 的程序,我们可以利用 php 将实时页面...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
NUC8黑苹果更新OpenCore引导教程
鉴于本人的苹果笔记本年代久远,又想用最新的系统,所以早早就入手了 NUC8,并且成功安装了 macOS,使用 OC 引导,由最初的 macOS Catalina 10.15.7 陆续升级到了 m...
局域内网的服务器利用个人电脑做跳板机访问互联网
公司内网的服务器均不连公网(互联网),问题来了:现在服务器上需要安装一些软件怎么办?目前一般都是编译安装!先将软件在外网机器上下载好,然后再复制到服务器内,编译安装!这种方式缺点就是比较麻烦,编...
ssh-chat- SSH命令行下聊天摸鱼服务
ssh-chat 是一个使用 Go 语言编写的定制 SSH 服务器,当你连到该服务器时就会进入聊天模式,就好像以前的终端 BBS 系统一样。官方 Github: https://github.c...
Nginx常用屏蔽规则,让网站更安全
前言 Nginx (engine x) 是一个高性能的 HTTP 和反向代理服务,目前很大一部分网站均使用了 Nginx 作为 WEB 服务器,Nginx 虽然非常强大,但默认情况下并不能阻挡恶
Mac OS 下 HomeBrew 更新缓慢问题解决
mac下的brew命令虽然非常好用,但是遇见更新慢时,是很闹心的一件事。 最简单的解决办法就是 替换国内源。 这里我们使用中科大的源(当然还有很多其它源,可自行搜索),方法如下: #
像程序员一样安装程序:Chocolatey 初见
每次拿到一台新的电脑,快速安装上所有自己需要的程序是一件非常非常耗时间的事情。 如果去国内各大第三方下载站,或者电脑管家、百度的安装工具,它们很多都会把原生的安装包进行修改,加入自己的广告或其他
(首次提交评论需审核通过才会显示,请勿重复提交)