Program post site for everyone
htmlのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>電卓</title>
</head>
<body>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<input type="text" id="text01"readonly >
<input type="button" value="▲" onclick="ireu()" style="width: 1cm;background-color: rgba(169, 169, 169, 0.733);color: whitesmoke;"><br>
<input type="button" value="sw" id="ki" onclick="kiri()" style="background-color: rgba(169, 169, 169, 0.733);color: whitesmoke;" >
<input type="text" id="text02"readonly >
<input type="button" value="▼" onclick="ires()" id="shi" style="width: 1cm;background-color: rgba(169, 169, 169, 0.733);color: whitesmoke;"><br>
<input type="button" value="万" onclick="man()" id="a">
<input type="button" value="千" onclick="sen()" id="a"><br>
<input type="button" value="c" onclick="c()" id="c">
<input type="button" value="M+" onclick="ho()" id="m">
<input type="button" value="M-" onclick="m()" id="m">
<input type="button" value="MC" onclick="mc()" id="m">
<input type="button" value="MR" onclick="mr()" id="m"><br>
<button onclick="disp(7)">7</button>
<button onclick="disp(8)">8</button>
<button onclick="disp(9)">9</button>
<input type="button" value="/" onclick="waru()">
<input type="button" value="(" onclick="kah()"><br>
<button onclick="disp(4)">4</button>
<button onclick="disp(5)">5</button>
<button onclick="disp(6)">6</button>
<input type="button" value="*" onclick="kake()">
<input type="button" value=")" onclick="kao()"><br>
<button onclick="disp(1)">1</button>
<button onclick="disp(2)">2</button>
<button onclick="disp(3)">3</button>
<input type="button" value="-" onclick="hiki()">
<input type="button" value="%" onclick="pa()"><br>
<button onclick="disp(0)">0</button>
<button onclick="zero()">00</button>
<button onclick="ten()">.</button>
<input type="button" value="+" onclick="tasi()">
<input type="button" value="=" onclick="ikl()"><br>
</body>
</html>
CSSのコード
button{
margin: 1.5px 1.5px;
font-size: 7mm;
width: 1.3cm;
height: 1cm;
color:black;
background-color: rgba(222, 184, 135, 0.603);
border-radius: 10px;
border: none;
}
#text01{
width: 10em;
font-size:7mm;
background-color: rgba(162, 204, 218, 0.979);
color: rgba(0, 0, 0, 0.74);
}
#text02{
margin-top: 2mm;
width: 8.5em;
font-size:5.5mm;
background-color: rgba(162,204,218,0.979);
color: rgba(0,0,0,0.74);
margin-right: 9mm;
}
input[type="button"]{
margin: 1.5px 1.5px;
font-size: 7mm;
width: 1.3cm;
height: 1cm;
color: black;
background-color: white;
border-radius: 10px;
border: none;
}
#a{
margin: 0.7px 0.7px;
font-size: 5mm;
width: 1.3cm;
height: 0.7cm;
background-color: rgba(0, 0, 255, 0.658);
}
body{
background-color: whitesmoke;
width: 9cm;
height: 5cm;
}
#c{
background-color: rgba(255, 0, 0, 0.74);
}
#m{
background-color: rgba(0, 0, 255, 0.658)
}
#ki{
margin-left: 1.5mm;
margin-right: 1.5mm;
width: 1cm;
font-size: 5mm;
}
jsのコード
let a = 0;
let hi = 0;
let he = 0;
let obj;
let objt;
let gta = "";
let kir = 0;
function disp(n){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += n;
}else{
obj.value += n;
}
}
function hiki(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "-";
}else{
obj.value += "-";
}
}
function waru(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "/";
}else{
obj.value += "/";
}
}
function kake(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "*";
}else{
obj.value += "*";
}
}
function tasi(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "+";
}else{
obj.value += "+";
}
}
function ikl(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value = eval(objt.value);
}else{
obj.value = eval(obj.value);
}
}
function c(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value = "";
}else{
obj.value = "";
}
}
function ten(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += ".";
}else{
obj.value += ".";
}
}
function kah(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "(";
}else{
obj.value += "(";
}
}
function kao(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += ")";
}else{
obj.value += ")";
}
}
function pa(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "%";
}else{
obj.value += "%";
}
}
function man(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "0000";
}else{
obj.value += "0000";
}
}
function sen(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "000";
}else{
obj.value += "000";
}
}
function ho(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
gta += objt.value + "+";
}else{
gta += obj.value + "+";
}
}
function m(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
gta += objt.value + "-";
}else{
gta += obj.value + "-";
}
}
function mc(){
gta = "";
}
function mr(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += gta;
}else{
obj.value += gta;
}
}
function zero(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
if(kir==1){
objt.value += "00";
}else{
obj.value += "00";
}
}
function ires(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
objt.value += obj.value;
}
function ireu(){
obj = document.getElementById("text01");
objt = document.getElementById("text02");
obj.value += objt.value;
}
function kiri(){
if(kir==0){
kir = 1;
}else{
kir = 0;
}
}
