投稿
  1. 首页
  2. 随笔

html制作一个搜索框，代码是什么？

钞票的图片 • 2023-3-16 • 随笔 • 阅读 62

html制作一个搜索框，代码是什么？,第1张

1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：

2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：

3、按crtl+s，在软件的右侧即可看到最终的效果。以上就是用html制作搜索框的演示：

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

类似于按F3的功能～！

只搜索当前页中是文字～！

不要查询数据库

解析:

<>

<head>

<meta -equiv="Content-Language" content="zh-">

<meta -equiv="Content-Type" content="text/charset=gb2312">

<title>test</title>

</head>

<body class="page_speeder_724936674">

<script language="JavaScript">

var NS4 = (documentyers)Which browser?

var IE4 = (document.all)

var win = windowwindow to search.

var n = 0

function findInPage(str) {

var txt, i, found

if (str == "")

return false

Find next occurance of the given string on the page, wrap around to the

start of the page if necessary.

if (NS4) {

Look for match starting at the current point. If not found, rewind

back to the first match.

if (!win.find(str))

while(win.find(str, false, true))

n++

else

n++

If not found in either direction, give message.

if (n == 0)

alert("本页没有查到.")

}

if (IE4) {

txt = win.document.body.createTextRange()

Find the nth match from the top of the page.

for (i = 0i <= n &&(found = txt.findText(str)) != falsei++) {

txt.moveStart("character", 1)

txt.moveEnd("textedit")

}

If found, mark it and scroll it into view.

if (found) {

txt.moveStart("character", -1)

txt.findText(str)

txt.select()

txt.scrollIntoView()

n++

}

Otherwise, start over at the top of the page and find first match.

else {

if (n >0) {

n = 0

findInPage(str)

}

Not found anywhere, give message.

else

alert("本页没有查到此题目，请尝试用下百度的搜索引擎在网上查下.")

}

}

return false

}

</script>

<div id="floater" class="page_speeder_1555397322">

<div align=center class="page_speeder_1173002127">

<script language=JavaScript>

self.onError=null

currentX = currentY = 0

whichIt = null

lastScrollX = 0lastScrollY = 0

NS = (documentyers) ? 1 : 0

IE = (document.all) ? 1: 0

<!-- STALKER CODE -->

function heartBeat() {

if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}

if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelTop += percent

if(NS) document.floater.top += percent

lastScrollY = lastScrollY + percent

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelLeft += percent

if(NS) document.floater.left += percent

lastScrollX = lastScrollX + percent

}

}

<!-- /STALKER CODE -->

<!-- DRAG DROP CODE -->

function checkFocus(x,y) {

stalkerx = document.floater.pageX

stalkery = document.floater.pageY

stalkerwidth = document.floater.clip.width

stalkerheight = document.floater.clip.height

if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true

else return false

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement

if (whichIt == null) { return true}

}

whichIt.style.pixelLeft = whichIt.offsetLeft

whichIt.style.pixelTop = whichIt.offsetTop

currentX = (event.clientX + document.body.scrollLeft)

currentY = (event.clientY + document.body.scrollTop)

} else {

window.captureEvents(Event.MOUSEMOVE)

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater

StalkerTouchedX = e.pageX-document.floater.pageX

StalkerTouchedY = e.pageY-document.floater.pageY

}

}

return true

}

function moveIt(e) {

if (whichIt == null) { return false}

if(IE) {

newX = (event.clientX + document.body.scrollLeft)

newY = (event.clientY + document.body.scrollTop)

distanceX = (newX - currentX)distanceY = (newY - currentY)

currentX = newXcurrentY = newY

whichIt.style.pixelLeft += distanceX

whichIt.style.pixelTop += distanceY

if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop

if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft

if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20

if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5

event.returnValue = false

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)

if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset

if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset

if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17

if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17

return false

}

return false

}

function dropIt() {

whichIt = null

if(NS) window.releaseEvents (Event.MOUSEMOVE)

return true

}

<!-- DRAG DROP CODE -->

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)

window.onmousedown = grabIt

window.onmousemove = moveIt

window.onmouseup = dropIt

}

if(IE) {

document.onmousedown = grabIt

document.onmousemove = moveIt

document.onmouseup = dropIt

}

if(NS || IE) action = window.setInterval("heartBeat()",1)

</script>

<form name=search onSubmit="return findInPage(this.string.value)">

<font size=3><font color="#FF0000"><br>

请输入关键字：<br>

</font><br>

<input name=string type=text size=10 onChange="n = 0"><br>

</font><br>

<input type=submit value="查找">

<input type=submit value="继续查"><br>

</form>

