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>
</>
可以使用<form>标签
比如经典的百度搜索框
<form action="http://www.baidu.com/baidu" ><input name="word" type="search" /><input type="submit" value="百度搜索" /></form>
更多可以去学习表单网页链接
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）