Tạo máy tính đơn giản bằng có giao diện bằng Css và chức năng cơ bản bằng Javascript. Full code Demo hướng dẫn thực hiện
Calculator CSS Javascript
Cùng xem demo về chiếc máy tính được tạo ra bằng HTML, CSS và các chức năng đơn giản bẳng JavascriptHướng dẫn thực hiện
Bước 1: Thêm HTML sauMẹo: Bấm nút
để copy code
<div id="main">
<h4>ELECTRONIC CALCULATOR</h4>
<div id="screen">
<output id="input_single"></output>
<output id="input_all"></output>
</div>
<div id="btn_c">
<!-- 1st row -->
<button type="button" class="function_btn" id="ac" value="ac">AC</button>
<button type="button" class="function_btn" id="ce" value="ce">CE</button>
<button type="button" id="division" value="/">÷</button>
<button type="button" id="multiplication" value="x">x</button>
<!--2rd row -->
<button type="button" id="7" value="7">7</button>
<button type="button" id="8" value="8">8</button>
<button type="button" id="9" value="9">9</button>
<button type="button" id="subtraction" value="-">-</button>
<!--3d row -->
<button type="button" id="4" value="4">4</button>
<button type="button" id="5" value="5">5</button>
<button type="button" id="6" value="6">6</button>
<button type="button" id="addition" value="+">+</button>
<!-- 4th row -->
<button type="button" id="btn_colspan2" value="=">=</button>
<button type="button" id="1" value="1">1</button>
<button type="button" id="2" value="2">2</button>
<button type="button" id="3" value="3">3</button>
<!--5th row -->
<button type="button" id="btn_rowspan2" value="0">0</button>
<button type="button" id="dot" value=".">.</button>
</div>
</div>
Mẹo: Bấm nút
để copy code
body {
font-family: "Herculanum", fantasy;
background-color: rgba(0,0,0,.4);
}
h4 {
text-align: center;
margin-top: 15px;
font-size: 1.1rem;
}
#input_single {
box-sizing: border-box;
display: block;
font-size: 2.7rem;
font-family: serif;
text-align: right;
padding: 0px 5px 0px 5px;
color: rgba(0,0,0,.7);
width: 270px; /*0+5+260+5+0*/
height:49px;
}
#input_all {
display: block;
font-size: 1rem;
font-family: serif;
text-align: right;
margin-top: -3px;
color: rgba(0,0,0,.5);
padding: 0px 10px 0px 10px;
}
#main {
box-sizing: border-box;
width: 300px; /*2+13+270+13+2 */
margin: 40px auto 0px auto;
background-color: rgba(255, 245, 238, .9);
border: 2px solid #908b85;
border-radius: 20px;
/*padding: 0px 13px 30px 13px;*/
padding-bottom: 20px;
box-shadow: inset -1px -6px 12px 0.1px #89847e, 8px 10px 50px 3px black;
}
#screen {
font-family: "Herculanum", fantasy;
width: 270px;
height: 70px;
margin: auto; /*margin-left/right=13px */
background-color: rgba(156, 176, 113, 0.3);
border-radius: 5px;
border: thin solid #CCC;
box-shadow: inset -1px -1px 6px 0.1px #89847e;
}
#btn_c {
margin-top: 10px;
position: relative;
}
button {
font-family: "Herculanum", fantasy;
display: inline-block;
box-sizing: border-box;
font-size: 1.2rem;
width: 56px;
height: 2em;
text-align: center;
margin-left: 12px;
margin-top: 10px;
margin-bottom: 2px;
border-radius: 7px;
background-color: #3D3C3A;
color: white;
border: thin solid rgb(0,0,0);
box-shadow: 0px 3px 1px rgba(0,0,0,.9);
}
button:active {
transform: translate(0px, 3px);
box-shadow: none;
}
button:focus {
outline: none;
}
#btn_rowspan2 {
box-sizing: border-box;
width: 129px;
}
#btn_colspan2 {
position: absolute; /* containing block is #btn_c*/
height: 5.5rem;
right: 10px;
bottom: 0px;
}
.function_btn {
background-color: rgb(167, 45, 69)
}
footer {
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
text-align: center;
font-family: "Herculanum","Hanzipen SC", fantasy;
}
span {
color: rgb(167, 45, 69)
}
window.onload = function () {
calculateInput();
};
var big_output = document.getElementById("input_single");
var small_output = document.getElementById("input_all");
var btn_c = document.getElementById("btn_c");
var sign_just_used = false;
function meetLimit() {
big_output.value = "0";
small_output.value = "Digit Limit Met";
}
function calculateInput() {
btn_c.onclick = function (event) {
var event = event ? event : window.event;
var target = event.target || event.srcElement;
var last_char = small_output.value[small_output.value.length - 1];
var math_sign = /[\+/\-x]/; // NOTE: it is better to escape the "-";
switch (target.value) {
case "ac":
big_output.value = "0";
small_output.value = "0";
break;
case ".":
// s have "=" already, or s.value is empty
if (small_output.value.indexOf("=") > -1 || !small_output.value) {
return false;
}
// s or b's value length surpass their limit
else if (small_output.value.length >= 31 || big_output.value.length >= 12) {
meetLimit();
}
// s.value is "Digit Limit Met" or ended with a math sign
else if (small_output.value === "Digit Limit Met" || math_sign.test(last_char)) {
big_output.value = "0.";
small_output.value = "0.";
}
// s.value is combination of number and math signs, not surpass the length limit, not ended with math signs either
else {
if (!sign_just_used) {
// not ended with math signs
big_output.value = big_output.value + target.value;
small_output.value = small_output.value + target.value;
} else {
big_output.value = "0.";
small_output.value = small_output.value + "0.";
sign_just_used = false;
}
}
break;
case "0":
if (small_output.value === "0" || !small_output.value) {
return false;
} else if (small_output.value.length >= 31 || big_output.value.length >= 12) {
meetLimit();
} else if (small_output.value.indexOf("=") > -1 || small_output.value === "Digit Limit Met") {
big_output.value = target.value;
small_output.value = target.value;
} else {
if (!sign_just_used) {
if (big_output.value === "0") {
return false;
}
big_output.value = big_output.value + target.value;
small_output.value = small_output.value + target.value;
} else {
big_output.value = target.value;
small_output.value = small_output.value + target.value;
sign_just_used = false;
}
}
break;
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
if (!small_output.value) {
return false;
} else if (small_output.value === "0" || small_output.value === "Digit Limit Met" || small_output.value.indexOf("=") > -1) {
big_output.value = target.value;
small_output.value = target.value;
} else if (small_output.value.length >= 31 || big_output.value.length >= 12) {
meetLimit();
} else if (big_output.value === "0") {
if (last_char === "0") {
big_output.value = target.value;
small_output.value = small_output.value.slice(0, small_output.value.length - 1) + target.value;
} else {
big_output.value = target.value;
small_output.value = small_output.value + target.value;
}
} else {
if (!sign_just_used) {
big_output.value = big_output.value + target.value;
small_output.value = small_output.value + target.value;
} else {
big_output.value = target.value;
small_output.value = small_output.value + target.value;
sign_just_used = false;
}
}
break;
case "x":
case "/":
case "+":
case "-":
if (small_output.value.indexOf("=") > -1 || !small_output.value || small_output.value === "Digit Limit Met") {
return false;
} else if (small_output.value.length >= 31 || big_output.value.length >= 12) {
meetLimit();
} else if (last_char === ".") {
big_output.value = target.value;
small_output.value = small_output.value.slice(0, small_output.value.length - 1) + target.value;
sign_just_used = true;
} else {
if (!sign_just_used) {
big_output.value = target.value;
small_output.value = small_output.value + target.value;
sign_just_used = true;
} else {
return false;
}
}
break;
case "=":
if (small_output.value.indexOf("=") > -1 || !small_output.value || small_output.value === "Digit Limit Met" || math_sign.test(last_char)) {
return false;
} else if (small_output.value.length >= 31 || big_output.value.length >= 12) {
meetLimit();
} else if (last_char === ".") {
small_output.value = small_output.value.slice(0, small_output.value.length - 1) + target.value;
} else if (small_output.value.indexOf("=") === -1 && !math_sign.test(small_output.value)) {
console.log("no math sign");
small_output.value = small_output.value + "=" + small_output.value;
} else {
var result = parseFloat(small_output.value); // converted to number
var substring = small_output.value.slice(String(result).length);
do {
var sign = substring[0];
substring = substring.slice(1);
var operant = parseFloat(substring); // converted to number
substring = substring.slice(String(operant).length);
switch (sign) {
case "/":
result = result / operant;
break;
case "+":
result = result + operant;
break;
case "-":
result = result - operant;
break;
case "x":
result = result * operant;
break;
}
} while (substring.length > 0);
if (String(result).indexOf(".") > -1) {
result = String(result.toFixed(2)); // converted to string
}
if (result.length >= 12) {
meetLimit();
} else {
big_output.value = result;
small_output.value = small_output.value + "=" + result;
}
}
break;
case "ce":
if (small_output.value.indexOf("=") > -1) {
big_output.value = "0";
small_output.value = "0";
} else {
if (!math_sign.test(last_char)) {
var len = small_output.value.length - big_output.value.length;
small_output.value = small_output.value.slice(0, len);
big_output.value = "0";
sign_just_used = true;
}
}
} // end of switch
}; // end of onclick
} // end of calculateInput
