- 英语
- 汉语
- 日语
- 韩语
- 法语
- 俄语
- 德语
目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。
效果如图:
html:
js翻译工具 当前翻译语言类型: 英语
- 英语
- 汉语
- 日语
- 韩语
- 法语
- 俄语
- 德语
引入md5.js,pc样式:
body,html,section,main,header,div,button,ul,li,span,textarea,footer{ margin: 0;padding: 0; } body,html,section,main,header,div,button,ul,li,span,textarea,footer{ box-sizing: border-box; } body,html,section,main,header,div,button,ul,li,textarea,footer{ display: block; } main,.content,.t-header{ position: relative; margin-left: auto; margin-right: auto; } .lang-panel{ position: absolute; } button,textarea{ outline: none; } ul,li{ list-style: none; } .title,.result { font-size: 20px; line-height: 45px; color: rgb(33, 32, 32,0.99); } body{ font: 16px "微软雅黑"; overflow: hidden; height: 100%; width: 100%; background-color: #eee; } main{ width: calc(100% - 60px); height: auto; border: 1px solid #ffffd; box-shadow: 0 5px 10px rgba(255, 255, 255, 0.16); background: #efebf2; border-radius: 15px; padding: 10px; margin-top: 10px; } main .t-header{ width: 100%; height: 45px; border-bottom: 1px solid #f2f2f2; } .t-header .title{ text-align: left; color: #004000; } .t-header .result{ text-align: right; color: #26a9f3; } .lang-panel { width: calc(80% - 20px); height: 42px; top: 0;left: 200px; } .lang-panel li{ width: 100px; height: 45px; line-height: 45px; text-align: center; margin-left: 16px; color: #000000; float: left; cursor: pointer; } .lang-panel li:hover,.lang-panel li:active{ border-bottom: 1px solid #26a9f3; color: #26a9f3; } main .content{ width: 100%; height: 400px; background-color: transparent; } .content textarea{ border: 1px solid #ccc; display: inline-block; width: 49%;height: 100%; float: left; font-size: 18px; resize: none; overflow-y: auto; overflow-x: hidden; } .t-footer { width: 100%; height: 45px; } .t-footer button{ width: 60px; height: 45px; color: #000000; font-size: 16px; text-align: center; line-height: 45px; border: none; margin-right: 45px; float: right; background: transparent; outline:none; cursor: pointer; } .t-footer button:hover{ color: #26a9f3; border-bottom: 1px solid #26a9f3; } .lang-panel .checked,.t-footer button.checked{ color:#26a9f3; border-bottom: 1px solid #26a9f3; }
移动端样式:
body,html,section,main,header,div,button,ul,li,span,textarea,footer{ margin: 0;padding: 0; } body,html,section,main,header,div,button,ul,li,span,textarea,footer{ -webkit-box-sizing: border-box; box-sizing: border-box; } body,html,section,main,header,div,button,ul,li,textarea,footer{ display: block; } main,.content,.t-header{ position: relative; margin-left: auto; margin-right: auto; } button,textarea{ outline: none; } ul,li{ list-style: none; } .title,.result { font-size: 20px; line-height: 45px; color: rgb(33, 32, 32,0.99); } body{ font: 16px "微软雅黑"; overflow-x: hidden; overflow-y: auto; height: 100%; width: 100%; background-color: #eee; } main{ width: 100%; height: 100%; border: 1px solid #ffffd; -webkit-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.16); box-shadow: 0 5px 10px rgba(255, 255, 255, 0.16); background: #efebf2; border-radius: 15px; padding: 10px; margin-top: 10px; } .t-header{ width: 100%; min-height: 45px; } .more{ position: absolute; top: 1px; right: 5px; font-size: 40px; color: #26a9f3; cursor: pointer; display: none; } .t-header .title{ text-align: left; color: #004000; } .t-header .result{ text-align: right; color: #26a9f3; } .lang-panel{ width: 100%; } .lang-panel li{ width: 100%; text-align: center; color: #000000; font-size: 25px; cursor: pointer; } .lang-panel li:hover,.lang-panel li:active{ color: #26a9f3; } main .content{ width: 100%; height: 400px; background-color: transparent; } .content textarea{ border: 1px solid #ccc; display: inline-block; width: 100%; height: 200px; font-size: 18px; resize: none; overflow-y: auto; overflow-x: hidden; } .t-footer { width: 100%; height: 45px; } .t-footer button{ width: calc(50% - 2px); height: 45px; color: #000000; float: left; font-size: 16px; text-align: center; line-height: 45px; border: none; background: transparent; outline:none; cursor: pointer; } .t-footer button:hover{ color: #26a9f3; border-bottom: 1px solid #26a9f3; } .lang-panel .checked,.t-footer button.checked{ color:#26a9f3; border-bottom: 1px solid #26a9f3; } @font-face {font-family: "iconfont"; src: url("iconfont.eot?t=1540120521115"); /* IE9*/ src: url("iconfont.eot?t=1540120521115#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAPcAAsAAAAABiQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9CUiFY21hcAAAAYAAAABLAAABcOe7t2NnbHlmAAABzAAAAC0AAAAw51HPw2hlYWQAAAH8AAAALAAAADYTA0UPaGhlYQAAAigAAAAcAAAAJAfeA4NobXR4AAACRAAAAAgAAAAICAAAAGxvY2EAAAJMAAAABgAAAAYAGAAAbWF4cAAAAlQAAAAgAAAAIAEPABhuYW1lAAACdAAAAUUAAAJtPlT+fXBvc3QAAAO8AAAAHQAAAC5udm97eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeTX42mbnhfwNDDHMDQwNQmBEkBwD0HQ0JeJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISfzb5/38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwCQbwu1AHicY2BmAALmBqYGBmYGdgZuBgZzRVMIFFU0bWBm+MsAwQ2hDWFXQ0MBjR8IxQAAAHicY2BkYGAAYqfCfVXx/DZfGbhZGEDg+qeGk8g0CwNTA5DiYGAC8QA1gQpQeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAAAYAAAAAQAAAAIADAADAAAAAAACAAAACgAKAAAA/wAAAAAAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSU3Na+UgQEAChUBzwAAAA==") format("woff"), url("iconfont.ttf?t=1540120521115") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url("iconfont.svg?t=1540120521115#iconfont") format("svg"); /* iOS 4.1- */ } .iconfont { font-family:"iconfont" !important; /* font-size:16px;*/ font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .menu:before { content: "e693"; }
js代码:
/***************************************************/ /* 功能:一些易用的方法函数的原生JavaScript实现 */ /***************************************************/ /** * 功能:自定义选择器 * 方法qr():获取元素列表中指定索引的元素 * 方法click():为元素列表中所有的元素都添加一个点击事件 * 参数:CSS的ID、Class和标签选择器 **/ function qr(ident) { var selector, sType = ident.slice(0,1), identTxt = ident.slice(1); if (/^[#.]/.test(sType)) { if (sType == "#") { selector = document.getElementById(identTxt); } else if(sType == ".") { selector = document.getElementsByClassName(identTxt); } } else { selector = document.getElementsByTagName(ident); } // 给获取到的元素列表内的每一个元素添加一个点击事件 function sclick(callback) { for(var i = 0; i < selector.length; i++) { selector[i].index = i; selector[i].onclick = function() { callback(); console.log(this.index); } } } // 获取元素数组内指定索引的元素 function getIndextElement(index) { return selector[index]; } return { eq: getIndextElement, click: sclick }; } /** * 功能:给尚未生成的元素绑定特定事件的函数 * 参数:1、事件类型;2、选择标识符(标签名或class名);3、需要执行的事件 **/ function onEvent(action,selector,callback){ document.addEventListener(action,function(e){ if(selector==e.target.tagName.toLowerCase() || selector==e.target.className){ callback(); } }); } Element.prototype.hasClass = function(classname) { var classlist = this.classList; var bool = false; classlist.forEach(function(ele,idx) { if(ele == classname) { bool = true; } }); return bool; } //如果是移动端 if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ var link = qr("link").eq(0),more = qr(".more").eq(0),flag = true; link.href ="./css/indexmobile.css"; qr(".lang-panel").eq(0).style.display = "none"; more.style.display = "block"; qr(".more").click(function(){ if(flag){ qr(".lang-panel").eq(0).style.display = "block"; flag = false; }else{ qr(".lang-panel").eq(0).style.display = "none"; flag = true; } }) } /* * 功能:javascript翻译工具 * 日期:2017/10/26 * 作者:loho */ /*变量定义部分*/ var type = qr(".lang-panel").eq(0).children;//获取语言类型标签 var result = qr(".result").eq(0);//获取语言选择后的结果标签 var input = qr(".input").eq(0),//获取输入内容标签 output = qr(".output").eq(0);//获取输出结果标签 var transBtn = qr(".transbtn").eq(0),//获取翻译按钮 clear = qr(".clear").eq(0);//获取清除按钮 var lang = "en",//语言类型 timer = null,//定时器 len = type.length;//语言类型标签的长度 (function () { function createScript(src) { //创建一个script标签 var script = document.createElement("script"); //添加src和id属性 script.id = "scriptSrc"; script.src = src; //将script标签添加到body页面中 document.body.appendChild(script); } function changeType() { //获取到属性data-type,此时this指向获取的语言类型标签 lang = this.getAttribute("data-type"); this.className = "checked"; for (var j = 0; j < len; j++) { if (this !== type[j]) { type[j].classList.remove("checked"); if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ qr(".lang-panel").eq(0).style.display = "none"; } flag = true; } } //然后将语言类型值赋值给结果标签 result.innerHTML = this.innerHTML; } function translate() { //获取接口 var value = "http://api.fanyi.baidu.com/api/trans/vip/translate?"; //获取当前时间 var date = Date.now(); //此处拼接接口数据,好转换成jsonp数据格式,实现跨域访问 var str = "20180416000147222" + input.value + date + "IvlTe9ogsiBHl9Muevzu"; //使用加密算法计算数据 var md5 = MD5(str); //然后得到的数据 var data = "q=" + input.value + "&from=auto&to=" + lang + "&appid=20180416000147222" + "&salt=" + date + "&sign=" + md5 + "&callback=callbackName"; //引入src路径 var src = value + data; //调用创建script标签函数 createScript(src); } function init() { //循环添加点击事件 for (var i = 0; i < len; i++) { //点击时间就是改变语言类型 type[i].onclick = changeType; } //清除按钮点击事件 clear.onclick = function () { input.value = ""; this.className = "checked"; transBtn.className = ""; } //点击翻译 transBtn.onclick = function () { this.className = "checked"; clear.className = "" //如果输入内容为空则返回 if (!input.value) { return; } //获取创建的script标签 var s = document.getElementById("scriptSrc"); //如果script标签已经存在删除了重新创建 if (s) { s.parentNode.removeChild(s); translate(); } else { translate(); } } } init(); })(); //回调函数定义 function callbackName(str) { // console.log(str); return output.innerHTML = str.trans_result[0].dst; }
鄙人创建了一个QQ群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108751.html
目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。效果如图: showImg(https://segmentfault.com/img/bVbjOTB?w=1920&h=610); showImg(https://segmentfault.com/img/bVbjOTG?w=574&h=862); html: ...
目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。效果如图: showImg(https://segmentfault.com/img/bVbjOTB?w=1920&h=610); showImg(https://segmentfault.com/img/bVbjOTG?w=574&h=862); html: ...
摘要:背景平时不知道用写什么练手,这里就写了一个类似百度翻译的小。对于学生党,能进入学校实验室做项目更好。本文分享到此结束,笔者技术有限,理解有误的地方还请大家多提,大家可以共同学习。 1. 背景: 平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可。对于学生党,能进入学校实验室做项目更好。进不...
摘要:背景平时不知道用写什么练手,这里就写了一个类似百度翻译的小。对于学生党,能进入学校实验室做项目更好。本文分享到此结束,笔者技术有限,理解有误的地方还请大家多提,大家可以共同学习。 1. 背景: 平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可。对于学生党,能进入学校实验室做项目更好。进不...
阅读 2984·2021-11-23 09:51
阅读 2998·2021-11-02 14:46
阅读 865·2021-11-02 14:45
阅读 2741·2021-09-23 11:57
阅读 2495·2021-09-23 11:22
阅读 1925·2019-08-29 16:29
阅读 741·2019-08-29 16:16
阅读 937·2019-08-26 13:44