js实现文本代码对比不同

代码语言:html

所属分类:其他

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
 
<head>
   
<title>文本比较工具</title>
   
<style type="text/css">
       
.text textarea {
           
resize: none;
           
background: none repeat scroll 0 0 transparent;
           
border: 0 none;
           
width: 97%;
           
height: 500px;
           
overflow-y: scroll;
           
position: absolute;
           
left: 0;
           
top: 0;
           
z-index: 2;
           
font-size: 18px;
           
white-space: pre-wrap;
           
word-wrap: break-word;
           
word-break: break-all;
           
border: 1px solid red;
       
}
 
       
.text {
           
overflow-y: scroll;
           
white-space: pre-wrap;
           
word-wrap: break-word;
           
word-break: break-all;
           
width: 50%;
           
float: left;
           
text-align: left;
           
z-index: 1;
           
font-size: 18px;
           
position: relative;
           
min-height: 510px;
       
}
 
       
.add {
           
color: red;
       
}
 
       
.delete {
           
color: blue;
           
text-decoration: line-through;
       
}
 
       
.button {
           
width: 100%;
           
line-height: 30px;
           
font-size: 30px;
           
border: 1px solid green;
           
padding: 10px;
           
cursor: pointer;
           
text-align: center;
       
}
 
       
#result-box {
           
padding: 20px;
           
border: 1px solid blue;
       
}
       
.compare-box:after{
           
content: "";
           
display:block;
           
clear: both;
       
}
       
#result{
           
font-size: 20px;
       
}
   
</style>
</head>
 
<body>
   
<div id="result-box">
       
<pre id="result"></pre>
   
</div>
   
<div class="compare-box">
       
<div class="text left-box">
            <te.........完整代码请登录后点击上方下载按钮下载查看

网友评论0