首页 > web前端 > js教程 > 正文

纯JavaScript代码实现文本比较工具_javascript技巧

WBOY
发布: 2016-05-16 15:15:16
原创
1628 人浏览过

之前项目需求需要写一个纯js文本比较工具,在此小编把代码分享在脚本之家平台供大家参考,算法有待优化,本文写的不好还请见谅。

先上效果图:

代码如下所示:

把源码保存为html格式的文件就可以直接运行了

<!doctype html>
<html>
<head>
<title>文本比较工具</title>
<style type="text/css">
*{padding:px;margin:px;}
html,body{
overflow-y: hidden;
}
.edit_div{
border: px solid #CCCCCC;
overflow: auto;
position: relative;
}
.edit_div textarea{
resize:none;
background: none repeat scroll transparent;
border: none;
width: %;
height:px;
overflow-y: scroll;
position: absolute;
left: px;
top: px;
z-index: ;
font-size: px;
white-space: pre-wrap;
word-wrap: break-word;
word-break:break-all;
}
.edit_div pre{ 
overflow-y: scroll;
white-space: pre-wrap;
word-wrap: break-word;
word-break:break-all;
width: %;
height:px;
text-align: left;
color: #ffffff;
z-index: ;
font-size: px;
}
</style>
</head>
<body>
<table style="width:%">
<tr>
<td style="width:%">
<div class="edit_div">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre id="edit_pre_">
登录后复制
登录后复制
登录后复制

以上代码是使用的纯JavaScript代码实现文本比较工具,希望对大家有所帮助!

相关标签:
来源:php.cn
上一篇:使用jQuery判断Div是否在可视区域的方法 判断div是否可见_jquery 下一篇:让图片跳跃起来 javascript图片轮播特效_javascript技巧
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板