看图！ 下面代码
<!DOCTYPE html >
<html><head>
<title>字符串转换</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.οnlοad=function(){//不用谢！我叫雷锋！
var content=document.getElementById("content");//得到左边那个框的对象
var resultContent=document.getElementById("resultContent");//得到右边那个框的对象
var resetButton=document.getElementById("resetButton");//清空按钮
var copyButton=document.getElementById("copyButton");//复制按钮
var clearButton=document.getElementById("clearButton");//全清按钮
var switchButton=document.getElementById("switchButton");//变身按钮
//清空结果
resetButton.οnclick=function(){
resultContent.value="";
}
//复制结果
copyButton.οnclick=function(){
var copyStr=document.getElementById("resultContent");//对象是resultContent
copyStr.select(); //选择对象
document.execCommand("Copy");//执行复制操作
}
//全部干掉
clearButton.οnclick=function(){
content.value="";
resultContent.value="";
}
switchButton.οnclick=function(){
var leftFlag=document.getElementById("leftFlag").value;//加在前面的字符串
var rightFlag=document.getElementById("rightFlag").value;//加在后面的字符串
var divFlag=document.getElementById("divFlag").value;//用于分割的字符串
var result="";
var xx=content.value.split(/[\n ]/);//这个很坑爹，竟然用"/[ ]/"这个破玩意增加分割字符，谁TM想出来的！
var result="";
var branch=document.getElementById("branch");
var m = -1;
for(var i=0;i<xx.length;i++){//遍历分割的字符串
if(xx[i]!=null&&xx[i]!=""){//去除空字符串
m++;
if(branch.checked&&i<xx.length-1){
result+= leftFlag+xx[i]+rightFlag+divFlag+"\n";//启用这一行就可以换行。
}else{
result+= leftFlag+xx[i]+rightFlag+divFlag;//组成腿和脚，组成躯干和手臂，我来组成头部！前进，战神金刚！
if((m+1)%3==0){//一行展示三个
result+="\n";
}
}
}
}
if((m+1)%3==0){
result=result.substring(0, result.length-2);//去除末尾换行和分隔符
}else{
result=result.substring(0, result.length-1);//去除末尾分割字符串
}
resultContent.value=result;//把结果放进结果框，对，就是那个框，你懂得！
}
}
</script>
<style>
html{
width:100%;
height:100%;
}
body{
background-color:#F5F5DC;
font-size:15px;
font-family:"Arial","Tahoma","微软雅黑","雅黑";
line-height:18px;
padding:0px;
margin:0px;
text-align:center;
}
.button{
width: 100px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 15px 0px 0;
position: relative;
overflow: hidden;
}
.button.blue{
border:1px solid #1e7db9;
box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
background: linear-gradient(top,#42a4e0,#2e88c0);
}
.blue:active{
top:1px;
box-shadow: 0 1px 3px #114566 inset,0 3px 0 #4169E1;
background: -webkit-linear-gradient(top,#1a71a8,#1976b1);
background: -moz-linear-gradient(top,#1a71a8,#1976b1);
background: linear-gradient(top,#1a71a8,#1976b1);
}
.blue:hover{
background: -webkit-linear-gradient(top,#70bfef,#4097ce);
background: -moz-linear-gradient(top,#70bfef,#4097ce);
background: linear-gradient(top,#70bfef,#4097ce);
}
.button.red{
border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
.red:active{
top:1px;
box-shadow: 0 1px 3px #5b0505 inset,0 3px 0 #4169E1;
background: -webkit-linear-gradient(top,#b11a1a,#bf2626);
background: -moz-linear-gradient(top,#b11a1a,#bf2626);
background: linear-gradient(top,#b11a1a,#bf2626);
}
.red:hover{
background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);
background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);
background: linear-gradient(top,#eb6f6f,#c83c3c);
}
.button.black{
border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
}
.black:active{
top:1px;
box-shadow: 0 1px 3px #111 inset,0 3px 0 #4169E1;
background: -webkit-linear-gradient(top,#424242,#575757);
background: -moz-linear-gradient(top,#424242,#575757);
background: linear-gradient(top,#424242,#575757);
}
.black:hover{
background: -webkit-linear-gradient(top,#818181,#575757);
background: -moz-linear-gradient(top,#818181,#575757);
background: linear-gradient(top,#818181,#575757);
}
.button.yellow{
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
}
.yellow:active{
top:1px;
box-shadow: 0 1px 3px #816b1f inset,0 3px 0 #4169E1;
background: -webkit-linear-gradient(top,#d3a203,#dba907);
background: -moz-linear-gradient(top,#d3a203,#dba907);
background: linear-gradient(top,#d3a203,#dba907);
}
.yellow:hover{
background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
background: -moz-linear-gradient(top,#ffd859,#e3bb38);
background: linear-gradient(top,#ffd859,#e3bb38);
}
div.d1{
margin:20px 0px 0px 0px;
}
div.d2{
width: 100px;
line-height: 20px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div class="d1">
<table align="center">
<tr>
<td>
请输入需要添加在前面的字符：
</td>
<td>
<input type="text" name="leftFlag" id="leftFlag" value="'">
</td>
</tr>
<tr>
<td>
请输入需要添加在后面的字符：
</td>
<td>
<input type="text" name="rightFlag" id="rightFlag" value="'">
</td>
</tr>
<tr>
<td>
请输入需要添加的分割标点符：
</td>
<td>
<input type="text" name="divFlag" id="divFlag" value=",">
</td>
</tr>
<tr>
<td>
<textarea id="content" name="content" rows="25" cols="25" placeholder="请输入要转化的字符串！"></textarea>
</td>
<td>
<textarea readonly id="resultContent" name="resultContent" rows="25" cols="25" placeholder="这里将出现你要的结果！"></textarea>
</td>
</tr>
<tr><td></td>
<td align="center"> <div class="d2"><input type="checkbox" name="branch" id="branch" value="结果换行" />结果换行</div>
</td>
</tr>
<tr>
<td>
<input class="button blue" type="button" value="转换字符" id="switchButton" style="align:left;">
<input class="button red" type="button" value="全部清空" id="clearButton"style="align:right;">
</td>
<td>
<input class="button black" type="button" value="复制结果" id="copyButton">
<input class="button yellow" type="button" value="清空结果" id="resetButton">
</td>
</tr>
</table>
<div>
</body>
</html>
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
