目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。
效果如图:
html:
js翻译工具textarea:disabled{
background-color: #fff;
}
当前翻译语言类型:
英语
- 英语
- 汉语
- 日语
- 韩语
- 法语
- 俄语
- 德语
翻译
清除
引入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 #ddd;
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 #ddd;
-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;
}
2592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
