网页计算机（h5+js+css）

最新推荐文章于 2023-03-31 08:41:03 发布

qq_42916958

最新推荐文章于 2023-03-31 08:41:03 发布

阅读量711

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/qq_42916958/article/details/118345385

版权

今天学了一个网页计算机（h5+js+css）
效果图如下：
极简风格网页计算机
代码如下：
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/计算器.css">
    <script src="./js/计算器.js"></script>
    <title>计算器</title>
</head>
<body onload="init()">
    <div id="counter">
        <div id="text">
            <input type="text" id="textbox">
        </div>
        <div id="button">
            <input type="button" value="C" id="" name="num-button">
            <input type="button" value="←" id="" name="num-button">
            <input type="button" value="%" id="" name="num-button">
            <input type="button" value="/" id="" name="num-button">
            <input type="button" value="1" id="1" name="num-button">
            <input type="button" value="2" id="2" name="num-button">
            <input type="button" value="3" id="3" name="num-button">
            <input type="button" value="*" id="" name="num-button">
            <input type="button" value="4" id="4" name="num-button">
            <input type="button" value="5" id="5" name="num-button">
            <input type="button" value="6" id="6" name="num-button">
            <input type="button" value="-" id="" name="num-button">
            <input type="button" value="7" id="7" name="num-button">
            <input type="button" value="8" id="8" name="num-button">
            <input type="button" value="9" id="9" name="num-button">
            <input type="button" value="+" id="" name="num-button">
            <input type="button" value="D" id="" name="num-button">
            <input type="button" value="0" id="0" name="num-button">
            <input type="button" value="." id="." name="num-button">
            <input type="button" value="=" id="" name="num-button">
        </div>
    </div> 
</body>
</html>

js:

function init() {
   var textbox = document.getElementById("textbox");
   textbox.value = 0;//初始化文本框
   textbox.disabled="disabled";//使得文本框不可选中
   var oButton = document.getElementsByTagName("input");
   var flag ;

   for(var i=0;i<oButton.length;i++){
        var btn_num;

        oButton[i].onclick= function () {
           if(!isNaN(this.value)){          //当不是字符时候====>是数字的时候
                if(isNull(textbox.value)){     //判断是否为0或者长度为0
                    textbox.value = this.value;

                    // 当除数为零且进行除法运算时，
                    if(textbox.value == "0" && flag){
                            alert("除数不能为0！")
                    }

                }else{
                    textbox.value = (textbox.value + this.value)*1;
                }
           }else{
                var operator = this.value;
                flag = false;
                switch(operator){
                    case "+":
                        btn_num = parseInt(textbox.value);
                        textbox.value = 0;
                        fh = "+";//把该运算所需要的符号传过来
                        break;
                    case "-":
                        btn_num = parseInt(textbox.value);
                        textbox.value = 0;
                        fh = "-";
                        break;
                    case "*":
                        btn_num = parseInt(textbox.value);
                        textbox.value = 0;
                        fh = "*";
                        break;
                    case "/":
                        btn_num = parseInt(textbox.value);
                        textbox.value = 0;
                        fh = "/";
                        flag =true;
                        break;
                    case "%":
                        btn_num = parseInt(textbox.value);
                        textbox.value = 0;
                        fh = "%";
                        break;
                    case "←":
                        btn_num = parseInt(textbox.value);
                        textbox.value = back(textbox.value);
                        break;
                    case "C":
                        textbox.value = clear(textbox.value);
                        break;
                    case ".":
                        // 判断小数点是否存在
                        textbox.value = havepoint(textbox.value);
                        break;
                    case "D":
                        alert("D");
                        break;
                    case "=":
                        switch(fh){
                            case "+":
                                textbox.value = btn_num + parseInt(textbox.value);
                                break;
                            case "-":
                                textbox.value = btn_num - parseInt(textbox.value); 
                                break;
                            case "*":
                                textbox.value = (btn_num * parseInt(textbox.value));   
                                break;
                            case "/":
                                textbox.value = (btn_num / parseInt(textbox.value));   
                                break;
                            case "%":
                                textbox.value = (btn_num % parseInt(textbox.value));   
                                break;                              
                        }
                        break;
                }
           }
       }
   }

}

// 是否为0或者无
function isNull(n) {
    if(n == "0" || n.length == 0){
        return true;
    }else{
        return false;
    }
}
function havepoint(n) {
    if (n.indexOf(".")==-1){
        //如果没有小数点==>即在字符串n中查找不到“.”
        n = n + ".";
    }
    return n;
}
// 回退功能
function back(n) {
    if(!isNull(n)){
        n = n.substr(0,n.length-1);
    }else{
        n = 0;
    }
    return n;
}
// 清0操作
function clear(n) {
    n = 0;
    return n;
}

css:

.*{
    margin: 0;
    padding: 0;
}
div{
    width: 320px;
    height: auto;
}
#counter{
    top: 30%;
    left: 40%;
    position:absolute;
}

input[type="button"]{
    width: 75px;
    height: 60px;
    margin-bottom: 5px;
    font-size: 20px;
    background: white;
}

input[type="text"]{
    width: 305px;
    height: 45px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 25px;
    background: white;
    border: 2px solid;
}
#text{
    
}

qq_42916958

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页计算机（h5+js+css）

今天学了一个网页计算机（h5+js+css）效果图如下：代码如下：html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