【发布时间】：2017-05-03 16:36:32
【问题描述】：
光环
我已经用（CSS、HTML、JavaScript）构建了一个计算器。 问题是我无法在（Form.input）上显示按钮， 以及 (Form.Output) 中的答案 javascript 代码应该可以工作，但它什么也没做。 有什么建议可以解决这个问题吗？
$(document).ready(function() {
$('.keys button').on('click', function() {
var value = $(this).value();
$('.display.input').append(value);
});
$('button[name="="]').on('click', function() {
});
});/* reset */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 5vw;
}
html, body {
width: 100%;
margin: 0;
padding: 0;
}
/* document */
body {
font-family: "URW Gothic L", "Helvetica", "Arial", sans-serif;
/* Background source:
* http://www.texturex.com/Leather-Textures/black+leather+texture+large+close+up+grain+material+dark+fabric+stock+photo.jpg.php
* Free offered by Free Leather Textures */
background: url('../../../media/black-leather-texture.jpg');
}
.display {
border: 0.2rem solid gray;
border-radius: 0.5rem;
background: black;
padding: 0.5rem;
width: 100%;
display: block;
}
.display > output {
display: block;
height: 1.5rem;
margin: 0;
color: aqua;
}
form {
width: 100%;
padding: 0.5rem;
}
fieldset {
border: none;
margin: 0;
font-size: 0;
}
fieldset > button {
width: 20%;
margin: 3.3%;
padding: 2vw;
}
fieldset > button:nth-child(4n) {
margin-right: 0;
}
fieldset > button:nth-child(4n+1) {
margin-left: 0;
}
button {
box-shadow: 0 0 0.5rem black;
border: none;
border-radius: 0.5rem;
text-align: center;
vertical-align: middle;
margin: 0;
font-weight: bold;
font-size: 1.5rem;
}
output {
font-size: 1rem;
}
button.number, button.command {
background: white;
}
button.number:active, button.command:active {
background: rgb(230, 230, 230);
box-shadow: inset 0 0 0.5rem black;
}
button.operator {
box-shadow: 0 0 0.5rem rgb(80,80, 80);
background: black;
color: white;
}
button.operator:active {
background: rgb(60, 60, 60);
box-shadow: inset 0 0 0.5rem black;
}
#key-c {
background: red;
color: white;
}
#key-c:active {
background: darkred;
}
button:focus {
box-shadow: 0 0 0.5rem deepskyblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casio Mini</title>
<link rel="stylesheet" href="styles/style.css" />
<script src="scripts/calculator.js"></script>
</head>
<body>
<form>
<fieldset class="display">
<output name="output" id="output" class="output"></output>
<output name="input" id="input" class="input"></output>
</fieldset>
<fieldset>
<button type="button" name="key-0" id="key-0" class="number" value="0">0</button>
<button type="button" name="key-1" id="key-1" class="number" value="1">1</button>
<button type="button" name="key-2" id="key-2" class="number" value="2">2</button>
<button type="button" name="key-+" id="key-+" value="+" class="operator">+</button>
<button type="button" name="key-3" id="key-3" class="number" value="3">3</button>
<button type="button" name="key-4" id="key-4" class="number" value="4">4</button>
<button type="button" name="key-5" id="key-5" class="number" value="5">5</button>
<button type="button" name="key--" id="key--" value="-" class="operator">−</button>
<button type="button" name="key-6" id="key-6" class="number" value="6">6</button>
<button type="button" name="key-7" id="key-7" class="number" value="7">7</button>
<button type="button" name="key-8" id="key-8" class="number" value="8">8</button>
<button type="button" name="key-*" id="key-*" value="*" class="operator">∗</button>
<button type="button" name="key-9" id="key-9" class="number" value="9">9</button>
<button type="button" name="key-c" id="key-c" class="command">C</button>
<button type="button" name="key-=" id="key-=" class="command">=</button>
<button type="button" name="key-/" id="key-/" value="/" class="operator">÷</button>
</fieldset>
</form>
</body>
</html>【问题讨论】：
-
请使用 jsfiddle 之类的工具从您的代码中创建一个可执行示例。
标签： javascript css calculator