javaScript：实现简易计算器

最新推荐文章于 2024-08-07 16:55:16 发布

对抗路、余温

最新推荐文章于 2024-08-07 16:55:16 发布

阅读量199

点赞数

分类专栏： JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_24644517/article/details/119954988

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个基本的计算器，包括按钮布局、样式设置、用户输入处理和功能键逻辑。通过实例展示了如何用JavaScript实现加减乘除、正负号、清零和计算结果更新。

摘要由CSDN通过智能技术生成

1.HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="js/imooc.js"></script>
</head>
<body onload="init(),inin_im()">
    <div id="div1">
        <div id="div2">
<!--			<input type="text" value="0" disabled="disabled" name="" id=""/> 在html中设置初始化为0-->
            <input type="text" name="num" id="num"/>
        </div>
        <div id="div3">
            <input type="button" value="c" />
 			<input type="button" value="←" />
 			<input type="button" value="+/-" />
 			<input type="button" value="/" />
 			<input type="button" value="1" />
 			<input type="button" value="2" />
 			<input type="button" value="3" />
 			<input type="button" value="*" />
 			<input type="button" value="4" />
 			<input type="button" value="5" />
 			<input type="button" value="6" />
 			<input type="button" value="-" />
 			<input type="button" value="7" />
 			<input type="button" value="8" />
 			<input type="button" value="9" />
 			<input type="button" value="+" />
 			<input type="button" value="0" />
 			<input type="button" value="." />
 			<input type="button" value="=" />
            <input type="button" value="m" name="" id="im"/>
        </div>
    </div>
</body>
</html>

2.CSS代码如下：

/*所有html的边距*/
*{
  margin: 0px;
  padding: 0px;
}
/*标签选择器*/
div{
    width: 170px;
}
/*id选择器*/
#div1{
    top: 60px;
    left: 100px;
    /*不设置position的话top、left不生效*/
    position: absolute;
}
/*标签选择器+属性，只会在这个属性下生效*/
input[type="button"]{
    width: 30px;
    margin-right: 5px;
}
/*标签选择器+属性，只会在这个属性下生效*/
input[type="text"]{
    width: 148px;
    text-align: right;
    /*输入框白色底*/
    background-color: #ffffff;
    /*边框设置粗细为1px,solid 为实现*/
    border: 1px solid;
    padding-right: 5px;
    box-sizing: border-box;
}
/*
伪类，当鼠标移动到任何一个按钮上时，按钮背景色改为黄色*/
input[type="button"]:hover{
    background-color: yellow;
    border: 1px solid;

}

3.JS代码如下：

function init(){
    var num=document.getElementById("num");
    num.value=0;
    num.disabled="disabled";
    var oBotton=document.getElementsByTagName("input")
    var btn_num1;
    var fh;
    for (var i = 0; i < oBotton.length; i++) {
        oBotton[i].onclick=function () {
             //当函数作为对象的方法被调用时 , this指向该对象。-this.value
            //isNaN-判断是否是数字，如果是数字返回false,否则返回true
            if(isNumber(this.value)){
                //第一种
                //num.value=(num.value+this.value)*1;
                //第二种
                if (isNull(num.value)){
                    num.value=this.value;
                }else {
                    num.value=num.value+this.value;
                }
            }else{
                var btm=this.value;
                switch (btm) {
                    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":
                        name.value=0;
                        break;
                    case "+/-":
                        num.value=sign(num.value)
                        break;
                    case "=":
                        switch (fh){
                            case "+":
                                num.value=Number(num.value)+btn_num1;
                                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;
                        }

                }
            }
        }
    }
}
//正负号
function sign(n){
    // if (n.indexOf("-")==-1){
    //     n="-"+n;
    // }else {
    //     n=n.substr(1,n.length)
    // }
    n=Number(n)*-1;
    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=="0" || n.length==0){
        return true;
    }else {
        return false;
    }
}

//验证传入的字符是否是数字
function isNumber(n){
    // if(!isNaN(n)){
    //     return true; //参数N是数字
    // }else{
    //     return false;//参数N不是数字
    // }
    return !isNaN(n);
}

4.JS代码，点击计算器中的M打开网址

function inin_im(){
    document.getElementById("im").onclick=function (){
        window.location.href="http://www.baidu.com";
    }
}

对抗路、余温

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript：实现简易计算器

1.HTML代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="index
复制链接

扫一扫

专栏目录