web项目的中英文切换功

news/2024/10/23 23:31:02/

谈到web项目页面部分的中英文切换功能,实现的方法有很多种,一是直接将所有的页面做一个中文版,一个英文版,通过按钮进行切换,这种做法的坏处就是维护起来很不方便,当页面部分需要修改时,两个版式的页面相应部分都需要修改;二是通过调用API插件的方式,比如谷歌、百度的插件,这种方法需要在联网的情况下使用,不太适合在局域网中发布的项目;第三种方法,做号中英文的对照表,通过JS方式引入。

本文中将讲到第三种方法js方法:

首先是test.jsp页面当然该页面需要引入jquery.js

<head>

<title>测试页面</title>

<script type="text/javascript" src="${pageContext.request.contextPath }/language/language.js"></script>

 <script type="text/javascript"  src="${pageContext.request.contextPath }/language/tes.js"></script>

 <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/js/jquery.min.js"></script>  

 <script type="text/javascript"> 
/* 中英文切换功能添加 */
var lang_flag =0;
// alert(lang_flag+'1');
function changeflag0(){
     $.ajax({
            async: false,
            success: function() {
                lang_flag = 0;
            }
        });
        alert(lang_flag+'2');
}

function changeflag1(){
     $.ajax({
            async: false,
            success: function() {
                lang_flag = 1;
            }
        });
      alert(lang_flag+'3');
}
//alert(lang_flag+'4');

 setInterval('reloadViewl()',500); //每1秒刷新一次页面下边显示的数据
    function reloadViewl(){ 
    fun();
 } 

</script>

</head>

<body>

<div ><input id="cc4" type="button"  name="" value="中文" onClick="changeflag0()"/></div>
 <div class="min9" ><input type="button" name="" value="English" onClick="changeflag1()"/></div>

</body>

 

下面将下tes.js的内容

function fun()
{
    var C1=document.getElementsByTagName('title')[0];
   
    C1.innerHTML= G1[lang_flag];

接着是中英文对照表language.js的内容了

var G1 = ['设备智能监控系统', ' Equipment Intelligent Monitoring System'];

到这里通过JS实现中英文切换的web页面功能就实现了

 


http://www.ppmy.cn/news/752650.html

相关文章

实现界面中英文切换

功能演示 定义两种语言&#xff1a;en_US 和 zh_CN&#xff0c;目录结构如下&#xff1a; 在前端页面的按钮添加两个带有参数的href&#xff1a; <a class"btn btn-sm" th:href"{/index.html(languagezh_CN)}">中文</a> <a class"…

网页实现中英文切换方式对比与实现

一、使用谷歌/微软的翻译API 优点&#xff1a;只须调用接口&#xff0c;即可轻松完成整站翻译&#xff0c;翻译准确度还好。 缺点&#xff1a;谷歌被墙了&#xff0c;使用意义不大&#xff1b;微软的收费。 参考&#xff1a;http://code.google.com/apis/language/translate/…

vue实现中英文切换

简单的使用&#xff08;应用场景&#xff1a;15个以内页面的中英文切换&#xff09; 1、安装 vue-i18n依赖 yarn add vue-i18n 或者 npm install vue-i18n --save-dev 2、在src/components下新建文件夹language&#xff0c;并在文件夹language下新建zh.js及en.js 【src/co…

C# 中英文切换

简介&#xff1a; 一个项目如果要面对外国的客户时&#xff0c;需要语言切换。本文使用XML&#xff0c;XML是可扩展标记语言&#xff08;Extensible Markup Language&#xff09;的缩写&#xff0c;仅用于存储数据。 代码下载链接。 中文 英文 1.使用 新建三个文件。文件的路径…

android中英文切换功能,Android开发之中英文切换

这篇文章详细介绍了Android开发之中英文切换,文中穿插有实例代码和示例程序介绍的很详细,遇到同样问题的朋友可以参考一下,如果有更好的解决方法,请留言分享帮助更多的程序员。 首先配置文件的application标签中要添加: android:configChanges="locale" 然后进入…

android中英文切换功能,Android APP 中英文切换

实习期间,师父要求做app的中英文切换,就顺便记录了下。 一、AndroidManifest.xml文件(清单文件) 在每个要切换语言的Activity下面添加: android:configChanges="locale" 1 3 android:configChanges="locale" 4 android:launchMode="singleTop&quo…

Java之解析json格式字符串

最近在做项目时&#xff0c;遇到将 json 格式字符串解析成 List 对象的情况&#xff0c;记录一下自己的解决方式&#xff0c;以供大家参考。 要解析的字符串如下&#xff1a; [{"displayName":"回踩线", "keyName":"hcx","defau…

2023-07-06:RabbitMQ中的AMQP是什么?

2023-07-06&#xff1a;RabbitMQ中的AMQP是什么&#xff1f; 答案2023-07-06&#xff1a; AMQP AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;是一个应用层协议的开放标准&#xff0c;旨在设计面向消息的中间件。基于AMQP协议的客户端和消息中间件可以自由…