JS による Baidu 検索機能の実装方法を説明する例
この記事では、Baidu検索機能をjsで実装する方法を主にhtml部分とcss折り畳みスタイル部分に分けて紹介していますので、具体的な実装コードについてはこちらの記事を参照してください。
今日はJSを使ってBaiduの検索機能を実装していきます コードは以下の通りです:
HTML部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--百度iocn图标-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofollow" type="image/x-icon"/>
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="css/baidu.css" rel="external nofollow" />
<script src="js/H.js"></script>
</head>
<body onload="onloads(),randomBack()">
<p class="box">
<p class="box_log">
<p class="box_log_img">
<img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
</p>
</p>
<p class="box_text">
<p class="box_text_content">
<input type="text" name="text" id="text" value="" autofocus="autofocus"/>
<input type="button" name="bdyx" id="btn" value="百度一下" />
<ul id="search">
<li class="li1" id="0" onclick="iptShow(this.id)"></li>
<li class="li1" id="1" onclick="iptShow(this.id)"></li>
<li class="li1" id="2" onclick="iptShow(this.id)"></li>
<li class="li1" id="3" onclick="iptShow(this.id)"></li>
<li class="li1" id="4" onclick="iptShow(this.id)"></li>
<li class="li1" id="5" onclick="iptShow(this.id)"></li>
<li class="li1" id="6" onclick="iptShow(this.id)"></li>
<li class="li1" id="7" onclick="iptShow(this.id)"></li>
<li class="li1" id="8" onclick="iptShow(this.id)"></li>
<li class="li1" id="9" onclick="iptShow(this.id)"></li>
</ul>
</p>
</p>
</p>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>CSSカスケードスタイル部分:
body{/*清除浏览器自带样式*/
margin: 0;
padding: 0;
/*background-repeat: no-repeat;*/
min-width: 1200px;
}
.box{/*最大的盒子*/
width: 100%;
height: 100%;
/*background: yellow;*/
/*height: 636px;*/
}
.box_log{/*log盒子*/
width: 100%;
height: 250px;
text-align: center;
}
.box_log_img{
margin:0 auto;
width: 300px;
height: 150px;
}
.box_log img{
width: 300px;
height: 150px;
margin-top: 38px;
margin-bottom: 19px;
}
.box_text{/*text搜索框盒子大小*/
width: 100%;
height: 36px;
}
.box_text_content{
width: 640px;
height: 36px;
margin: 0 auto;
}
#text{ /*input框的样式*/
width: 540px;
height: 36px;
box-sizing: border-box;
margin-top: 3px;
text-indent: 4px;
outline: none;
}
.log_img{/*input框中的小相机*/
position: absolute;
left: 62%;
top: 35.5%;
}
#btn{ /*按钮的样式*/
width: 100px;
height: 36px;
background: #3385FF;
border: 0px;
letter-spacing: 1px;
color: white;
margin-left: -5px;
font-size: 15px;
box-sizing: border-box;
transform: translateY(1.5px);
box-sizing: border-box;
}
#btn:hover{ /*当按钮hover的样式*/
cursor: pointer;
}
#search{ /*搜索框的样式*/
width: 540px;
margin: 0;
padding: 0;
list-style: none;
display: none;
border: 1px solid #E3E5E4;
}
#search li{ /*搜索框li的大小颜色*/
line-height: 36px;
background: white;
}
#search li:hover{ /*当li hover的样式*/
background: #F0F0F0;
}
.li1{ /*li中的值缩进*/
text-indent: 4px;
}JS部分:
var otext = document.getElementById("text"); //获取input框
ose = document.querySelector("#search"); //通过类名选择器 选择到search框
lis = document.getElementsByClassName("li1"); //获取所有的li
otext.onkeyup = function(){ //当在input框中键盘弹起发生事件
ose.style.display = otext.value?"block":"none"; /*三目运算符,如果otext.value的值部位空,则block。*/
var osc = document.createElement("script"); /*创建一个script标签*/
osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
/*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/
document.body.appendChild(osc);
/*将创建好的script标签元素放入body中*/
/*input框中按下回车根据input的值跳转页面*/
if(event.keyCode==13){
/*将百度作为连接,传入input的值,并跳入新的页面*/
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
}
var count = 0;
var search = 0;
var arr = ose.children; /*获取ose下的所有li*/
function houxiaowei(json){
var jsonLength = 0; /*json长度的初始值*/
// console.log(json.s);
for(var x in json.s){ /*将循环的次数变成json的长度*/
jsonLength++;
}
// console.log(jsonLength);
for(var i=0;i<lis.length;i++){
if(jsonLength==0){ /*如果遍历出的长度等于0,li的值为空*/
arr[i].innerHTML = null;
}else{
if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/
arr[i].innerHTML = json.s[i];
}
}
}
if(count==lis.length-1){
count=0;
search=0;
}
count++;
search++;
}
/*单击li中的值显示在input框中*/
function iptShow(thisId){
otext.value = arr[thisId].innerHTML;
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
otext.onclick = function(e){
ose.style.display = "block";
var e = event || window.event;
e.stopPropagation(); //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容
e.cancelBubble=true; //阻止冒泡事件,IE8及以下兼容
// alert(e);
}
/*单击body中的任意地方隐藏li*/
document.body.onclick = function(){
ose.style.display = "none";
}
/*单击百度btn的时候触发,并跳到新的连接*/
var btn = document.querySelector("#btn");
cookies = [];
btn.onclick = function(){
/*获取当前input的值*/
var otext = document.getElementById("text").value;
/*将百度作为连接,传入input的值,并跳入新的页面*/
if(otext=="" || otext==null){
window.location.href = "http://127.0.0.1:8020/%E7%99%BE%E5%BA%A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html?__hbt=1516599867084";
}else{
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext
}
}
/*加载页面input为空*/
function onloads(){
var s = otext.value = null;
$myId("text").focus();
}
function randomBack(){
var randomBk = parseInt(Math.random()*545);
document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)";
document.body.style.backgroundSize = "100%";
}‘“検索関数実装は Baidu の https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei のリンクから来ています。「wd」の値は値です。入力ボックスで検索する必要がある場合は、json オブジェクトが返されます。 &cb の値は、json から値を抽出して li に入れるために使用されるメソッドまたは関数です。
関連する推奨事項:
Baidu 検索機能の模倣のブートトラップと Vue の実装例
Js を使用して Baidu 検索ボックス プロンプト機能を実装する方法
PHP は、curl を使用して簡単な Baidu 検索を作成します
以上がJS による Baidu 検索機能の実装方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7681
15
1639
14
1393
52
1286
25
1229
29
2か月後、人型ロボットWalker Sが服をたたむことができるようになった
Apr 03, 2024 am 08:01 AM
Machine Power Report 編集者: Wu Xin 国内版の人型ロボット + 大型模型チームは、衣服を折りたたむなどの複雑で柔軟な素材の操作タスクを初めて完了しました。 OpenAIのマルチモーダル大規模モデルを統合したFigure01の公開により、国内同業者の関連動向が注目を集めている。つい昨日、中国の「ヒューマノイドロボットのナンバーワン株」であるUBTECHは、Baidu Wenxinの大型モデルと深く統合されたヒューマノイドロボットWalkerSの最初のデモを公開し、いくつかの興味深い新機能を示した。 Baidu Wenxin の大規模モデル機能の恩恵を受けた WalkerS は次のようになります。 Figure01 と同様に、WalkerS は動き回るのではなく、机の後ろに立って一連のタスクを完了します。人間の命令に従って服をたたむことができる
Huawei携帯電話にWeChatクローン機能を実装する方法
Mar 24, 2024 pm 06:03 PM
Huawei 携帯電話に WeChat クローン機能を実装する方法 ソーシャル ソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認する まず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。
Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売
Jun 04, 2024 pm 08:01 PM
5月15日、Baidu Apolloは武漢Baidu キャロット Auto Robot Zhixing Valleyで2024年アポロデーを開催し、過去10年間におけるBaiduの自動運転における大きな進歩を包括的に実証し、大型モデルと乗客の安全性の新たな定義に基づいた技術的飛躍をもたらした。世界最大の自動運転ネットワークである百度は、自動運転を人間の運転よりも安全なものにしました。このおかげで、より安全、より快適、環境に優しい、低炭素の旅行方法が理想から現実へと変わりつつあります。百度グループ副社長兼インテリジェント・ドライビング・ビジネス・グループ社長の王雲鵬氏はその場で「自動運転車を開発するという私たちの本来の目的は、より良い旅行への人々の高まる切望を満たすことだ。人々の満足こそが私たちの原動力である。なぜなら安全性、とても美しいので、見ることができて嬉しいです
百度西陽貝殻の入手方法を紹介
Mar 28, 2024 am 09:11 AM
西浪には貝殻の場所と入手方法が分からないユーザーがたくさんいます。数時間探してもまだ見つからないプレイヤーもいます。以下では、編集者が百度西陽貝殻の入手方法を紹介します。 . ぜひ見に来てください。 Baidu Xirang Shell の入手方法 1. まずコミュニティに来てから、下の写真の場所に来る必要があります。 2. ここで目的地を選択し、188階に入るを選択します。 3. 188 階に入った後、歩いているとこのプロンプトが表示されるので、「了解しました」をクリックします。 4. 砲弾の場所は少し見つけにくいですが、188 エレベーターのすぐ後ろに、砲弾である小さな光る点があります。 5. 貝殻をクリックするには VR コントローラーを使用する必要があります。引き換え方法 1. まず、ページ右上隅の「設定」アイコンをクリックし、「」を選択します。
Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口
Feb 19, 2025 pm 04:54 PM
DeepSeekは、Webバージョンと公式Webサイトの2つのアクセス方法を提供する強力なインテリジェント検索および分析ツールです。 Webバージョンは便利で効率的であり、公式ウェブサイトは包括的な製品情報、ダウンロードリソース、サポートサービスを提供できます。個人であろうと企業ユーザーであろうと、DeepSeekを通じて大規模なデータを簡単に取得および分析して、仕事の効率を向上させ、意思決定を支援し、イノベーションを促進することができます。
百度のロビン・リー氏は石油・ガス業界のインテリジェンスについて話し合うためにチームを率いてペトロチャイナを訪問した
May 07, 2024 pm 06:13 PM
5月7日の当サイトのニュースによると、5月6日、百度の創業者兼会長兼最高経営責任者（CEO）のロビン・リー氏がチームを率いて北京の中国石油天然気集団公司（以下、ペトロチャイナ）を訪問し、同社の取締役らと会談した。中国石油総公司の董事長と戴侯良党書記が会談した。両者は協力を強化し、エネルギー産業とデジタルインテリジェンスの深い統合を促進することについて綿密な意見交換を行った。ペトロチャイナはデジタル中国石油総公司の構築を加速し、百度グループとの協力を強化し、エネルギー産業とデジタルインテリジェンスの徹底的な統合を促進し、国家エネルギー安全保障の確保にさらに貢献する。ロビン・リー氏は、大型モデルによって示される「インテリジェントな創発」と理解、生成、論理、記憶といった中核的な機能によって、最先端技術と石油・ガス事業の組み合わせに対する想像力のより広い空間が開かれたと述べた。いつも
Samsung Galaxy S24シリーズ携帯電話の中国版「Search in Circle」がGoogle検索に対応すると報じられている
Jun 01, 2024 am 09:54 AM
5月31日のニュースによると、ブロガー@ibinguniverseが本日、Samsung Galaxy S24シリーズ携帯電話の中国版「Search in Circle」がGoogle検索をサポートするというニュースを伝えた。ブロガーは具体的な発売時期については明らかにしなかった。 Samsungの以前の紹介によると、Samsung Galaxy S24シリーズは多くの高レベルのAI機能、入力、翻訳、レコーダー、メモ、カメラなどのAIベースの実用的な機能を搭載しており、ユーザーにより便利で効率的な包括的なサービスを提供します。経験。海外版とは異なり、Samsung Galaxy S24シリーズのAI機能のほとんどはBaiduなどの国内メーカーが提供しています。以前に報告されたように、Galaxy AI は、Baidu Wenxin 大型モデルの複数の機能を深く統合しており、エンドサイド対応の通話機能と翻訳機能、および生成 AI によってもたらされるインテリジェントな要約を提供できます。
AIツールのおすすめ
Nov 29, 2024 am 11:08 AM
この記事では、Douyin Doubao、Wenxin Yige、Tencent Zhiying、Baidu Feipiao EasyDL、Baidu AI Studio、iFlytek Spark Cognitive Large Model を含む 6 つの人気 AI ツールを紹介します。これらのツールは、テキスト作成、画像生成、ビデオ編集、AI モデル開発などのさまざまな機能をカバーしています。適切な AI ツールを選択するには、機能要件、技術レベル、コスト予算などの要素を考慮する必要があります。これらのツールは、AI 支援を必要とする個人や企業に便利で効率的なソリューションを提供します。
