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同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python不规范的日期字符串处理类
2014/06/10 Python
Python程序运行原理图文解析
2018/02/10 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
车队安全员岗位职责
2015/02/15 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android