웹 프론트엔드 JS 튜토리얼 JS에서 Baidu 검색 인터페이스를 구현하는 방법

JS에서 Baidu 검색 인터페이스를 구현하는 방법

Jun 08, 2018 am 11:02 AM
js 바이두 검색

이 글에서는 Baidu 검색 인터페이스와 링크 기능을 구현하기 위한 JS의 예제 코드를 주로 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

이 글에서는 JS에서 Baidu 검색 인터페이스와 링크 기능을 구현하는 방법을 구체적으로 소개합니다. 코드는 다음과 같습니다.

지난 기사에서는 Baidu 검색 기능을 구현하기 위해 JS를 소개했습니다

<!DOCTYPE html> 
<html ng-app="myApp"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>anchor</title> 
    <style> 
      *{ 
        margin:0; 
        padding:0; 
      } 
      #wei{ 
        width:500px; 
        height:600px; 
        margin:0 auto; 
        border:0px solid gray; 
      } 
      #wei input{ 
          width:476px; 
          height:50px; 
          line-height: 50px; 
          padding-left:20px; 
          font-size: 16px; 
      } 
      #wei ul{ 
        height:auto; 
        border:1px solid #ccc; 
        display: none; 
      } 
      #wei ul li{ 
          width:100%; 
          height:30px; 
          line-height: 30px; 
          text-indent:10px; 
          font-size: 16px; 
          list-style: none; 
      } 
      #wei ul li a{ 
          text-decoration:none; 
      } 
      #wei ul li:hover{ 
        display:block; 
        background:#ccc; 
        color:#fff; 
      } 
    </style> 
  </head> 
  <body ng-controller="show"> 
      <p id="wei"> 
        <input type="text" id="text"> 
        <ul id="list"></ul> 
      </p> 
    <script type="text/javascript"> 
      var txt = document.getElementById("text"); 
      var oUl = document.getElementById("list"); 
      txt.onkeyup = function(){ 
        var val = txt.value; 
        var oScript = document.createElement("script");//动态创建script标签 
        oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback"; 
        //添加链接及回调函数 
        document.body.appendChild(oScript);//添加script标签 
        document.body.removeChild(oScript);//删除script标签 
      } 
      //回调函数 
      function callback(data){ 
        var str=""; 
        for(var i=0;i<data.s.length;i++){ 
          str += "<li><a href=\"https://www.baidu.com/s?wd="+data.s[i]+"\">"+data.s[i]+"</a></li>"; 
        } 
        //console.log(str); 
        oUl.innerHTML=str; 
        oUl.style.display="block"; 
      } 
    </script>  
  </body> 
</html>
로그인 후 복사

위 내용은 제가 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Koa2에서 async&await의 사용법은 무엇인가요?

zTree 트리 플러그인에서 전국 5단계 지역의 클릭 로딩을 구현하는 방법

노드+익스프레스 개인화 대화방을 구현하는 방법은 무엇입니까?

위 내용은 JS에서 Baidu 검색 인터페이스를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 Nov 21, 2023 am 10:00 AM

