代码成就万世基积沙镇海,梦想永在凌云意意气风发|

又一岁荣枯

园龄:3年4个月粉丝:11关注:6

构建一个可以实现百度与谷歌搜索的搜索框

搜索框

<form method="get" id="form">
	<div class="input-group" style="margin-top: 100px;margin-left: 500px;margin-right: 500px;">
		<span class="input-group-btn">
			<button id="baidu" class="btn btn-default" type="submit">百度一下</button>
		</span>
		<input id="search" type="text" class="form-control" placeholder="Search for..." name="q">
			<span class="input-group-btn">
				<button id="google" class="btn btn-default" type="submit">谷歌一下</button>
			</span>
	</div><!-- /input-group -->
</form>

js代码

<script type="text/javascript">
var search = document.getElementById("search");
var baidu = document.getElementById("baidu");
var google = document.getElementById("google");
var form = document.getElementById("form");
$(function(){
	$("#baidu").click(function(){
		baiduurl = 'https://www.baidu.com/s';
		$("#search").attr("name","wd");
		$("#form").attr("action",baiduurl);
	});
});
$(function(){
	$("#google").click(function(){
		googleurl = 'https://www.google.com/search';
		$("#search").attr("name","q");
		$("#form").attr("action",googleurl);
		alert(googleurl);
	});
});
</script>

本文作者:又一岁荣枯

本文链接:https://www.cnblogs.com/java-six/p/15868013.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   又一岁荣枯  阅读(76)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起