每天学一个jquery插件-js版多语言

每天一个jquery插件-js版多语言

js版多语言

基本实现了效果吧

效果如下
每天学一个jquery插件-js版多语言_第1张图片

代码部分


<html>
	<head>
		<meta charset="utf-8">
		<title>js版多语言title>
		<script src="js/jquery-3.4.1.min.js">script>
		<style>
			* {
      
				margin: 0px;
				padding: 0px;
				user-select: none;
			}

			#head {
      
				position: fixed;
				top: 10px;
				height: 30px;
				left: 10px;
				right: 10px;
				border: 1px solid lightgray;
				white-space: nowrap;
			}
			.hitem{
      
				display: inline-flex;
				font-size: 12px;
				height: 100%;
				width: 50px;
				justify-content: center;
				align-items: center;
			}
			#body {
      
				position: fixed;
				top: 40px;
				bottom: 10px;
				left: 10px;
				right: 10px;
				border: 1px solid lightgray;
				border-top: none;
			}
			ul{
      
				margin-left: 20px;
				font-size: 12px;
				height: 30px;
			}
			ul li{
      
				margin: 10px;
			}
		style>
	head>
	<body>
		<div id="head">
			<div class="hitem"><a href="?lan=zh-cn">中文a>div>
			<div class="hitem"><a href="?lan=en">英语a>div>
			<div class="hitem"><a href="?lan=ja">日语a>div>
		div>
		<div id="body">
			<ul>
				<li class="lan">你好li>
				<li class="lan">谢谢li>
				<li class="lan">早上好li>
			ul>
		div>
	body>
html>
<script>
	//超链接中是否有lan
	var lan1 = qs("lan");
	//缓存中是否有lan
	var temp = localStorage["lan"]
	var lan2 = temp == undefined ? 'chinese' : temp;
	var lan = "";
	if(lan1){
      
		lan = lan1;
		localStorage["lan"] = lan1;
	}else{
      
		lan = lan2;
	}
	// console.log(lan);
	
	
	$(document).ready(function() {
      
		//从缓存之中找到对应的记录
		getd().then(res => {
      
			$(".lan").arr().forEach(item=>{
      
				var text = item.text();
				var temp = res[lan][text];
				var text2 = temp==undefined?text:temp;
				item.text(text2);
			})
		})
	})
	function qs(name) {
      
	    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) {
      
	        return unescape(r[2]);
	    }
	    return undefined;
	}
	$.prototype.arr = function () {
      
	    var that = this;
	    var arr = [];
	    for (var i = 0; i < that.length; i++) {
      
	        arr.push($(that[i]));
	    }
	    return arr;
	}
	function getd() {
      
		return new Promise((resolve, reject) => {
      
			$.ajax({
      
				type: 'get',
				url: 'js/database.json',
				async: true,
				success: res => {
      
					resolve(res);
				},
				error: res => {
      
					reject(res);
				}
			})
		})
	}
script>

{
     
	"zh-cn":{
     
		"你好":"你好",
		"谢谢":"谢谢",
		"早上好":"早上好"
	},
	"en":{
     
		"你好":"Hello",
		"谢谢":"thanks",
		"早上好":"good morning"
	},
	"ja":{
     
		"你好":"空你几哇",
		"谢谢":"阿里嘎多",
		"早上好":"哦哈哟"
	}
}

思路解释

  • 语言文本用json格式存好,管理就是通过键值对的方式增加修改就行了
  • 而且js本身就是可以同源拉取文件的,像是json的配置文件完全可以直接用ajax读取到
  • 然后给对应的文本一个标记,让方法找到所有标记的文本段落,一对一替换成对应的翻译就行了

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)