一、目录结构
image.png
二、代码练习
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() {
//显示器文本框默认显示为0，并且不可手动输入，只可以鼠标点击
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("除数不应为0");
num.value = 0;
}else{
num.value = btn_num1 / Number(num.value);
}
break;
}
break;
}
}
}
}
}
/*正负号*/
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
}
/*小数点*/
function dec_number(n){
if(n.indexOf(".") == -1){
n = n + ".";
}
return 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;//参数n是数字
// }else{
// return false;//参数n不是数字
// }
// 第二种表达方式
return !isNaN(n);
}
js/mooc.js
function init_mooc(){
document.getElementById("imooc").onclick = function () {
window.location.href = "https://www.jianshu.com/u/c84a9d27d8c3";
}
}
网友评论