利用JavaScript編寫Python內(nèi)置函數(shù)查詢工具
最近在學(xué)習(xí)Python語言,Python有豐富的內(nèi)置函數(shù)實(shí)現(xiàn)各種功能,但查詢內(nèi)置函數(shù)時總是需要百度查,有沒有一個小工具可以單機(jī)無網(wǎng)絡(luò)查詢Python內(nèi)置函數(shù),方便自己學(xué)習(xí)編寫Python程序呢?在網(wǎng)上查了一下好像沒有,那就自己做一個吧,結(jié)合以前自己用Javascript寫過的8086匯編指令查詢小工具,只需要稍微改動就可以了。
一、程序效果展示
輸入字母會自動出現(xiàn)匹配的下拉列表,控制鍵盤↑和↓鍵就可以上下移動選擇想查看的Python內(nèi)置函數(shù),如下圖。
二、程序編寫過程
(一)為方便使用,實(shí)現(xiàn)只用一個HTML文件運(yùn)行,小工具中所有的數(shù)據(jù)都使用<div></div>標(biāo)簽進(jìn)行存放,并直接利用Python內(nèi)置函數(shù)名作為div的id,例如:<div id="abs()">,以便后續(xù)通過id實(shí)現(xiàn)快速查找。
比如以下代碼:
<div id="abs"> 返回一個數(shù)的絕對值。 參數(shù)可以是整數(shù)、浮點(diǎn)數(shù)或任何實(shí)現(xiàn)了 __abs__() 的對象。 如果參數(shù)是一個復(fù)數(shù),則返回它的模。 </div>
(二)使用獲取用戶在input框輸入的字符,每輸入一個字符就馬上開始字符串匹配,字符串匹配從左到右匹,程忽略字母大小寫,并把匹配到的結(jié)果用javascript的document.createElement("label")動態(tài)生成多個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個位置則添加一個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)聽鍵盤的↑和↓事件,調(diào)用鍵盤事件處理函數(shù),在label前后兄弟節(jié)點(diǎn)鍵來回移動。并更新右側(cè)詳細(xì)信息頁中的內(nèi)容。
1)使用<body οnkeydοwn="handleUpAndDown()">,為整個頁面添加鍵盤監(jiān)聽事件。<body οnkeydοwn="handleUpAndDown()">
2)編寫handleUpAndDown(evt)鍵盤響應(yīng)函數(shù),這里需要注意的是charCode=38為鍵盤↑鍵,charCode=40為鍵盤↓鍵。當(dāng)charCode為38時調(diào)用moveUp()函數(shù),當(dāng)charCode為40時調(diào)用moveDown()函數(shù)。moveDown()和moveUp()各自實(shí)現(xiàn)左側(cè)Label上下移動效果。
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輸入框綁定鍵盤事件,代碼如下:<input type="text" name="input" id="input" maxlength="10" style="width:100px;height:20px;"οnkeyup="handleKeyUpEvent(event)">
輸入你想查找的指令,可按鍵盤↑和↓移動指令
4)編寫handleKeyUpEvent(evt),避免用戶在Input輸入框輸入文字時受到剛才添加的鍵盤事件干擾。
function handleKeyUpEvent(evt) {//用來處理鍵盤事件的函數(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編寫Python內(nèi)置函數(shù)查詢工具的文章就介紹到這了,更多相關(guān)JavaScript Python內(nèi)置函數(shù)查詢工具內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.2009-10-10javascript offsetX與layerX區(qū)別
FF沒有offsetX屬性,有個layerX屬性,只要將事件源的位置設(shè)置成相對定位(position:relative)或絕對定位(position:absolute),兩者結(jié)果就相等,表示事件源相對于父元素的X坐標(biāo)。2010-03-03JavaScript在Android的WebView中parseInt函數(shù)轉(zhuǎn)換不正確問題解決方法
這篇文章主要介紹了JavaScript在Android的WebView中parseInt函數(shù)轉(zhuǎn)換不正確問題解決方法,因轉(zhuǎn)換的字符串?dāng)?shù)字都以0開頭,導(dǎo)致parseInt函數(shù)在瀏覽器和Android WebView中轉(zhuǎn)換結(jié)果不一樣,本文給出了解決方法,需要的朋友可以參考下2015-04-04Bootstrap Scrollspy源碼學(xué)習(xí)
這篇文章主要介紹了Bootstrap Scrollspy源碼學(xué)習(xí),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03