1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html怎么实现多语言图片切换 JavaScript实现--中英语言切换功能

html怎么实现多语言图片切换 JavaScript实现--中英语言切换功能

时间:2018-10-12 19:37:23

相关推荐

html怎么实现多语言图片切换 JavaScript实现--中英语言切换功能

最近弄的项目是面向国际的,所以老总说要有语言切换功能.第一感觉好像不难吧

网上查了下,感觉实现方法就2种:

一:2个版本的HTML.至于怎么切换,方法也很多.

不过这种方法,除了笨,我实在不知道用什么词来形容.

二:双重标签,一个中文一个英语,之后用css来控制DOM的display,从而来判断显示那种语言.

English

中文

document.getElementById('E').style.display="block"

document.getElementById('Z').style.display="none"

这种方法,虽然好像不错,不过当页面多了,以后不好管理,也会造成页面的臃肿.

所以到头来还是自己搞吧.既然我那么喜欢JavaScript,为啥不用JavaScript来实现呢.

其实,原理也不难,传2个参数,一个是英文文本,一个是中文文本,之后判断一个全局变量来决定是中译英还是英译中.

直接上代码先:

functioninstead_of_language(oldLan,newLan){

vartemp,

all=document.querySelectorAll(".change_lan");

if(change_lan_Z==0){

temp=newLan;

newLan=oldLan;

oldLan=temp;

}

for(i=all.length;i--;){

if(all[i].getAttribute("placeholder")==oldLan){

all[i].setAttribute("placeholder",newLan);

}

if(all[i].innerHTML==oldLan){

all[i].innerHTML=newLan;

}

if(all[i].value==oldLan){

all[i].value=newLan;

}

}

}

用法:

//HTML

Update//给翻译的标签加上class值"change_lan"

//JavaScript

varchange_lan_Z=0;//change_lan_Z等于1时为中译英等于0时为英译中

instead_of_language("Update","更新");//判断的是字符串,所以包括空格或者符号都要加上去

这也是刚刚才写的函数,还不是很完善,目前只是支持翻译标签的文本和input的placeholder属性.

如果各位有发现什么好的改进 或者是BUG的话,欢迎指导批评

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。