<!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">
<textarea id="edit_textarea_1"></textarea>
</div>
<div class="text right-box">
<textarea id="edit_textarea_2"></textarea>
</div>
</div>
<div class="button">比较</div>
<script type="text/javascript">
function textchange() {
var op = eq({ value1: document.getElementById("edit_textarea_1").value, value2: document.getElementById(&#
对比文字js代码
最新推荐文章于 2024-04-21 09:58:17 发布