TA貢獻(xiàn)55條經(jīng)驗(yàn) 獲得超13個(gè)贊
<!DOCTYPE?HTML>
<%@page?contentType="text/html"?pageEncoding="utf-8"%>
<html>
<head>
</head>
<script?type="text/javascript"?src="jquery.min.js"></script>?
<script?type="text/javascript">
????$(function(){
????????$("#t1").change(function(){
????????????changeText();
????????????});
????????$("#t2").change(function(){
????????????changeText();
????????????});
????});
????
????//檢測(cè)文字的不同并改變顏色
????function?changeText(){
????????var?val1?=?$("#t1").val();
????????var?val2?=?$("#t2").val();
????????//如果其中任意一個(gè)字符串未輸入，不執(zhí)行對(duì)比
????????if(val1.length?==?0?||?val2.length?==?0){????
????????????//清空展示框
????????????$("#str1").html("<font?color='red'>比較時(shí)必須兩個(gè)字符串都不為空</font>");
????????????$("#str2").html("");
????????????return;
????????}
????????var?len?=?0;
????????var?subStr?=?"";
????????//取較短字符串的長(zhǎng)度
????????if(val1.length?<=?val2.length){
????????????len?=?val1.length;
????????????subStr?=?val2.substring(val1.length-1,val2.length-1);????????//獲取較長(zhǎng)字符串多出來的那段文字
????????}else{
????????????len?=?val2.length;
????????????subStr?=?val1.substring(val2.length-1,val1.length-1);????????//獲取較長(zhǎng)字符串多出來的那段文字
????????}
????????var?str1?="";
????????var?str2?="";
????????//對(duì)比后獲取展示字符串
????????for(var?i=0;i<len;i++){
????????????var?char1?=?val1.charAt(i);
????????????var?char2?=?val2.charAt(i);
????????????if(char1?!=?char2){
????????????????char1?=?"<font?color='red'>"+char1+"</font>";
????????????????char2?=?"<font?color='red'>"+char2+"</font>";
????????????}
????????????str1?+=?char1;
????????????str2?+=?char2;
????????}
????????//如果截取的文字不為空，添加字體樣式
????????if(subStr?!=?""){
????????????subStr?=?"<font?color='red'>"+subStr+"</font>";?
????????}
????????//添加文字提示
????????str1?=?"字符串1："+str1;
????????str2?=?"字符串2："+str2;
????????//較長(zhǎng)的字符串加上被截取的部分
????????if(val1.length?>?val2.length){
????????????str1?+=?subStr;
????????}else?if(val2.length?>?val1.length){
????????????str2?+=?subStr;
????????}
????????//清空展示框
????????$("#str1").html("");
????????$("#str2").html("");
????????//展示框中添加對(duì)比結(jié)果
????????$("#str1").append(str1);
????????$("#str2").append(str2);
????}
</script>
<body>
????<div>
????????輸入框1：<input?id="t1"?type="text"><span?style="margin-left:50px;">提示：用的onchange事件,輸入兩個(gè)字符串后隨便點(diǎn)擊一下空白處就可以觸發(fā)</span>
????????<br>
????????輸入框2：<input?id="t2"?type="text">
????</div>
????<div>
????????<div?id="str1"?style="margin-top:20px;"></div>
????????<div?id="str2"></div>
????</div>
</body>
</html>
沒用原生JS 用jquery寫了一個(gè)，效果如上圖。
需要導(dǎo)jquery.min.js包才能使用,也就提供一個(gè)實(shí)現(xiàn)思路，如果需要JS說一聲我改成JS的
舉報(bào)