JavaScript編程代碼分享：網頁版二分查找算法

文分享的技術，是用Web做一個二分查找算法的小網頁，包括所有的代碼。

通過二分查找的原理，做一個閉環Web小應用，這個網頁包括HTML、CSS和JavaScript的配合。通過制作這個網頁，老鐵們可以熟悉網頁設計、練習算法的落地應用，做到學以致用。

最終的二分算法網頁效果展示最終的二分算法網頁效果展示

本文代碼分為3個部分：

核心JavaScript代碼講解（包括調用函數JS代碼）；

HTML網頁設計講解；

CSS的美化講解。

第1部分 JavaScript代碼講解

本案例的JavaScript代碼包括核心的算法代碼和調用代碼。

先介紹核心算法代碼：

function binarySearch(nums, target) //定義了一個名為 binarySearch 的函數，
//該函數接受兩個參數，nums 是已排序數組，target 是要查找的目標值。
{
let left=0;//聲明兩個變量 left 和 right，它們分別代表搜索范圍的左邊界和右邊界。
//初始時，左邊界為數組的第一個元素索引（0），右邊界為數組的最后一個元素索引。
let right=nums.length - 1;
    while (left <=right) //使用循環來執行二分查找，條件是左邊界小于等于右邊界。
    {
    let middle=left + Math.floor((right - left) / 2);
    //計算當前搜索范圍的中間位置，使用 Math.floor 函數確保取整。
    if (nums[middle] > target) //如果中間位置的元素值大于目標值。
        {
        right=middle - 1;//將右邊界更新為中間位置的前一個位置，縮小搜索范圍至左半部分。
        } 
    else if (nums[middle] < target) //如果中間位置的元素值小于目標值。
        {
        left=middle + 1;//將左邊界更新為中間位置的后一個位置，縮小搜索范圍至右半部分。
        } 
    else 
        {
        return middle;//直接返回中間位置的索引，表示找到目標值。
        }
    }
    return -1;
 }

這段代碼的含義是：先定義兩個邊界索引，左邊界初始值為0，右邊界初始值為數組的長度。循環條件是左邊界的數值小于右邊界。

二分查找原理演示

二分查找是很基礎的算法，很容易搜索到，在此不做更多的原理講解。只要記住查找的數組必須有序排列即可。

由于這個算法要在Web端調用，因此還需要進行調用代碼的編寫：

function calculateBinarySearch() 
{
    const inputNums=document.getElementById("output").value.split(" ").map(Number);
    // 獲取頁面上 id 為 "output" 的元素的值，將其以空格分割成數字數組并映射為數字類型
    const inputTarget=parseInt(document.getElementById("textBox1").value);
    // 獲取頁面上 id 為 "textBox1" 的元素的值，將其解析為整數，作為二分查找的目標值
    const result=binarySearch(inputNums, inputTarget);
    // 調用二分查找函數 binarySearch，傳入數字數組和目標值，并將結果保存在變量 result 中
    if (result !==-1) 
    // 如果結果不等于 -1，表示找到了目標值
    {
        document.getElementById("textBox2").value=`數字${inputTarget}排在第${result + 1}位`;
        // 在頁面上 id 為 "textBox2" 的元素中顯示目標值在數組中的位置（索引 + 1）
    } 

    else 
    {
       document.getElementById("textBox2").value="這個數字不存在";
       // 如果結果等于 -1，表示目標值不存在于數組中
    }
}

在本案例中，顯示25個數字的窗口是一個文本框“output”，一個輸入查找數字的文本框“textBox1”和一個輸出查找結果的文本框“textBox2”。

調用代碼是將隨機生成的25個數字提取成數組，把textBox1里輸入的數字也進行必要的清洗，然后作為二分查找函數的輸入值，進行計算，結算結果顯示在textBox2中。

顯示結果要進行一下必要的美化，做一下人機交互的設計。

如何生成25個隨機數字，我會在另一篇文章仔細講解，在此不做贅述。

第2部分 HTML代碼講解

本案例的HTML包括一個標題文件（其中包含一個LOGO圖片）、1個展示25個數字的文本框output，1個輸入文本框textBox1和1個輸出文本框textBox2。還有兩個按鈕，分別控制生成25個數字和清除25個數字。

<h1>
    <img src="logo.png" alt="Logo" width="130" height="130">JavaScript編程練習：二分算法演示
</h1>

<textarea id="output" readonly>
</textarea>
<textarea id="textBox2" readonly> 
</textarea>

<br>
<div class="button-container">
    <button onclick="generateNumbers()">生成數字</button>
    <button onclick="clearText()">清空數字</button>
</div> 

<input type="text" id="textBox1">

<div class="color-box-container">
<div class="color-box" id="whiteBox" onclick="changeBackgroundColor('white')"></div>
<div class="color-box" id="blueBox" onclick="changeBackgroundColor('rgba(247, 160, 255, 0.348)')"></div>
<div class="color-box" id="pinkBox" onclick="changeBackgroundColor('rgba(202, 251, 189, 0.966)')"></div>
</div>

<a href="index.html">
    <button id="backToHomeButton">回到主頁</button>
</a>

第3部分 CSS代碼講解

CSS代碼考慮到了手機豎屏的應用。注意按鈕使用了群組，本案例還有顏色代碼塊，純裝飾用，不是必須的。

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間）

言

在H5開發中，經常會開發搜索功能，商品列表、訂單列表、客戶列表等等，都需要搜索，所以程序猿（程序媛）們都會遇到這樣的需求，點擊搜索input時，彈出的鍵盤，有“搜索”按鈕，點擊搜索調用接口搜索。今天就來講講怎么搞定這個需求。

H5中input輸入框如何實現原生鍵盤搜索功能

html代碼

<form action="javascript：;" id="searchFrom" onsubmit="searchList">
 <input type="search" value="" placeholder="搜索Javan的博客" />
</form>

js代碼

元素綁定方法調用

function searchList(){
 // do something
}

jquery監聽

$('#searchFrom').bind('submit', function () {
 // do something
});

H5中input輸入框如何實現原生鍵盤搜索功能

注意事項

action="javascript：;"這里的作用是，防止頁面刷新，如果不寫，頁面會刷新
type="search""input的類型需要是search
input輸入框必須放到form表單中
這樣寫input框輸入值后，會有清除按鈕，需要改變樣式，或者去除，請看下方代碼

input[type=search]::-webkit-search-cancel-button{
 -webkit-appearance: none; // 此處只是去掉默認的小×
}

自定義樣式

input[type=search]::-webkit-search-cancel-button{
 -webkit-appearance: none;
 position: relative;
 height: 20px;
 width: 20px;
 border-radius: 50%;
 background-color: #EBEBEB;
}
input[type=search]::-webkit-search-cancel-button:after{
 position: absolute;
 content: 'x';
 left: 25%;
 top: -12%;
 font-size: 20px;
 color: #fff;
}

公告

喜歡小編的點擊關注，了解更多資源！

在線咨詢

上一篇：分享10個寶藏級網站，個個都是白嫖黨的福音，且用且珍
下一篇：css-in-js、React Redux經典案例：

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商