-1
我剛剛爲我的同事完成了一個計算器，但我想使用它的數字鍵盤。 我的問題很簡單！我需要將數字鍵盤與我的計算器連接到哪個JavaScript函數？數字鍵盤劑量與我的計算器一起工作
我是初學者開發者，它是我的代碼！
謝謝你的幫助！
/*
** operation functions
*/
var dropdown = document.querySelector('material-dropdown');
var dropdownMenu = document.querySelectorAll('material-dropdown-menu');
var items = document.querySelectorAll('material-dropdown div')
var dropdown = {
// storage for currentry selected item
selected: '',
select: function() {
dropdown.selected = this.innerHTML;
},
close: function(evt) {
target.setAttribute('selected', dropdown.selected);
target.removeAttribute('state');
target.querySelector('#label').innerHTML = dropdown.selected;
},
open: function(target) {
target.setAttribute('state', 'expanded');
//target.querySelector('div[selected]').removeAttribute('selected');
document.addEventListener('click', dropdown.close)
},
baseImput: function() {
if (dropdown.selected === 'Binary') base.imput = 2;
if (dropdown.selected === 'Octal') base.imput = 8;
if (dropdown.selected === 'Decimal') base.imput = 10;
if (dropdown.selected === 'Duodecimal') base.imput = 12;
if (dropdown.selected === 'Hexadecimal') base.imput = 16;
},
baseOutput: function() {
if (dropdown.selected === 'Binary') base.output = 2;
if (dropdown.selected === 'Octal') base.output = 8;
if (dropdown.selected === 'Decimal') base.output = 10;
if (dropdown.selected === 'Duodecimal') base.output = 12;
if (dropdown.selected === 'Hexadecimal') base.output = 16;
}
};
//---
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', dropdown.select);
};
for (var i = 0; i < dropdownMenu.length; i++) {
dropdownMenu[i].addEventListener('click', dropdown.open);
};
// global variables
var calculator = document.querySelector('custom-calculator');
var display = calculator.querySelector('custom-calculator-display');
// storage for the calculator imputs
var memory = [];
// storage for the tempory memory
var memoryTemp = '';
// storage for the result from calculating the memory
var result = '';
// storage for the calculator imputs
var base = {
imput: 10,
output: 10
};
// storage for the calculator imputs
var conferter = {
imput: 1,
output: 1
};
// reset the calculator
function clear() {
memory = [];
result = '';
display.removeAttribute('state');
};
// remove the last digit in memory
function del() {
memory.pop();
};
// prosses the keypress
function keyPress(key) {
// clear if an result is shown and the event hasn't been triggered by the '=' key
if (result && key !== '=') {
// reset the calculator
clear();
};
// cicide what action to trigger
if (key === '=') {
// calculate the memory
math();
} else if (key === 'EFFACER') {
// delete the last digit
del();
} else if (key < base.imput || typeof key == 'string') {
// add the current key to the memory
memory.push(key);
};
// update the display so it shows the output/result
update();
};
// calculate the memory
function math() {
// clear the result
result = '';
// loop for amount of items in array
for (var i = 0; i < memory.length; i++) {
// check if digit is a nuber
if (typeof memory[i] == 'number') {
// add number to storage for memoryTemp
memoryTemp += memory[i];
} else {
// add string to storage for result
// replace the ร— and the รท to prefent errors
result += memory[i].replace(/\u00D7/g, '*').replace(/\u00F7/g, '/');
};
// check if it should add the content of memoryTemp to result
if (typeof memory[i + 1] != 'number') {
// add content memoryTemp to result
result += parseInt(memoryTemp, base.imput);
// reset memoryTemp
memoryTemp = '';
};
};
// test for errors
try {
// set eval() result. and confert it to string if it succeeds
result = eval(result).toString(base.output);
} catch(err) {
// set result to err if it fails
result = 'err';
};
// check if result is undefined or the outcome is NaN
if (result == undefined || result == 'NaN') {
// set result to err
result = 'err';
};
// set display to [state="result"]
display.setAttribute('state', 'result');
};
// update the calculator
function update() {
// set the inner HTML of #output to memory
display.querySelector('#output').innerHTML = memory.join('');
// check if there's a '0' at the beginging of the memory
if (memory[0] == 0) {
// clear the memory to prefent issues with eval()
memory = [];
};
// check if the result has value undefined
// check if the result has value 'err'
if (result === undefined) {
// reset the calculator
clear();
} else if (result === 'err') {
// set the display to [state="erreur"]
display.setAttribute('state', 'erreur');
// set the inner HTML of #output to Error...
display.querySelector('#output').innerHTML = 'Erreur...';
} else {
// set the inner HTML of #result to result
display.querySelector('#result').innerHTML = result;
};
};@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);
@import url(http://fonts.googleapis.com/css?family=RobotoDraft:100,300,400);
*, *::after, *::before {
box-sizing: border-box;
}
html {
color: #212121;
font-family: "Roboto", sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1;
}
body {
background: #fafafa;
margin: 0;
}
body {
-webkit-transition: opacity ease-in 0.2s;
transition: opacity ease-in 0.2s;
}
body[unresolved] {
opacity: 0;
}
::-webkit-selection,
::selection {
background: rgba(0, 0, 0, 0.2);
}
custom-calculator {
background: #e0e0e0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "RobotoDraft", "Roboto", sans-serif;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
-webkit-tap-highlight-color: transparent;
top: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 500;
}
@media (min-width: 576px) {
custom-calculator {
border-radius: 2px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
margin: 16px;
}
}
custom-calculator-display {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
color: #9e9e9e;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-right: 32px;
position: relative;
}
custom-calculator-display[state="result"] {
color: #e0e0e0;
}
custom-calculator-display[state="result"] #output {
font-size: 38px;
font-weight: 400;
}
custom-calculator-display[state="result"] #result {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
custom-calculator-display[state="erreur"] {
background: #F50057;
color: #e0e0e0;
}
#output {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
font-size: 112px;
font-weight: 100;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
position: relative;
}
#result {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: none;
-webkit-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
font-size: 84px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
#result::before {
content: "=";
font-size: 38px;
margin-left: 24px;
}
#dropdown {
display: none;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
height: 56px;
padding: 4px 0;
}
@media (min-width: 576px) {
#dropdown {
height: 64px;
padding: 8px 0;
}
[mode="conferter"] #dropdown {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
[primary="red"] custom-calculator-display[state="result"] {
background: #EF5350;
}
[primary="pink"] custom-calculator-display[state="result"] {
background: #EC407A;
}
[primary="purple"] custom-calculator-display[state="result"] {
background: #AB47BC;
}
[primary="deep-purple"] custom-calculator-display[state="result"] {
background: #7E57C2;
}
[primary="indigo"] custom-calculator-display[state="result"] {
background: #5C6BC0;
}
[primary="blue"] custom-calculator-display[state="result"] {
background: #42A5F5;
}
[primary="light-blue"] custom-calculator-display[state="result"] {
background: #29B6F6;
}
[primary="cyan"] custom-calculator-display[state="result"] {
background: #26C6DA;
}
[primary="teal"] custom-calculator-display[state="result"] {
background: #26A69A;
}
[primary="green"] custom-calculator-display[state="result"] {
background: #66BB6A;
}
[primary="light-green"] custom-calculator-display[state="result"] {
background: #9CCC65;
}
[primary="lime"] custom-calculator-display[state="result"] {
background: #D4E157;
}
[primary="yellow"] custom-calculator-display[state="result"] {
background: #FFEE58;
}
[primary="amber"] custom-calculator-display[state="result"] {
background: #FFCA28;
}
[primary="orange"] custom-calculator-display[state="result"] {
background: #FFA726;
}
[primary="deep-orange"] custom-calculator-display[state="result"] {
background: #FF7043;
}
custom-calculator-drawer {
box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
position: relative;
width: 28px;
}
@media (min-width: 784px) {
custom-calculator-drawer {
-webkit-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
}
panel-handlebar {
display: none;
}
}
panel-handlebar {
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 28px;
left: 0;
position: absolute;
top: 0;
}
[accent="red"] custom-calculator-drawer {
background: #D50000;
}
[accent="pink"] custom-calculator-drawer {
background: #C51162;
}
[accent="purple"] custom-calculator-drawer {
background: #AA00FF;
}
[accent="deep-purple"] custom-calculator-drawer {
background: #6200EA;
}
[accent="indigo"] custom-calculator-drawer {
background: #304FFE;
}
[accent="blue"] custom-calculator-drawer {
background: #2962FF;
}
[accent="light-blue"] custom-calculator-drawer {
background: #0091EA;
}
[accent="cyan"] custom-calculator-drawer {
background: #00B8D4;
}
[accent="teal"] custom-calculator-drawer {
background: #00BFA5;
}
[accent="green"] custom-calculator-drawer {
background: #00C853;
}
[accent="light-green"] custom-calculator-drawer {
background: #64DD17;
}
[accent="lime"] custom-calculator-drawer {
background: #AEEA00;
}
[accent="yellow"] custom-calculator-drawer {
background: #FFD600;
}
[accent="amber"] custom-calculator-drawer {
background: #FFAB00;
}
[accent="orange"] custom-calculator-drawer {
background: #FF6D00;
}
[accent="deep-orange"] custom-calculator-drawer {
background: #DD2C00;
}
custom-calculator-keygrid {
background: #424242;
color: #e0e0e0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
font-size: 34px;
font-weight: 300;
}
panel-keyrow {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
panel-keyrow:last-child {
background: #616161;
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
font-size: 32px;
}
custom-calculator-key {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
custom-calculator-key div {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
position: absolute;
right: 0;
top: 0;
}
custom-calculator-keypad {
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 8;
-webkit-flex: 8;
-ms-flex: 8;
flex: 8;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow: hidden;
position: relative;
z-index: -100;
}
custom-tabs {
color: #FFFFFF;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 20px;
}
panel-tab {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 64px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
panel-tab div {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0 24px;
}
[selection-bar] {
left: 0;
position: absolute;
width: 2px;
top: 0;
bottom: 0;
}
[selection-bar][state="expand"] {
-webkit-transition: 0.15s ease-in;
transition: 0.15s ease-in;
}
[selection-bar][state="shrink"] {
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
material-dropdown-menu {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 48px;
outline: none;
position: relative;
min-width: 168px;
}
#label {
border-bottom: 1px solid #616161;
font-size: 16px;
height: 32px;
margin: 8px 4px;
padding: 8px 16px;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
material-dropdown {
background: #fafafa;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
color: #8f8f8f;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: "Roboto", sans-serif;
font-size: 16px;
left: 0;
margin: 0 4px;
min-height: 64px;
overflow: visible;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
material-dropdown div {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 48px;
padding: 0 8px;
width: 100%;
}
material-dropdown div[selected] {
background: #d6d6d6;
}
material-dropdown div:first-child {
margin-top: 8px;
}
material-dropdown div:last-child {
margin-bottom: 8px;
}
[state="expanding"] material-dropdown,
[state="closing"] material-dropdown {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
[state="expanded"] material-dropdown {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
material-selection {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
material-selection > div {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 48px;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SIE - Calculette</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Styles -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href="assets/plugins/pace-master/themes/blue/pace-theme-flash.css" rel="stylesheet"/>
<link href="assets/plugins/uniform/css/uniform.default.min.css" rel="stylesheet"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/line-icons/simple-line-icons.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/offcanvasmenueffects/css/menu_cornerbox.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/waves/waves.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/3d-bold-navigation/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/slidepushmenus/css/component.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/modern.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/modern.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/calculator2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<html primary="light-blue" accent="teal">
<body>
<custom-calculator>
<custom-calculator-display mode="conferter">
<div id="output">0</div>
<div id="result"></div>
</custom-calculator-display>
<custom-calculator-keypad>
<custom-calculator-keygrid>
<panel-keyrow>
<custom-calculator-key onClick="keyPress(7)">
<div>7</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(4)">
<div>4</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(1)">
<div>1</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress('.')">
<div>.</div>
</custom-calculator-key>
</panel-keyrow>
<panel-keyrow>
<custom-calculator-key onClick="keyPress(8)">
<div>8</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(5)">
<div>5</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(2)">
<div>2</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(0)">
<div>0</div>
</custom-calculator-key>
</panel-keyrow>
<panel-keyrow>
<custom-calculator-key onClick="keyPress(9)">
<div>9</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(6)">
<div>6</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress(3)">
<div>3</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress('=')">
<div>=</div>
</custom-calculator-key>
</panel-keyrow>
<panel-keyrow>
<custom-calculator-key onClick="keyPress('EFFACER')">
<div>EFFACER</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress('÷')">
<div>÷</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress('×')">
<div>×</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress('-')">
<div>-</div>
</custom-calculator-key>
<custom-calculator-key onClick="keyPress('+')">
<div>+</div>
</custom-calculator-key>
</panel-keyrow>
</custom-calculator-keygrid>
<custom-calculator-drawer>
<custom-tabs>
<panel-tab>
<div><a href="dashboard.html" style="color:#fff;"><span class="menu-icon glyphicon glyphicon-home"></span> Accueil</a></div>
</panel-tab>
<panel-tab disabeled>
<div><a href="compta_accueil.html" style="color:#fff;"><span class="menu-icon glyphicon glyphicon-briefcase"></span> Comptabilité</a></div>
</panel-tab>
<panel-tab disabeled>
<div><a href="compta_accueil.html" style="color:#fff;"></a></div>
</panel-tab>
<panel-tab disabeled>
<div><a href="compta_accueil.html" style="color:#fff;"></a></div>
</panel-tab>
<panel-tab disabeled>
<div><a href="compta_accueil.html" style="color:#fff;"></a></div>
</panel-tab>
<div class="panel panel-white" style="opacity: 0.9;">
<div class="panel-body">
<div class="post">
<textarea class="form-control" placeholder="Vous pouvez écrire une note depuis ce mini éditeur de texte !" rows="12" style="opacity: 0.9;"></textarea>
</div>
</div>
</div>
<div selection-bar></div>
</custom-tabs>
<panel-handlebar></panel-handlebar>
</custom-calculator-drawer>
</custom-calculator-keypad>
</custom-calculator>
</body>
</html>
<script src="assets/js/calculator2.js"></script>
<script src="assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script src="assets/js/modern.min.js"></script>
</body>
</html>
啓用num lock？ – A1rPun
你的問題很難理解。我猜你想用鍵盤輸入數字而不是點擊按鈕？使用'onKeyUp'事件來找出用戶何時按下了一個鍵。 – neuhaus
這是如何工作的？ – Titof