JavaScript-i18n/Example2.js at main · ZexWoo/JavaScript-i18n · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
//使用 LocalStorage 存储多语言设置
var ls = window.localStorage;

//定义一个感应并切换语言的定时器
var langInterval;

//获取浏览器语言以自动设置显示语言
var lang = navigator.language;
lang = lang.substring(0, 2);
if(!ls.lang){
    if(lang == "zh"){
        ls.lang = "zh";
    }else if(lang == "jp"){
        ls.lang = "jp";
    }else {
        ls.lang = "en";
    }
}

//页面 HTML 整体加载完毕后再执行下列代码
window.onload = function(){
    //语言切换按钮
    var buttonZh = document.getElementById("buttonZh");
    var buttonEn = document.getElementById("buttonEn");
    var buttonJp = document.getElementById("buttonJp");

    //遍历双语键值
    var keys = document.getElementsByClassName("keys");

    //声明计数器，适用于 keys 数组
    var i;

    //按钮状态变化函数
    function btnChange(){
        if(ls.lang == "zh"){
            buttonZh.style.color = "unset";
            buttonZh.style.cursor = "default";
            buttonEn.style.color = "";
            buttonEn.style.cursor = "";
            buttonJp.style.color = "";
            buttonJp.style.cursor = "";
        }else if(ls.lang == "en"){
            buttonZh.style.color = "";
            buttonZh.style.cursor = "";
            buttonEn.style.color = "unset";
            buttonEn.style.cursor = "default";
            buttonJp.style.color = "";
            buttonJp.style.cursor = "";
        } else if (ls.lang == "jp") {
            buttonZh.style.color = "";
            buttonZh.style.cursor = "";
            buttonEn.style.color = "";
            buttonEn.style.cursor = "";
            buttonJp.style.color = "unset";
            buttonJp.style.cursor = "default";
        }
    }

    //网页标题双语切换函数
    function htmlTitleSwitcher(){
        if(ls.lang == "zh"){
            document.title = "示例网页";
        }else if(ls.lang == "en"){
            document.title = "Example Website";
        } else if (ls.lang == "jp") {
            document.title = "ウェブサイトの例";
        };
    }

    //单键替代函数
    function replace(before, after){
        if(keys[i].innerHTML == before){
            keys[i].innerHTML = after;
        };
    };

    //中文切换按钮的单击响应函数
    buttonZh.onclick = function(){
        ls.setItem("lang", "zh");
        switchToChinese();
        location.reload();
    };

    //英文切换按钮的单击响应函数
    buttonEn.onclick = function(){
        ls.setItem("lang", "zh");
        switchToChinese();
        location.reload();
        ls.setItem("lang", "en");
        switchToEnglish();
    };

    //日文切换按钮的单击响应函数
    buttonJp.onclick = function () {
        ls.setItem("lang", "zh");
        switchToChinese();
        location.reload();
        ls.setItem("lang", "jp");
        switchToJapanese();
    };

    //用于遍历并替换成中文的函数
    function switchToChinese() {
        btnChange();
        //切换网页标题语言
        htmlTitleSwitcher();
    };

    //用于遍历并替换成英文的函数
    function switchToEnglish() {
        btnChange();
        //切换网页标题语言
        htmlTitleSwitcher();

        //遍历替换
        for(i=0; i<keys.length; i++){
            replace("这是一行用于演示的文本。", "This is an example line of text.");
        }
    };

    //用于遍历并替换成日文的函数
    function switchToJapanese() {
        btnChange();
        //切换网页标题语言
        htmlTitleSwitcher();

        //遍历替换
        for(i=0; i<keys.length; i++){
            replace("这是一行用于演示的文本。", "これはテキストの例です。");
        }
    };

    //根据 LocalStorage 存储的值判定当前应该显示的语言
    if(ls.lang == "zh"){
        switchToChinese();
    }else if(ls.lang == "en"){
        switchToEnglish();
    }else if(ls.lang == "jp"){
        switchToJapanese();
    }
}