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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python常见内置高效率函数用法示例
2018/07/31 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python用input输入列表的实例代码
2020/02/07 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python datetime模块使用方法小结
2020/06/18 Python
python字典的值可以修改吗
2020/06/29 Python
python实现KNN近邻算法
2020/12/30 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
新学期家长寄语
2014/01/19 职场文书
2014年元旦活动方案
2014/02/15 职场文书
数学教学随笔感言
2014/02/17 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
空气环保标语
2014/06/12 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
一个都不能少观后感
2015/06/04 职场文书
中秋节主题班会
2015/08/14 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
Nebula Graph解决风控业务实践
2022/03/31 MySQL