- 英語
- 漢語
- 日語
- 韓語
- 法語
- 俄語
- 德語
資訊專欄INFORMATION COLUMN
目前還未完成的功能有: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群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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即可。對于學生黨，能進入學校實驗室做項目更好。進不...
閱讀 2983·2021-11-23 09:51
閱讀 2997·2021-11-02 14:46
閱讀 864·2021-11-02 14:45
閱讀 2739·2021-09-23 11:57
閱讀 2493·2021-09-23 11:22
閱讀 1924·2019-08-29 16:29
閱讀 740·2019-08-29 16:16
閱讀 937·2019-08-26 13:44
