html制作搜索页面代码,页内搜索功能源代码

function encode(s){

return s.replace(/&/g,"&").replace(//g,">").replace(/([\.*[]()$^])/g,"\$1");

}

function decode(s){

return s.replace(/\([\.*[]()$^])/g,"$1").replace(/>/g,">").replace(/

}

function highlight(s){

if (s.length==0){

alert('搜索关键词未填写!');

return false;

}

s=encode(s);

var obj=document.getElementsByTagName("body")[0];

var t=obj.innerHTML.replace(/([^<>]*)/gi,"$1");

obj.innerHTML=t;

var cnt=loopSearch(s,obj);

t=obj.innerHTML

var r=/{searchHL}(({(?!/searchHL})|[^{])*){/searchHL}/g

t=t.replace(r,"$1");

obj.innerHTML=t;

alert("搜索到关键词"+cnt+"处")

}

function loopSearch(s,obj){

var cnt=0;

if (obj.nodeType==3){

cnt=replace(s,obj);

return cnt;

}

for (var i=0,c;c=obj.childNodes[i];i++){

if (!c.className||c.className!="highlight")

cnt+=loopSearch(s,c);

}

return cnt;

}

function replace(s,dest){

var r=new RegExp(s,"g");

var tm=null;

var t=dest.nodeValue;

var cnt=0;

if (tm=t.match(r)){

cnt=tm.length;

t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")

dest.nodeValue=t;

}

return cnt;

}

.highlight{background:green;font-weight:bold;color:white;}

一个页内搜索代码,功能很实用,站内搜索经常用到.

以下是HTML网页特效代码,点击运行按钮可查看效果

以下是一个简单的 HTML 论坛页面的示例源代码,包括一些常见的 HTML 元素和样式: ```html <!DOCTYPE html> <html> <head> <title>我的论坛</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; } form { width: 50%; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 5px #aaa; } input[type="text"], textarea { width: 100%; padding: 10px; box-sizing: border-box; margin-bottom: 20px; border: 2px solid #ccc; border-radius: 4px; resize: none; } input[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } .comment { background-color: #fff; border-radius: 5px; box-shadow: 0 0 5px #aaa; padding: 20px; margin-bottom: 20px; } .comment h3 { margin-top: 0; } .comment p { margin-top: 5px; } </style> </head> <body> <h1>欢迎来到我的论坛!</h1> <form> <h2>发表评论</h2> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="comment">评论:</label> <textarea id="comment" name="comment" rows="5" required></textarea> <input type="submit" value="提交评论"> </form> <div class="comment"> <h3>张三 2021-01-01</h3> <p>这是我的评论,非常好!</p> </div> <div class="comment"> <h3>李四 2021-01-02</h3> <p>我也来留言了,支持你!</p> </div> </body> </html> ``` 这段代码包括一个表单,让用户发表评论,并且显示了两个样式相同的评论。你可以根据你的需求修改这些样式和添加其他功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值