HTML部件之—如何实现搜索框(样式+功能实现)

最新推荐文章于 2025-02-23 12:42:56 发布

我是X大魔王

最新推荐文章于 2025-02-23 12:42:56 发布

阅读量2.8w

点赞数 54

分类专栏： HTML页面部件🦄 文章标签： html 浏览器搜索框前端

转载必须声明

本文链接：https://blog.youkuaiyun.com/Xmumu_/article/details/119807027

版权

HTML页面部件🦄 专栏收录该内容

17 篇文章

订阅专栏

大家好，这里是最可爱的大魔王💛💛💛，今天是搜索框分享，搜素框可以说是非常非常重要的一个点啦，关于搜素框到底怎么设计、功能怎么实现的？发光搜素框怎么实现等问题做一个解释，信息量很大，别忘了收藏噢💨💨💨

在这里插入图片描述

搜素框展示

在这里插入图片描述
💫💫💫💫

在这里插入图片描述
💤💤💤💤(超级简约)

在这里插入图片描述
这款搜索框是来自：亚索老师的浏览器制作🤣🤣

搜索框的制作多种多样，各不相同，可以按照自己的想法任意发挥，那么就以我上面发的第一个图为例子，教一下这个搜索框是如何实现的🐱‍💻🐱‍💻

<!DOCTYPE html>
<html>
	
	
	<head>
		
		<style>
						
			    @font-face {
			        font-family: 'FontAwesome';
			        src: url('./fontawesome-webfont.eot');
			        src: url('./fontawesome-webfont.eot') format('embedded-opentype'),
			            url('./fontawesome-webfont.woff2') format('woff2'), url('.fontawesome-webfont.woff') format('woff'),
			            url('./fontawesome-webfont.ttf') format('truetype'),
			            url('./fontawesome-webfont.svg') format('svg');
			        font-weight: normal;
			        font-style: normal;
			    }
			
			    .search-box {
			        font-family: FontAwesome;
			        position: absolute;
			        top: 30%;
			        left: 50%;
			        transform: translate(-50%, -50%);
			        background: #ffffff;
			        height: 40px;
			        border: 10px;
			        border-radius: 40px;
			        padding: 10px;
			        opacity: 0;
			        transition-delay: 99999999s;
			        transition-duration: 1s;
			    }
			
			    .search-box:hover>.search-txt {
			        width: 240px;
			        padding: 0 6px;
			    }
			
			    .search-box:hover>.search-btn {
			        color: white;
			        background: black;
			    }
			
			    .search-btn {
			        transition: 0.5s;
			        font-family: FontAwesome;
			        font-size: 25px;
			        color: black;
			        float: right;
			        width: 40px;
			        height: 40px;	
			        border: 10px;
			        border-radius: 50%;
			        background: #ffffff;
			        display: flex;
			        justify-content: center;
			        align-items: center;
			        text-decoration: none;
			    }
			
			    .search-txt {
			        border: none;
			        background: none;
			        outline: none;
			        float: left;
			        padding: 0;
			        color: rgb(51, 159, 150);
			        font-size: 16px;
			        transition: 0.6s;
			        line-height: 50px;
			        width: 0px;
			    }
			   
			    @keyframes flash {
			        50% {
			            transform: scale(1.5);
			        }
			
			        80% {
			            transform: rotate(-60deg);
			        }
			
			        100% {
			            transform: rotate(30deg);
			        }
			        
			        
			    }
			    html:hover .search-box {
			        opacity: 1;
			        transition-delay: 0s;
			        transition-duration: 0s;
			    }
				
			</style>
		</head>
	<body style="background-color: bisque;">
		
		<center>
		    <div class="search-box">
		        <input class="search-txt" type='text' id='inp' placeholder="What are you looking for?"/>
		        <input class="search-btn" type='button' id='btn' value='&#xf002' />
		    </div>
			<div>			
			</div>
		</center>
		
		
		</body>
	
	
	<script>
	    var oInp = document.getElementById('inp');
	    var oBtn = document.getElementById('btn');
	
	    oBtn.onclick = function () {
	        Search();
	    }
	
	    document.onkeydown = function () {
	        if (event.keyCode == 13) {
	            Search();
	        }
	    }
	
	    function Search() {
	        var url = 'https://www.baidu.com/s?wd=' + oInp.value;
	        window.open(url);
	    }
	</script>

	</html>

效果：

在这里插入图片描述
搜索功能的实现方法🤎🤎🤎

主要是采用JavaScript来实现的，没有深入学习过JavaScript的小伙伴也没关系，代码很短的，而且很好理解

主要来看这一个函数

function Search() {
	        var url = 'https://www.baidu.com/s?wd=' + oInp.value;
	        window.open(url);
	    }

就以百度搜索为例子，后续可以有谷歌搜索啊、优快云搜素等等

百度搜素网址：https://www.baidu.com/
参数解释：
s表示search，有些网站是写出了完整的search的
“wd=” 是英文的word的缩写，参数表示的是搜索关键词的内容，如果是汉字那么这个参数是汉字的十六进制形式，如果是英文，那么这个参数就用该英文来表示
ie指的是搜索方式
"s?wd"一般是一起出现哒💨如果想要了解更多参数，请点击：百度搜索参数

百度和谷歌以及很多不同网站，它们的搜索参数很多都是不一样的
比如优快云搜索方式：以想要搜索“爬虫为例”
https://so.youkuaiyun.com/so/search?from=chrome_plugin&q=爬虫=&sourceid=chrome&ie=UTF-8
后续我会出各大常用网站的搜索网址辨析，在这里就不花太多篇幅了

好啦，今天的分享就到这里结束啦，如果你觉得这篇博客对你有帮助的话，别忘了点赞、关注和评论噢，下期再见💨
在这里插入图片描述