一、目錄結(jié)構(gòu)
image.png
二、代碼練習(xí)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type = "text/javascript" src="index.js"></script>
<script type = "text/javascript" src="../js/mooc.js"></script>
</head>
<body onload="init(),init_mooc()">
<div id = "div1">
<div id = "div2">
<input type="text" name="num" id="num">
</div>
<div id = "div3">
<input type="button" value = "c" name="" id="">
<input type="button" value = "<-" name="" id="">
<input type="button" value = "+/-" name="" id="">
<input type="button" value = "/" name="" id="">
<input type="button" value = "1" name="" id="n1">
<input type="button" value = "2" name="" id="">
<input type="button" value = "3" name="" id="">
<input type="button" value = "*" name="" id="">
<input type="button" value = "4" name="" id="">
<input type="button" value = "5" name="" id="">
<input type="button" value = "6" name="" id="">
<input type="button" value = "-" name="" id="">
<input type="button" value = "7" name="" id="">
<input type="button" value = "8" name="" id="">
<input type="button" value = "9" name="" id="">
<input type="button" value = "+" name="" id="">
<input type="button" value = "0" name="" id="">
<input type="button" value = "." name="" id="">
<input type="button" value = "=" name="" id="">
<input type="button" value = "m" name="" id="imooc">
</div>
</div>
</body>
</html>
index.css
*{
margin: 0px;
padding: 0px;
}
div{
width: 170px;
}
#div1{
top: 60px;
left:100px;
position: absolute;
}
input[type="button"]{
width: 30px;
margin-right: 4px;
}
input[type="text"]{
width:147px ;
text-align: right;
background-color: #fff;
border:1px solid;
padding-right: 5px;
box-sizing: border-box;
}
input[type="button"]:hover{
background-color: yellow;
border: 1px solid;
}
index.js
function init() {
//顯示器文本框默認(rèn)顯示為0，并且不可手動輸入，只可以鼠標(biāo)點(diǎn)擊
var num = document.getElementById("num");
num.value = 0;
num.disabled = "disabled";
var oButton = document.getElementsByTagName("input");
var btn_num1;
var fh;
for(var i = 0;i < oButton.length;i++){
oButton[i].onclick = function () {
if(isNumber(this.value)){
if(isNull(num.value)){
num.value = this.value
}else{
num.value = num.value + this.value;
}
}else{
// alert("feishuzi");
var btn_num = this.value;
switch (btn_num) {
case "+":
btn_num1 = Number(num.value);
num.value = 0;
fh = "+";
break;
case "-":
btn_num1 = Number(num.value);
num.value = 0;
fh = "-";
break;
case "*":
btn_num1 = Number(num.value);
num.value = 0;
fh = "*";
break;
case "/":
btn_num1 = Number(num.value);
num.value = 0;
fh = "/";
break;
case ".":
num.value = dec_number(num.value);
break;
case "<-":
num.value = back(num.value);
break;
case "c":
num.value = 0;
break;
case "+/-":
num.value = sign(num.value);
break;
case "=":
switch (fh) {
case "+":
num.value = btn_num1 + Number(num.value);
break;
case "-":
num.value = btn_num1 - Number(num.value);
break;
case "*":
num.value = btn_num1 * Number(num.value);
break;
case "/":
if(Number(num.value)==0){
alert("除數(shù)不應(yīng)為0");
num.value = 0;
}else{
num.value = btn_num1 / Number(num.value);
}
break;
}
break;
}
}
}
}
}
/*正負(fù)號*/
function sign(n){
if(n.indexOf("-") == -1){
n = "-" + n;
}else{
n = n.substr(1,n.length);
}
return n
}
/*退位鍵*/
function back(n){
n = n.substr(0,n.length-1);
if(isNull(n)){
n=0;
}
return n
}
/*小數(shù)點(diǎn)*/
function dec_number(n){
if(n.indexOf(".") == -1){
n = n + ".";
}
return n
}
//驗(yàn)證文本框是否為空，或者0
function isNull(n) {
if(n*1 == 0 || n.length == 0){
return true;
}else{
return false;
}
}
function isNumber(n){
// if(!isNaN(n)){
// return ture;//參數(shù)n是數(shù)字
// }else{
// return false;//參數(shù)n不是數(shù)字
// }
// 第二種表達(dá)方式
return !isNaN(n);
}
js/mooc.js
function init_mooc(){
document.getElementById("imooc").onclick = function () {
window.location.href = "http://www.itdecent.cn/u/c84a9d27d8c3";
}
}