JS 및 Baidu Map을 사용하여 지도 팬 기능을 구현하는 방법 Baidu Map은 지리 정보, 위치 지정 및 기타 기능을 표시하기 위해 웹 개발에 자주 사용되는 널리 사용되는 지도 서비스 플랫폼입니다. 이 글에서는 JS와 Baidu Map API를 사용하여 지도 이동 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 준비 바이두 맵 API를 사용하기 전에 먼저 바이두 맵 오픈 플랫폼(http://lbsyun.baidu.com/)에서 개발자 계정을 신청하고 애플리케이션을 만들어야 합니다. 생성 완료

QQ 브라우저 기본 Baidu 검색 엔진을 설정하는 방법 QQ 브라우저 기본 Baidu 검색 엔진을 설정하는 방법 Apr 11, 2024 pm 02:22 PM

QQ 브라우저를 기본 Baidu 검색 엔진으로 설정하는 방법은 무엇입니까? QQ 브라우저는 사무실이나 공부에 매우 적합한 웹 브라우저 도구입니다. 이 브라우저는 간단한 인터페이스를 가지고 있습니다. 그러나 많은 사용자는 Baidu 검색 엔진을 사용하는 데 더 익숙합니다. Baidu에서 검색해 보면 많은 친구들이 여전히 작동 방법을 모릅니다. 다음으로 편집자는 Baidu를 QQ 브라우저의 기본 검색 엔진으로 설정하는 방법에 대한 안내를 제공합니다. 관심 있는 친구는 놓치지 마세요. QQ 브라우저에서 Baidu를 기본 검색 엔진으로 설정하는 팁 1. QQ 브라우저를 활성화하고 오른쪽 상단에 나타나는 [3] 아이콘을 클릭합니다(그림 참조). 2. 이때 아래에 기능 창이 팝업됩니다. 이 창에서 [설정] 옵션을 클릭하여 들어갑니다.

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 캔들 차트를 만드는 방법 주식 캔들 차트는 주식 시장에서 흔히 사용되는 기술 분석 그래픽으로 시가, 종가, 최고가 등의 데이터를 그려서 투자자가 주식을 보다 직관적으로 이해할 수 있도록 도와줍니다. 주식의 최저 가격. 이 기사에서는 특정 코드 예제와 함께 PHP 및 JS를 사용하여 주식 캔들 차트를 만드는 방법을 설명합니다. 1. 준비 시작하기 전에 다음 환경을 준비해야 합니다. 1. PHP를 실행하는 서버 2. HTML5 및 Canvas를 지원하는 브라우저 3

Google Chrome에 Baidu 검색 엔진을 추가하는 방법 Google Chrome에 Baidu 검색 엔진을 추가하는 방법 Mar 02, 2024 pm 01:31 PM

Google Chrome에 Baidu 검색 엔진을 추가하는 방법은 무엇입니까? 오늘날 많은 젊은이들이 선택하는 것은 정상적인 상황에서는 Google Chrome을 설치하고 공식 Google 검색 엔진으로 메인 페이지를 여는 것입니다. 그러나 중국에서는 Google 검색을 사용할 수 없으므로 검색 엔진을 다음으로 변경해야 합니다. 또 다른 예, 많은 사용자가 Baidu 검색을 선호하므로 Google 메인 페이지를 Baidu 검색으로 설정하는 방법입니다. 아래 편집기는 Google Chrome에 Baidu 검색 엔진을 추가하는 방법에 대한 튜토리얼을 제공합니다. 도움이 되기를 바랍니다. Google 크롬에 Baidu 검색 엔진 추가 튜토리얼 1. Google Chrome을 열고 아래 그림과 같이 오른쪽 상단에 설정을 입력합니다. 2. 아래 그림과 같이 왼쪽의 설정 버튼을 클릭한 후 "검색 엔진"을 선택합니다. 3. 검색 엔진에서 검색

Baidu를 열도록 Chrome을 설정하는 방법 Baidu를 열도록 Chrome을 설정하는 방법 Mar 14, 2024 pm 07:30 PM

Baidu를 열도록 Chrome을 설정하는 방법은 무엇입니까? 일반적인 상황에서는 모든 사람이 Chrome을 다운로드하고 설치한 후 기본적으로 열리는 검색 엔진은 Google 검색입니다. Google 검색은 매우 강력하지만 중국에서는 사용할 수 없습니다. 따라서 많은 친구들은 브라우저의 검색 엔진을 설정하는 것을 좋아합니다. Baidu 검색에 구체적으로 수정하는 방법이 나와 있습니다. 아래 편집기에서는 Baidu를 열기 위해 Google Chrome을 설정하는 구체적인 방법을 자세히 소개합니다. 관심 있는 친구는 와서 알아볼 수 있습니다. Google Chrome 설정을 여는 구체적인 방법은 Baidu입니다. 먼저 컴퓨터에서 Google Chrome을 열고 오른쪽 상단에서 점 세 개 아이콘을 찾습니다. 다음으로 이 아이콘을 클릭하고 설정 옵션을 선택하세요. 일부 사용자 버전에서는 "옵션" 버튼을 클릭해야 할 수도 있습니다.

JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법 Nov 21, 2023 am 09:33 AM

JS 및 Baidu Maps를 사용하여 지도 열 지도 기능을 구현하는 방법 소개: 인터넷과 모바일 장치의 급속한 발전으로 지도는 일반적인 응용 시나리오가 되었습니다. 시각적 표시 방법인 히트맵은 데이터 분포를 보다 직관적으로 이해하는 데 도움이 될 수 있습니다. 이 기사에서는 JS 및 Baidu Map API를 사용하여 지도 히트맵 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 준비 작업: 시작하기 전에 Baidu 개발자 계정, 애플리케이션 생성, 해당 AP 획득 등의 항목을 준비해야 합니다.

See all articles