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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery实现手风琴特效
Jan 11 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 xml-rpc远程调用
2008/12/19 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
javascript self对象使用详解
2016/10/18 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
初学Python实用技巧两则
2014/08/29 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
实例讲解python中的协程
2018/10/08 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
《夜晚的实验》教学反思
2014/02/19 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
师德师风自查材料
2014/10/14 职场文书
云台山导游词
2015/02/03 职场文书