利用JavaScript編寫(xiě)Python內(nèi)置函數(shù)查詢工具

更新時(shí)間：2023年02月15日 09:46:27 作者：神奇代碼在哪里_

Python有豐富的內(nèi)置函數(shù)實(shí)現(xiàn)各種功能，但查詢內(nèi)置函數(shù)時(shí)總是需要百度查，有沒(méi)有一個(gè)小工具可以單機(jī)無(wú)網(wǎng)絡(luò)查詢Python內(nèi)置函數(shù)，方便自己學(xué)習(xí)編寫(xiě)Python程序呢？本文就來(lái)用JavaScript編寫(xiě)一個(gè)

最近在學(xué)習(xí)Python語(yǔ)言，Python有豐富的內(nèi)置函數(shù)實(shí)現(xiàn)各種功能，但查詢內(nèi)置函數(shù)時(shí)總是需要百度查，有沒(méi)有一個(gè)小工具可以單機(jī)無(wú)網(wǎng)絡(luò)查詢Python內(nèi)置函數(shù)，方便自己學(xué)習(xí)編寫(xiě)Python程序呢？在網(wǎng)上查了一下好像沒(méi)有，那就自己做一個(gè)吧，結(jié)合以前自己用Javascript寫(xiě)過(guò)的8086匯編指令查詢小工具，只需要稍微改動(dòng)就可以了。

一、程序效果展示

輸入字母會(huì)自動(dòng)出現(xiàn)匹配的下拉列表，控制鍵盤(pán)↑和↓鍵就可以上下移動(dòng)選擇想查看的Python內(nèi)置函數(shù)，如下圖。

二、程序編寫(xiě)過(guò)程

（一）為方便使用，實(shí)現(xiàn)只用一個(gè)HTML文件運(yùn)行，小工具中所有的數(shù)據(jù)都使用<div></div>標(biāo)簽進(jìn)行存放，并直接利用Python內(nèi)置函數(shù)名作為div的id,例如：<div id="abs()">，以便后續(xù)通過(guò)id實(shí)現(xiàn)快速查找。

比如以下代碼：

<div id="abs"> 返回一個(gè)數(shù)的絕對(duì)值。 參數(shù)可以是整數(shù)、浮點(diǎn)數(shù)或任何實(shí)現(xiàn)了 __abs__() 的對(duì)象。 如果參數(shù)是一個(gè)復(fù)數(shù)，則返回它的模。
</div>

（二）使用獲取用戶在input框輸入的字符，每輸入一個(gè)字符就馬上開(kāi)始字符串匹配，字符串匹配從左到右匹，程忽略字母大小寫(xiě)，并把匹配到的結(jié)果用javascript的document.createElement("label")動(dòng)態(tài)生成多個(gè)label標(biāo)簽作為下拉列表。主要代碼如下：

function chooseMenu() {
            //獲得輸入框的值
            var str = document.getElementById("input").value;
            //獲得標(biāo)簽名為div的數(shù)組，把首地址給divs
            var divs = document.getElementsByTagName("div");
            var div_di;
            var templabel;
            var _style_top = 0;
            //把choose層里面的子節(jié)點(diǎn)清空
            clearAllNode($("choose"));
            if (str != "") {
                //如果輸入框的值不為空，執(zhí)行以下循環(huán)
                for (var i = 2; i < divs.length; i++) {
                    //getAttribute方法獲得divs[i]節(jié)點(diǎn)屬性id的值
                    div_id = divs[i].getAttribute("id");
                    //如果字串str在主串div_id中出現(xiàn)在第0個(gè)位置則添加一個(gè)innerHTML為div_id的div到
                    //choose層
                    if (div_id.toLowerCase().indexOf(str.toLowerCase()) == 0) {
 
                        templabel = document.createElement("label");
                        templabel.className = "suggestions";
                        templabel.innerHTML = div_id;
                        templabel.style.visibility = "visible";
                        templabel.style.top = _style_top * 20 + "px";
                        templabel.style.position="absolute"
                        $("choose").appendChild(templabel);
                        _style_top++
                    }
                }
                //添加完choose層的元素后更新show層的元素
                if ($("choose").firstChild) {
                    show($("choose").firstChild.innerHTML);
                    $("choose").firstChild.style.backgroundColor = "ccc";
                    count = 0;
                } else {
                    show("");
                    $("choose").innerHTML = "couldn't find";
                }
            } else {
                show("");
            }
        }

（三）監(jiān)聽(tīng)鍵盤(pán)的↑和↓事件，調(diào)用鍵盤(pán)事件處理函數(shù)，在label前后兄弟節(jié)點(diǎn)鍵來(lái)回移動(dòng)。并更新右側(cè)詳細(xì)信息頁(yè)中的內(nèi)容。

1）使用<body οnkeydοwn="handleUpAndDown()">，為整個(gè)頁(yè)面添加鍵盤(pán)監(jiān)聽(tīng)事件。<body οnkeydοwn="handleUpAndDown()">

2）編寫(xiě)handleUpAndDown(evt)鍵盤(pán)響應(yīng)函數(shù)，這里需要注意的是charCode=38為鍵盤(pán)↑鍵，charCode=40為鍵盤(pán)↓鍵。當(dāng)charCode為38時(shí)調(diào)用moveUp()函數(shù)，當(dāng)charCode為40時(shí)調(diào)用moveDown()函數(shù)。moveDown()和moveUp()各自實(shí)現(xiàn)左側(cè)Label上下移動(dòng)效果。

 function moveUp() {
            var labels = document.getElementsByTagName("label");
            if (count != 0) {
                labels[count].style.backgroundColor = "#fff";
                labels[count - 1].style.backgroundColor = "#ccc";
                show(labels[count - 1].innerHTML);
                $("input").value = labels[count - 1].innerHTML;
                count = count - 1;
            }
        }
 
        function moveDown() {
            var labels = document.getElementsByTagName("label");
            if (count != labels.length - 1) {
                labels[count].style.backgroundColor = "#fff";
                labels[count + 1].style.backgroundColor = "#ccc";
                show(labels[count + 1].innerHTML);
                $("input").value = labels[count + 1].innerHTML;
                count = count + 1;
            }
        }
 
        function handleUpAndDown(evt) {
            evt = (evt) ? evt : event;
            var charCode = (evt.charCode) ? evt.charCode :
                ((evt.which) ? evt.which : evt.keyCode);
            if (charCode == 38)
                moveUp();
            if (charCode == 40)
                moveDown();
        }

3）使用οnkeyup="handleKeyUpEvent(event)，為Input輸入框綁定鍵盤(pán)事件，代碼如下：<input type="text" name="input" id="input" maxlength="10" style="width:100px;height:20px;"οnkeyup="handleKeyUpEvent(event)">

輸入你想查找的指令,可按鍵盤(pán)↑和↓移動(dòng)指令

4）編寫(xiě)handleKeyUpEvent(evt)，避免用戶在Input輸入框輸入文字時(shí)受到剛才添加的鍵盤(pán)事件干擾。

function handleKeyUpEvent(evt) {//用來(lái)處理鍵盤(pán)事件的函數(shù)
            evt = (evt) ? evt : event;
            var charCode = (evt.charCode) ? evt.charCode :
                ((evt.which) ? evt.which : evt.keyCode);
            if (charCode == 38 || charCode == 40 || charCode == 37 || charCode == 39) {
                
            } else {
                chooseMenu();
            }
        }

到此這篇關(guān)于利用JavaScript編寫(xiě)Python內(nèi)置函數(shù)查詢工具的文章就介紹到這了,更多相關(guān)JavaScript Python內(nèi)置函數(shù)查詢工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: