整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          JavaScript編程代碼分享:網(wǎng)頁版二分查找算法

          JavaScript編程代碼分享:網(wǎng)頁版二分查找算法

          文分享的技術,是用Web做一個二分查找算法的小網(wǎng)頁,包括所有的代碼。

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

          最終的二分算法網(wǎng)頁效果展示 最終的二分算法網(wǎng)頁效果展示

          本文代碼分為3個部分:

          核心JavaScript代碼講解(包括調(diào)用函數(shù)JS代碼);

          HTML網(wǎng)頁設計講解;

          CSS的美化講解。

          第1部分 JavaScript代碼講解

          本案例的JavaScript代碼包括核心的算法代碼和調(diào)用代碼。

          先介紹核心算法代碼:

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

          這段代碼的含義是:先定義兩個邊界索引,左邊界初始值為0,右邊界初始值為數(shù)組的長度。循環(huán)條件是左邊界的數(shù)值小于右邊界。

          二分查找原理演示

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

          由于這個算法要在Web端調(diào)用,因此還需要進行調(diào)用代碼的編寫:

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

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

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

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

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

          第2部分 HTML代碼講解

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

          <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()">生成數(shù)字</button>
              <button onclick="clearText()">清空數(shù)字</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如何制作在透明輸入框里面添加圖標

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


          話不多說,我們直接進入主題 :

          基本思路

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

          我們最直接上代碼:HTML:

          <div class="search">
                  <form action="http://baidu.com">
                     <input type="text" placeholder="請輸入查找的律師或?qū)iL">
                         <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開發(fā)中,經(jīng)常會開發(fā)搜索功能,商品列表、訂單列表、客戶列表等等,都需要搜索,所以程序猿(程序媛)們都會遇到這樣的需求,點擊搜索input時,彈出的鍵盤,有“搜索”按鈕,點擊搜索調(diào)用接口搜索。今天就來講講怎么搞定這個需求。

          H5中input輸入框如何實現(xiàn)原生鍵盤搜索功能

          html代碼

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

          js代碼

          元素綁定方法調(diào)用

          function searchList(){
           // do something
          }
          

          jquery監(jiān)聽

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

          H5中input輸入框如何實現(xiàn)原生鍵盤搜索功能

          注意事項

          1. action="javascript:;"這里的作用是,防止頁面刷新,如果不寫,頁面會刷新
          2. type="search""input的類型需要是search
          3. input輸入框必須放到form表單中
          4. 這樣寫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;
          }
          
          

          公告

          喜歡小編的點擊關注,了解更多資源!


          主站蜘蛛池模板: 亚洲av成人一区二区三区观看在线 | 无码毛片一区二区三区中文字幕 | 亚洲中文字幕丝袜制服一区| 成人无码一区二区三区| 国产一区二区在线| 国产主播福利精品一区二区| 风间由美性色一区二区三区| 国产一区二区三区内射高清| 精品视频一区二区三三区四区| 亚洲综合av一区二区三区不卡| 曰韩精品无码一区二区三区| 国内精品视频一区二区八戒| 亚洲AV无码一区二区三区系列 | 精品欧洲av无码一区二区14| 国产精品视频一区二区三区四| 国产精品日韩一区二区三区| 无码人妻精品一区二区三区99性| 久久亚洲综合色一区二区三区| 精品久久一区二区三区| 精品亚洲一区二区三区在线观看| 肥臀熟女一区二区三区| 在线观看免费视频一区| 高清国产AV一区二区三区| 日韩精品一区二区三区老鸭窝| 欧美成人aaa片一区国产精品 | 亚洲av高清在线观看一区二区| 亚洲国产一区二区三区青草影视| 91精品一区二区| 国产A∨国片精品一区二区 | 国产伦精品一区二区三区在线观看 | 亚洲日韩国产一区二区三区 | 国产成人一区二区精品非洲| 亚洲国产欧美日韩精品一区二区三区| 美女视频在线一区二区三区| 午夜视频久久久久一区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 亚洲AV成人一区二区三区在线看| 亚洲成av人片一区二区三区| 国产一区二区在线观看视频| 无码播放一区二区三区| 欧美日韩精品一区二区在线视频|