利用JS拼接网址字段做一个竞品搜索页面

  • 利用JS拼接网址字段做一个竞品搜索页面已关闭评论
  • 434
  • A+
所属分类：前端
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>竞品数据搜索</title>
	<meta name="description" content="Competitors Search">
	<meta name="author" content="feng">
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
	<![endif]-->
	<style type="text/css">
		body {
	background-color: #35abdf
 }

 .domain-search {
	margin: 0;
	padding: 206px 0
 }

 .bg-pblue {
	background-color: #35abdf
 }

 .domain-search p {
	color: #B0E7FF;
	margin: 0
 }

 .domain-search .input-group {
	-webkit-box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.1)
 }

 .domain-search .form-control {
	height: 60px;
	border-radius: 0;
	border: none
 }

 .domain-search .form-control:focus {
	box-shadow: 0px 0px 0px 0px #ffffff !important
 }

 .domain-search .btn {
	padding: 0 54px;
	line-height: 60px
 }

 .btn-primary {
	padding: 0 28px;
	line-height: 54px;
	background: #ff6726;
	color: #fff
 }

 .btn-primary:hover {
	color: #fff;
	background-color: #286090;
	border-color: #204d74
 }

 .domain-search .input-group+p a {
	margin: 9px 20px;
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	font-size: large;
 }
	</style>
</head>
<body>
	<form class="row domain-search bg-pblue">
	<div class="container">
		<div class="row">
			<div class="col-md-9 m-auto">
				<div class="input-group" style="width: -webkit-fill-available;"><input type="search" class="form-control" id="qta_field" value="" placeholder="输入分子名"></div>
					<p style="line-height: 1.8; margin-top: 18px;">
						<a href='' onclick="this.href='https://www.abcam.com/products?keywords='+document.getElementById('qta_field').value" target="_blank">Abcam</a>
						<a href='' onclick="this.href='https://www.rndsystems.com/cn/search?keywords='+document.getElementById('qta_field').value" target="_blank">R&D</a>
						<a href='' onclick="this.href='https://www.biolegend.com/en-us/search-results?Keywords='+document.getElementById('qta_field').value" target="_blank">biolegend</a>
						<a href='' onclick="this.href='https://www.abcam.com/products?keywords='+document.getElementById('qta_field').value" target="_blank">Abcam</a>
						<a href='' onclick="this.href='https://www.rndsystems.com/cn/search?keywords='+document.getElementById('qta_field').value" target="_blank">R&D</a>
						<a href='' onclick="this.href='https://www.biolegend.com/en-us/search-results?Keywords='+document.getElementById('qta_field').value" target="_blank">biolegend</a>
					</p>
				</div>
			</div>
		</div>
	</form>
</body>
</html>
打赏微海报分享
weinxin
独角兽驿站
公众号