Javascript | 用Javascript编写Python内置函数查询工具

雨点打透心脏的1/2处 2024-04-01 10:16 36阅读 0赞

最近在学习Python语言，Python有丰富的内置函数实现各种功能，但查询内置函数时总是需要百度查，有没有一个小工具可以单机无网络查询Python内置函数，方便自己学习编写Python程序呢？在网上查了一下好像没有，那就自己做一个吧，结合以前自己用Javascript写过的8086汇编指令查询小工具，只需要稍微改动就可以了。

#### 一、程序效果展示 ####

输入字母会自动出现匹配的下拉列表，控制键盘↑和↓键就可以上下移动选择想查看的Python内置函数，如下图。

![1452cc9d8e2e45c2af26046745f4e3d6.png][]

#### 二、程序编写过程 ####

（一）为方便使用，实现只用一个HTML文件运行，小工具中所有的数据都使用<div></div>标签进行存放，并直接利用Python内置函数名作为div的id,例如：<div id="abs()">，以便后续通过id实现快速查找。

比如以下代码：

<div id="abs"> 返回一个数的绝对值。 参数可以是整数、浮点数或任何实现了 __abs__() 的对象。 如果参数是一个复数，则返回它的模。
    </div>

（二）使用获取用户在input框输入的字符，每输入一个字符就马上开始字符串匹配，字符串匹配从左到右匹，程忽略字母大小写，并把匹配到的结果用javascript的document.createElement("label")动态生成多个label标签作为下拉列表。主要代码如下：

function chooseMenu() {
                //获得输入框的值
                var str = document.getElementById("input").value;
                //获得标签名为div的数组，把首地址给divs
                var divs = document.getElementsByTagName("div");
                var div_di;
                var templabel;
                var _style_top = 0;
                //把choose层里面的子节点清空
                clearAllNode($("choose"));
                if (str != "") {
                    //如果输入框的值不为空，执行以下循环
                    for (var i = 2; i < divs.length; i++) {
                        //getAttribute方法获得divs[i]节点属性id的值
                        div_id = divs[i].getAttribute("id");
                        //如果字串str在主串div_id中出现在第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("");
                }
            }

（三）监听键盘的↑和↓事件，调用键盘事件处理函数，在label前后兄弟节点键来回移动。并更新右侧详细信息页中的内容。

1）使用<body οnkeydοwn="handleUpAndDown()">，为整个页面添加键盘监听事件。<body οnkeydοwn="handleUpAndDown()">  
2）编写handleUpAndDown(evt)键盘响应函数，这里需要注意的是charCode=38为键盘↑键，charCode=40为键盘↓键。当charCode为38时调用moveUp()函数，当charCode为40时调用moveDown()函数。moveDown()和moveUp()各自实现左侧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) {//用来处理键盘事件的函数
                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();
                }
            }

####    三、程序源代码 ####

源代码下载地址↓↓↓

[https://download.csdn.net/download/qq616491978/86815274][https_download.csdn.net_download_qq616491978_86815274]

[1452cc9d8e2e45c2af26046745f4e3d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/57f0d3ee0a7b4b88b669b5bc8d3c806c.png
[https_download.csdn.net_download_qq616491978_86815274]: https://download.csdn.net/download/qq616491978/86815274

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript | 用Javascript编写Python内置函数查询工具

最近在学习Python语言，Python有丰富的内置函数实现各种功能，但查询内置函数时总是需要百度查，有没有一个小工具可以单机无网络查询Python内置函数，方便自己学习编写P

雨点打透心脏的1/2处/ 2024年04月01日 10:16/ 0 赞/ 37 阅读

相关 python常用内置对象_JavaScript常用内置对象有哪些？

JavaScript常用内置对象有哪些？一般来说，大家最常用的有浏览器对象模型、文档对象模型和全局JavaScript对象三类。下面小编就来分析一下这三类具体的内置对象及其作用

╰+哭是因爲堅強的太久メ/ 2022年10月31日 15:59/ 0 赞/ 274 阅读

相关 JavaScript的常用内置函数

在使用JavaScript语言时，除了可以自定义函数之外，还可以使用JavaScript的内置函数，这些内置函数是由JavaScript语言自身提供的函数。常用的内置函数

我会带着你远行/ 2022年10月28日 14:26/ 0 赞/ 58 阅读

相关 JavaScript内置对象

1、什么是对象： JavaScript中的所有事物都是对象：字符串、数组、数值、函数… 每个对象带有属性和方法 JavaScript允许自定义对象 2、自定义对象

朴灿烈づ我的快乐病毒、/ 2022年06月15日 11:51/ 0 赞/ 326 阅读

相关 Javascript内置对象

1 什么是对象 JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。对象的属性：反映该对象某些特定的性质的，如：字符串

亦凉/ 2022年06月12日 14:29/ 0 赞/ 357 阅读

相关 JavaScript中的内置函数

一介绍在使用JavaScript语言时，除了可以自定义函数之外，还可以使用JavaScript的内置函数，这些内置函数是由JavaScript语言自身提供的函数。

心已赠人/ 2022年05月11日 23:44/ 0 赞/ 249 阅读

相关 javaScript内置函数大全

1.Date：日期函数属性(1): constructor 所修立对象的函数参考 prototype 能够为对象加进的属性和方法办法

傷城~/ 2022年04月18日 02:05/ 0 赞/ 320 阅读

相关 JavaScript内置对象

全局的对象（ global objects ）或称标准内置对象，不要和 "全局对象（global object）" 混淆。这里说的全局的对象是说在全局作用域里的对象。 "全局

谁借莪１个温暖的怀抱￠/ 2022年04月01日 10:49/ 0 赞/ 417 阅读

相关 javascript内置函数大全

1.Date：日期函数属性(1): constructor 所修立对象的函数参考 prototype 能够为对象加进的属性和方法办法(43): getD

一时失言乱红尘/ 2021年11月17日 23:54/ 0 赞/ 438 阅读

相关【JavaScript内置函数】[转载]

avascript函数一共可分为五类：　　 ·常规函数　　 ·数组函数　　 ·日期函数　　 ·数学函数　　 ·字符串函数 \----------

喜欢ヅ旅行/ 2021年11月17日 23:48/ 0 赞/ 415 阅读