今回はかなりかっこいいデザインの計算機を作ってみました。ボタン式の計算機も作れますが使い方が簡単なポップアップの計算機を作ってみました。誰でも使えるように簡単に作ってみたのでぜひ使ってみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style id="webmakerstyle">
button{
background:linear-gradient(135deg,#00ffea,#ff00ea);
}
button{
border: none;
border-radius:50px;
}
button{
padding: 1.2rem 3.5rem;
font-size:1.5rem;
font-weight: bold;
}
@keyframes value{
0%{
color:red;text-shadow:0 0 10px #00ff7f, 0 0 20px #00ff7f
}
25%{
color:blue;text-shadow:0 0 10px #ff00ea, 0 0 20px #ff00ea
}
50%{
color:green;text-shadow:0 0 10px #ff8c00, 0 0 20px #ff8c00
}
75%{
color:#556b2f;text-shadow:0 0 10px #b22222, 0 0 20px #b22222
}
100%{
color:magenta;text-shadow:0 0 10px indigo, 0 0 20px indigo
}
}
h1{
animation:value 4s infinite linear
}
p{
color:#00ffea
}
body {
background-color: #000000;
background-color: #0f0c29;
}
body {
min-height: 100vh;
background: #0d001a;
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
font-family: 'Segoe UI', system-ui, sans-serif;
color: #e0e0ff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>javascript計算機</title>
</head>
<body>
<h1>
javascript計算機
</h1>
<p>
ボタンを押したら計算を実行できます。
</p>
<button onclick="calc()">
<b>計算を実行</b>
</button>
<script>
function calc(){
let bar=prompt("+,-,×,÷,のどれかを入力")
let hoge=prompt("1数字を入力")
let piyo=prompt("2数字を入力")
if(bar==="+"){
let sum=Number(hoge)+Number(piyo)
alert(sum)}
else if(bar==="-"){
alert(hoge-piyo)
}
else if(bar==="×"){
alert(hoge*piyo)
}
else if(bar==="÷"){
alert(hoge/piyo)
}
else if(bar===""){
alert("cancel")
}
else
alert("error")
}
</script>
</body>
</html>
</body>
</html>