目錄
web學習之js小案例
css部分
* {
border: none;
margin: 0;
padding: 0;
}
.center {
background-color: #fff;
border-radius: 80%;
height: 800px;
margin: auto;
width: 800px;
}
form {
background-color: #5374c5;
box-shadow: 10px 10px #3d4a65;
margin: 40px auto;
padding: 40px 10px 30px 30px;
width: 270px;
}
.btn {
outline: none;
font-size: 20px;
height: 45px;
margin: 5px 0 5px 10px;
width: 45px;
}
.btn:first-child {
margin: 5px 0 5px 10px;
}
#display {
outline: none;
background-color: white;
color: black;
font-size: 20px;
height: 47px;
text-align: right;
width: 165px;
padding-right: 10px;
margin-left: 0px;
}
.btn,
#display,
form {
border-radius: 25px;
}
.number {
background-color: #f1cd00;
box-shadow: 0 5px #76ee05d0;
color: #131312;
}
.number:active {
box-shadow: 0 2px #5f6680;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
.number:hover {
background-color: rgb(114, 119, 139, 0.4);
box-shadow: 0 5px #5f6680;
color: #dededc;
}
.operator {
background-color: #6df811;
box-shadow: 0 5px #0b3cf0;
}
.operator:hover {
background-color: rgba(233, 233, 17, 0.6);
color: #0937f0;
}
.other {
background-color: rgba(240, 10, 201, 0.7);
box-shadow: 0 5px #02f0f0;
}
.other:hover {
background-color: rgba(8, 190, 245, 0.4);
color: #dededc;
}
.button_clear {
margin-left: 10px;
padding: 5px;
outline: none;
border-radius: 25px;
background-color: rgb(248, 247, 247);
color: rgb(0, 10, 10);
font-size: 16px;
font-style: strong;
width: 80px;
height: 28px;
}
.button_clear:active {
background-color: rgb(10, 252, 10);
box-shadow: 0 5px #666;
transform: translateY(2px);
}
.button_back {
margin-left: 58px;
padding: 5px;
outline: none;
border-radius: 25px;
background-color: rgb(250, 245, 243);
color: rgb(0, 0, 0);
font-size: 16px;
font-style: strong;
width: 80px;
height: 28px;
}
.button_back:active {
background-color: rgb(10, 247, 10);
box-shadow: 0 5px #666;
transform: translateY(2px);
}
.off_on {
margin-left: 20px;
padding: 5px;
outline: none;
border-radius: 25px;
background-color: rgb(250, 245, 243);
color: rgb(17, 18, 19);
font-size: 16px;
font-style: strong;
width: 60px;
height: 28px;
}
.off_on:active {
background-color: rgb(7, 252, 39);
box-shadow: 0 5px #666;
transform: translateY(2px);
}
p,
h1 {
font-family: 楷體;
}
js部分:
var power = 1;
// 1 是開機 -1是關機
function off() {//一開始就運行---》 關機
power = -power;
if (power == -1) {
document.getElementById("display").value = "";
} else {
welcome();
}
};
function clearout() {
if (power == -1) {
document.getElementById("display").value = "";
} else {
document.getElementById("display").value = "";
document.getElementById("display").focus();
}
};
function welcome() {
document.getElementById("display").value = "歡迎使用PJ牌";
setTimeout(welcome_end, 1000);
};
function welcome_end() {
document.getElementById("display").value = "";
document.getElementById("display").focus();
};
function get(value) {
if (power == 1) {
document.getElementById("display").value += value;
} else {
document.getElementById("display").value = "";
}
};
function back() {
if (power == 1) {
var now_result = document.getElementById("display");
document.getElementById("display").value = now_result.value.substring(0, now_result.value.length - 1);
} else {
document.getElementById("display").value = "";
}
};
function isInteger(obj){
return typeof obj === 'number' && obj%1 === 0; //是整數,則返回true,否則返回false
}
function calculates() {
if (power == 1) {
var result = 0;
result = document.getElementById("display").value;
var flag = isInteger(eval(result));
if(!flag)
document.getElementById("display").value = eval(result).toFixed(8);
else
document.getElementById("display").value = eval(result);
} else {
document.getElementById("display").value = "";
}
};
html部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
<script src="calculator.js"></script>
</head>
<body link="grey" vlink="grey" alink="grey" Onload="off()">
<div class="center">
<h1>溫馨提示:</h1>
<br>
<p>                Back爲回退一位數字,off電源開關,開機後等待一秒,涉及小數位的均保留8位小數</p>
<form name="calculator">
<p> PJ牌計算器</p>
<br>
<input type="text" id="display" width="300px" value="">
<input type="button" class="off_on" value="OFF" onclick="off();">
<br>
<br><input type="button" class="button_clear" value="Clear" onclick="clearout();">
<input type="button" class="button_back" value="Back" onclick="back();">
<br>
<input type="button" class="btn number" value="1" onclick="get(this.value);">
<input type="button" class="btn number" value="2" onclick="get(this.value);">
<input type="button" class="btn number" value="3" onclick="get(this.value);">
<input type="button" class="btn number" value="4" onclick="get(this.value);">
<br />
<input type="button" class="btn number" value="5" onclick="get(this.value);">
<input type="button" class="btn number" value="6" onclick="get(this.value);">
<input type="button" class="btn number" value="7" onclick="get(this.value);">
<input type="button" class="btn number" value="8" onclick="get(this.value);">
<br />
<input type="button" class="btn number" value="9" onclick="get(this.value);">
<input type="button" class="btn number" value="0" onclick="get(this.value);">
<input type="button" class="btn number" value="." onclick="get(this.value);">
<input type="button" class="btn operator" value="-" onclick="get(this.value);">
<br />
<input type="button" class="btn operator" value="+" onclick="get(this.value);">
<input type="button" class="btn operator" value="*" onclick="get(this.value);">
<input type="button" class="btn operator" value="/" onclick="get(this.value);">
<input type="button" class="btn other" value="=" onclick="calculates();">
</form>
</div>
</body>
</html>