基于JavaScript編寫(xiě)8086匯編指令查詢工具
前言
匯編語(yǔ)言還是在大學(xué)的時(shí)候?qū)W的，匯編語(yǔ)言有個(gè)特點(diǎn)是語(yǔ)句短、條數(shù)多，很難可以把全部指令都背熟。當(dāng)時(shí)就想編寫(xiě)一個(gè)軟件可以隨時(shí)查閱匯編語(yǔ)言的各類指令，而且軟件不需要編譯可以隨時(shí)更新，可惜當(dāng)時(shí)用javascript語(yǔ)言寫(xiě)只寫(xiě)了一半，現(xiàn)在終于有空了，就把另一半補(bǔ)全了。
一、程序效果展示
輸入字母會(huì)自動(dòng)出現(xiàn)匹配的下拉列表，控制鍵盤(pán)↑和↓鍵就可以上下移動(dòng)選擇想查看的匯編指令解析。如下圖：
二、程序制作過(guò)程
（一）為了實(shí)現(xiàn)一個(gè)HTML文件就可以運(yùn)行，因此所有的數(shù)據(jù)都使用<div></div>標(biāo)簽進(jìn)行存放，并直接利用指令名作為div的id,例如：<div id="AAD">，以便后續(xù)通過(guò)id實(shí)現(xiàn)快速查找。主要代碼如下：
<div id="AAD"> AAD∶ 指令助記符——除法的ASCII調(diào)整（非壓縮的BCD碼）。在執(zhí)行除法操作前，必須利用 AAD指令將非壓縮型BCD碼表示的數(shù)轉(zhuǎn)換成二進(jìn)制數(shù)送AL。步驟是，先將被除數(shù)的高位數(shù)（AH中的內(nèi)容）乘以10，然后加到AL的低位數(shù)中，接著將AH清零。 </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 onkeydown="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;"onkeyup="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ě)8086匯編指令查詢工具的文章就介紹到這了,更多相關(guān)JavaScript匯編指令查詢工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用)
這篇文章主要介紹了ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用),添加echarts柱狀圖滾動(dòng)條,首先添加js用來(lái)判斷當(dāng)前視圖要顯示幾個(gè)及是否顯示滾動(dòng)條,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
本篇文章主要介紹了webpack異步加載業(yè)務(wù)模塊 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
js幾個(gè)不錯(cuò)的函數(shù) $$()...2006-10-10
本篇文章主要介紹了微信小程序模擬 cookie的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
JavaScript實(shí)例--實(shí)現(xiàn)計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算器，下面文章實(shí)現(xiàn)計(jì)算器作為學(xué)習(xí)期間的一個(gè)小練習(xí)，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-01-01
JavaScript ES6解構(gòu)運(yùn)算符的理解和運(yùn)用
在ES6屬性中新增了兩個(gè)屬性,分別是解構(gòu)和…運(yùn)算符,下面這篇文章主要給大家介紹了關(guān)于JavaScript ES6解構(gòu)運(yùn)算符的理解和運(yùn)用,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
JS中的Replace()傳入函數(shù)時(shí)的用法詳解
這篇文章主要介紹了JS中的Replace()傳入函數(shù)時(shí)的用法詳解,replace方法的語(yǔ)法是：stringObj.replace(rgExp, replaceText)關(guān)于js replace 傳入函數(shù)的用法，大家通過(guò)本文學(xué)習(xí)吧2017-09-09
js下拉框二級(jí)關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn)
Javascript Cookie讀寫(xiě)刪除操作的函數(shù)