划重点！！！

（兄弟们只需要建一个test的html文件、file的CSS文件和test1的js文件，将对应的代码粘贴进去可以运行啦~）

一、效果截图：

 功能：

1、实现简单的四则运算。                        2、包含正负号操作。

3、M按钮实现跳转到一个网页。              4、可以使用小数运算。

二、代码实现：

1、HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link rel="stylesheet" type="text/css" href="file.css">
    <script type="text/javascript" src="test1.js"></script>
</head>
<body onload="init()">
    <div class="div1">
        <div class="div2">
            <input type="text" id="Text1" class="text1" >
        </div>

        <div class="div3">
            <input type="button" value="C" class="">
            <input type="button" value="<-" class="">
            <input type="button" value="+/-" class="">
            <input type="button" value="/" class="">
            <input type="button" value="1" class="">

            <input type="button" value="2" class="">
            <input type="button" value="3" class="">
            <input type="button" value="*" class="">
            <input type="button" value="4" class="">
            <input type="button" value="5" class="">

            <input type="button" value="6" class="">
            <input type="button" value="-" class="">
            <input type="button" value="7" class="">
            <input type="button" value="8" class="">
            <input type="button" value="9" class="">

            <input type="button" value="+" class="">
            <input type="button" value="0" class="">
            <input type="button" value="." class="">
            <input type="button" value="=" class="">
            <input type="button" value="m" id="baidu">
        </div>
    </div>
</body>
</html>

2、CSS样式：

.div1{
    width: 180px;
    height: 200px;
    top: 100px;
    left: 100px;
    position: absolute;
    background: url("../img/img_1.png");
}
.div2{
    width: 140px;
    position: relative;
    left: 15px;
    top: 42px;
}
.text1{
    width: 140px;
    text-align: right;/*将文本框内的文字右对齐*/
    background-color: white;/*默认的不可选中版的文本框是灰色的，这是要将其设置为白色*/
}
.div3{
    width: 160px;
    height: 116px;
    position: relative;
    left: 15px;
    top: 50px;
}
/*属性选择器：将所有该类型的标签都选中一起设置*/
input[type="button"]{
    width: 30px;
    margin-right: 5px;
    border-radius: 10px;
    background: goldenrod;
}
/*使用伪类选择器改变悬浮时的颜色变化*/
input[type="button"]:hover{
    /*让颜色变化的是background-color，而不是单纯的color*/
    background-color: cornflowerblue;
    border: 2px solid;
}

3、JavaScript部分：

/*将初始化的内容放在js中，将样式的内容
放在css中，html中只写class、value等基本html内容*/
function init(){
   initLabel();
   fun();
   Link();
}
/*将文本框内容进行初始化*/
function initLabel(){
    let value=document.getElementById("Text1");
    value.value=0;
    value.disabled="disabled";
}
//按钮添加功能
function fun(){
    let getText=document.getElementById("Text1");
    let nums=document.getElementsByTagName("input");
    let numFirst,symbol;
    for (let i=0;i<nums.length;i++){
        nums[i].onclick=function (){
            //isNaN如果是数字返回false，不是数字返回true
            if (!isNaN(this.value)){
                if (isNull(getText.value))
                    getText.value=this.value;
                else
                    getText.value=getText.value+this.value;
            }
            else{/*非数字执行的操作*/
                let button_info=this.value;
                switch (button_info){
                    case "C":
                        getText.value=0;
                        break;
                    case "<-":
                        getText.value=myBack(getText.value);
                        break;
                    case "+/-":
                        //单击一次就变为符号，再单机一次就变为正号
                        getText.value=mySign(getText.value);
                        break;
                    case "/":
                        numFirst=getText.value*1;
                        getText.value=0;
                        symbol="/"
                        break;
                    case ".":
                        //小数点只能点击一次
                        getText.value=point_fun(getText.value);
                        break;
                    case "*":
                        numFirst=getText.value*1;
                        getText.value=0;
                        symbol="*"
                        break;
                    case "-":
                        numFirst=getText.value*1;
                        getText.value=0;
                        symbol="-"
                        break;
                    case "+":
                        /*清除文本框默认前面的0,并获取里面的值供计算使用*/
                        numFirst=getText.value*1;
                        getText.value=0;
                        symbol="+"
                        break;
                    case "=":
                        switch (symbol){
                            //下面不能用parseInt()将字符串转化为数字，因为如果有小数就会将小数自动转化为整数
                                //将字符串转化为数字方法：
                                //1、值*1实现
                                //2、parseInt（）实现
                                //3、Number（）实现
                            case "+":
                                getText.value=numFirst+Number(getText.value);
                                break;
                            case "-":
                                getText.value=numFirst-Number(getText.value);
                                break;
                            case "*":
                                getText.value=numFirst*Number(getText.value);
                                break;
                            case "/":
                                if (!isNull(getText.value))
                                    getText.value=numFirst/Number(getText.value);
                                else{
                                    getText.value=0;
                                    numFirst=0;
                                    alert("除数不能为0或空哦~")
                                }
                                break;
                        }
                    break;
                }
            }
        }
    }
}
//实现正负号功能
function mySign(n){
 /*   if (n.charAt(0)!='-')
        n="-"+n;
    else
        n=n.substr(1,n.length);
    return n;*/
    return Number(n)*(-1);
}
//实现退位键功能
function myBack(n){
    n=n.substr(0,n.length-1);
    if (isNull(n))
        n=0;
    return n;
}
//实现小数点功能
function point_fun(n){
    //indexOf()表示这个符号是否存在，存在就返回位置，不存在就返回-1
    if (n.indexOf(".")==-1)
        n=n+".";
    return n;
}
//判断文本框是空或者为0的操作
function isNull(num){
    return (num=="0"||num.length==0)?true:false;
}
//给m按钮添加超链接
function Link(){
    document.getElementById("baidu").onclick=function (){
        window.location.href="http://www.baidu.com";
    }
}

三、知识总结：

一）HTML部分：

1、添加CSS和JavaScript的外部文件方法。 CSS中hrf=“路径”   JavaScript中src=“路径”。

 <link rel="stylesheet" type="text/css" href="file.css">
 <script type="text/javascript" src="test1.js"></script>

2、onLoad事件：将所有JavaScript的初始化常常放在HTML的onLoad中，用一个函数初始化。

<body onload="init()">

二）CSS部分：

1、先将整体容器的布局定好了，再去设置里面内容的布局。

2、要想使用top和left等必须先设置position。通过top和left等属性就可以实现位置的移动。

3、添加背景图片background属性。

background: url("../img/img_1.png");

4、input属性选择器的使用。来将某一个标签的的全部属性值修改。

三）JavaScript部分：

1、给某个按钮添加超链接。获取他的属性，然后.onclick属性，然后用borm添加超链接。

//给m按钮添加超链接
function Link(){
    document.getElementById("baidu").onclick=function (){
        window.location.href="http://www.baidu.com";
    }
}

2、将字符串转化为数字方法：

1、值*1实现

2、parseInt（）实现，在将有小数的转化时，会将小数转化为整数，不进行小数运算。

3、Number（）实现

# javascript # css # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

GaussDB数据库SQL系列-复合查询

avatar 华为云开发者联盟