<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #content{ width :500px; height:300px; border: 1px solid 0###; margin: 30px auto; } #search{ width :500px; height:300px; border: 1px; margin: 30px auto ; } #change{ background: yellow; } </style> <script> window.onload=function() { var btn=document.getElementById('btn'); var texts=document.getElementById('texts'); //var content=document.getElementById('content'); var content=document.getElementsByClassName('con')[0]; var str=content.innerHTML; console.log(str); //console.log(str) btn.onclick=function(){ var val=texts.value; if (val=="") { alert("請輸入內容"); } if(str.indexOf(val)==-1) { alert('你輸入的內容不在范圍內'); } else { content.innerHTML=str.split(val).join('<span id="change">'+val+'</span>'); } } } </script> </head> <body> <div class="con" id="content" > 1. 您可以上傳或是從郵件附件中摘取文件並保存於您郵箱的網絡存儲空間中, 您將可以在發送郵件時直接將網絡存儲中的附件加入到待發郵件中. 2. 因為存儲文件夾使用的是您的郵箱空間, 所以您需要注意合理分配存儲文件夾的數據量. 3. 在您刪除存儲文件夾下的子文件夾時, 需要先將子文件夾中的文件轉移或刪除, 否則子文件夾無法被刪除. 4. 您可以通過設置密碼或是不設置密碼的方式共享您的存儲文件夾數據. </div> <div <div class="con1" id="content" > 3. 在您刪除存儲文件夾下的子文件夾時, 需要先將子文件夾中的文件轉移或刪除, 否則子文件夾無法被刪除. 4. 您可以通過設置密碼或是不設置密碼的方式共享您的存儲文件夾數據. </div> <input type="text" id="texts"/> <input type="button" value="查找" id ="btn"/> </div> </body> </html>
實現效果: