jQuery实现的中英文切换功能示例


Posted in jQuery onJanuary 11, 2019

本文实例讲述了jQuery实现的中英文切换功能。分享给大家供大家参考,具体如下:

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中英文切换</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/language.js"></script>
</head>
<body>
 <button id="change">中英文切换</button>
 <div style="text-align: center">
  你好
 </div>
</body>
<script type="text/javascript">
 $("#change").click(function() {
  translate();
 })
</script>
</html>

2.language.js

$(function(){
 // do something
 var script=document.createElement("script");
 script.type="text/javascript";
 script.src="js/translate.js";
 document.getElementsByTagName('head')[0].appendChild(script);
 var value = sessionStorage.getItem("language");
 document.onreadystatechange = function () {
  if (document.readyState == 'complete') {
   if(value==="1"){
    Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
   }
  }
 }
 function onProgress(value) {
 }
 function onError(error) {
 }
 function onComplete() {
  $("#WidgetFloaterPanels").hide();
 }
 function onRestoreOriginal() {
 }
});
function translate(){
 var value = sessionStorage.getItem("language");
 if(value==="1"){
  sessionStorage.setItem("language", "0");
 }else{
  sessionStorage.setItem("language", "1");
 }
 window.location.reload();//刷新当前页面.
}

3.translate.js是将http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**的源码下载下来的,并将里面

<1> J = "block", ib = "inline-block",都改成等于none

<2>s.style.color = q;s.style.backgroundColor = p两行注释

目的是去除翻译后出现的弹框和hover效果

最后:

jQuery实现的中英文切换功能示例

jQuery实现的中英文切换功能示例

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 #jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
linux 下selenium chrome使用详解
2020/04/02 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
技术人员面试提纲
2013/11/28 职场文书
初三物理教学反思
2014/01/21 职场文书
材料员岗位职责
2014/03/13 职场文书
保护环境建议书400字
2014/05/13 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
工作感言一句话
2015/08/01 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
 Python 中 logging 模块使用详情
2022/03/03 Python