</div>

</div>

<script language=JavaScript>

self.onError=null

currentX = currentY = 0

whichIt = null

lastScrollX = 0lastScrollY = 0

NS = (documentyers) ? 1 : 0

IE = (document.all) ? 1: 0

<!-- STALKER CODE -->

function heartBeat() {

if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}

if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelTop += percent

if(NS) document.floater.top += percent

lastScrollY = lastScrollY + percent

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelLeft += percent

if(NS) document.floater.left += percent

lastScrollX = lastScrollX + percent

}

}

<!-- /STALKER CODE -->

<!-- DRAG DROP CODE -->

function checkFocus(x,y) {

stalkerx = document.floater.pageX

stalkery = document.floater.pageY

stalkerwidth = document.floater.clip.width

stalkerheight = document.floater.clip.height

if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true

else return false

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement

if (whichIt == null) { return true}

}

whichIt.style.pixelLeft = whichIt.offsetLeft

whichIt.style.pixelTop = whichIt.offsetTop

currentX = (event.clientX + document.body.scrollLeft)

currentY = (event.clientY + document.body.scrollTop)

} else {

window.captureEvents(Event.MOUSEMOVE)

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater

StalkerTouchedX = e.pageX-document.floater.pageX

StalkerTouchedY = e.pageY-document.floater.pageY

}

}

return true

}

function moveIt(e) {

if (whichIt == null) { return false}

if(IE) {

newX = (event.clientX + document.body.scrollLeft)

newY = (event.clientY + document.body.scrollTop)

distanceX = (newX - currentX)distanceY = (newY - currentY)

currentX = newXcurrentY = newY

whichIt.style.pixelLeft += distanceX

whichIt.style.pixelTop += distanceY

if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop

if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft

if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20

if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5

event.returnValue = false

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)

if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset

if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset

if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17

if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17

return false

}

return false

}

function dropIt() {

whichIt = null

if(NS) window.releaseEvents (Event.MOUSEMOVE)

return true

}

<!-- DRAG DROP CODE -->

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)

window.onmousedown = grabIt

window.onmousemove = moveIt

window.onmouseup = dropIt

}

if(IE) {

document.onmousedown = grabIt

document.onmousemove = moveIt

document.onmouseup = dropIt

}

if(NS || IE) action = window.setInterval("heartBeat()",1)

</script>

<p><b>题库 </b></p>

<p>请在右边的搜索框中查找在此页面查找<br>

<br>

"馒头是谁发明的?","诸葛亮",<br>

"“蚕蚁”是蚂蚁还是蚕？","蚕",<br>

"古诗的体制称为“风雅颂”，其中“颂”是指：","宗庙乐歌",<br>

" 目前，唯有哪个金融机构可在县一级的地方设立分支机构？","中国农业银行",<br>

"东汉末年我国的一位杰出的医学家是：","华佗",<br>

"离地面越高空气越稀薄是因为：","空气受到地球引力的影响",<br>

</P>

</body>

</>

https://zhanzhang.baidu.com/tools/code

第一步

在网页中引入Javascript文件：

第二步

在Javascript程序中调用BaiduSuggestion.bind()方法将“百度搜索框提示”功能和页面上的元素 进行绑定。

BaiduSuggestion.bind()的具体形式为：

BaiduSuggestion.bind(inputObj|inputId,[params],[confirmCallback])inputObj|inputId:

为需要绑定搜索框提示功能的input对象或input对象的id。

params:

绑定搜索框提示功能时用到的参数，必须以Json形式给出,例如：

{

"XOffset":0, //提示框位置横向偏移量,单位px

"YOffset":0, //提示框位置纵向偏移量,单位px

"width":350, //提示框宽度，单位px

"fontColor":"#03c", //提示框文字颜色

"fontColorHI":"#FFF", //提示框高亮选择时文字颜色

"fontSize":"12px", //文字大小

"fontFamily":"宋体", //文字字体

"borderColor":"#03c", //提示框的边框颜色

"bgcolorHI":"#fd0", //提示框高亮选择的颜色

"sugSubmit":false //选中提示框中词条时是否提交表单

}

confirmCallback(txt):

当用户选择提示中具体选项时的回调函数，txt为用户选择的内容。

提示：

如果网页中有多个输入框需要添加“百度搜索框提示”功能，请为每个输入框都加上baiduSug属性。

Javascript代码请添加到网页中</body>标签的后面。

如使用utf-8编码，请务必在script标签中设置charset=gbk属性，否则搜索提示词会出现乱码。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6137272.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
钞票的图片 钞票的图片 一级用户组
0 0
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表（0条）

保存