web前端开发，遇到困难了

把这个项目的基本风格不变，要求运行结果和正常计算机一样上面是运算过程，下面是结果，然后点击等号后，只有输出结果。并写上CSS和js代码及注释。PS：风格不变欧，基本布局不变

img

img

img

这是基础代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的计算器</title>
        <link rel="stylesheet" type="text/css" href="css/calCss.css" />
        <script type="text/javascript" src="js/calJs.js"></script>
    </head>
    <body>
        <div id="calculator">
            <div class="LOGO">@我的计算器</div>
            <!--screen输入栏-->
            <div class="screen">
                <input type="text" id="screenName" name="screenName" value="">
            </div>
            <div id="keys">
                <!--第一排-->
                <div class="btnBlock">
                    <input type="button" id="7" onclick="jsq(this.id)" value="7" class="btnShort">
                    <input type="button" id="8" onclick="jsq(this.id)" value="8" class="btnShort">
                    <input type="button" id="9" onclick="jsq(this.id)" value="9" class="btnShort">
                    <input type="button" id="Back" onclick="tuiGe()" value="Back" class="btnLong"
                        style="background-color:#ff4757;">
                    <input type="button" id="C" onclick="clearNum()" value="C" class="btnLong"
                        style="background-color:#ff4757;">
                </div>
                <!--第二排-->
                <div class="btnBlock">
                    <input type="button" id="4" onclick="jsq(this.id)" value="4" class="btnShort">
                    <input type="button" id="5" onclick="jsq(this.id)" value="5" class="btnShort">
                    <input type="button" id="6" onclick="jsq(this.id)" value="6" class="btnShort">
                    <input type="button" id="*" onclick="jsq(this.id)" value="X" class="btnLong">
                    <input type="button" id="/" onclick="jsq(this.id)" value="/" class="btnLong">
                </div>
                <!--第三排-->
                <div class="btnBlock">
                    <input type="button" id="1" onclick="jsq(this.id)" value="1" class="btnShort">
                    <input type="button" id="2" onclick="jsq(this.id)" value="2" class="btnShort">
                    <input type="button" id="3" onclick="jsq(this.id)" value="3" class="btnShort">
                    <input type="button" id="+" onclick="jsq(this.id)" value="+" class="btnLong">
                    <input type="button" id="-" onclick="jsq(this.id)" value="-" class="btnLong">
                </div>
                <!--第四排-->
                <div class="btnBlock">
                    <input type="button" id="0" onclick="jsq(this.id)" value="0" class="btnShort">
                    <input type="button" id="00" onclick="jsq(this.id)" value="00" class="btnShort">
                    <input type="button" id="." onclick="jsq(this.id)" value="." class="btnShort">
                    <input type="button" id="%" onclick="jsq(this.id)" value="%" class="btnLong">
                    <input type="button" id="eva" onclick="eva()" value="=" class="btnLong"
                        style="background-color:#1e90ff;">
                </div>
            </div>
        </div>
    </body>

</html>



* {
    margin: 0;
    padding: 0;
    font: 14px;
}
#calculator{
    display: block;
    margin: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    background-color: #ff6b81;
    border-radius: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.LOGO{
    font-size: 15pt;
    font-weight: bold;
    color: #ffffff;
    margin: 5px 0px;
}
.screen{
    display: block;
    /* 配合行高和高度值，子元素的inline-block才能实现高度的方向的居中*/
    line-height: 50px;
    height: 50px;
    /* 子元素块是 inline-block，所有用这个来水平居中*/
    text-align: center;
    /* 为了子物体的字体在各个浏览器中的兼容，父级中要先设为0 */
    font-size: 0;
    background-color: #57606f;
    border-radius: 6px;
    border:2px solid #a4b0be ;
    margin-top: 10px;
    margin-bottom: 20px;
}
.screen input{
    display: inline-block;
    /* 宽度根据父级确定 */
    width: 98%;
    height: 98%;
    /* 高度方向居中 */
    vertical-align: middle;
    font-size: 18pt;
    /* input的子元素是文字行inline，所以用这个来实现文字右对齐 */
    text-align: right;
    /* 背景透明 */
    background-color: rgba(255, 255, 255, 0);
    /* 去掉输入框原本的外框 */
    border:0;
    color: #ffffff;
}
#keys{
    display: block;
    margin: auto;
    width: 400px;
    padding: 0px 0px;
    border: 3px solid #ffffff;
    border-radius: 15px;
    background-color: rgba(212, 212, 212, 0.5) ;
}
#keys .btnBlock{
    display: block;
    /* 配合行高和高度值，子元素的inline-block才能实现高度的方向的居中*/
    margin: auto;
    width: 100%;
    line-height: 50px;
    height: 50px;
    /* 子元素块是 inline-block，所有用这个来水平居中*/
    text-align: center;
    /* 为了子物体的字体在各个浏览器中的兼容，父级中要先设为0 */
    font-size: 0;
}
#keys .btnBlock .btnShort{
    display: inline-block;
    margin: 3px 3px;
    width: 17%;
    height: 90%;
    font-size: 25px;
    font-weight: bold;
    background-color: #57606f;
    border: 2px solid #f1f2f6;
    border-radius: 8px;
    color: #ffffff;
}
#keys .btnBlock .btnLong{
    display: inline-block;
    margin: 3px 3px;
    width: 20%;
    height: 90%;
    font-size: 25px;
    font-weight: bold;
    background-color: #7bed9f;
    border: 2px solid #f1f2f6;
    border-radius: 8px;
    color: #ffffff;
}

.bg {
    background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1692853102,1420366288&fm=27&gp=0.jpg") no-repeat;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    text-align: center;
  }
 
  article {
    width: 80%;
    margin: 0 auto;
    margin-top: 5px;
  }
 
  #home {
    /* background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=288008406,2182903897&fm=26&gp=0.jpg") no-repeat; */
    background-color: cadetblue;
    height: 1600px;
    overflow: hidden;
    background-size: cover;
  }
 
  #navbar :hover {
    background-color: rgb(90, 80, 80);
    box-shadow: 2px, 2px, 2px, #000;
    border-radius: 0.5em;
  }


const num = 0; // 定义第一个输入的数据

function jsq(num) {
    // 获取当前输入
    if (num == '%') {
        // Math.round是JS内置的MATH对象中的方法，用于四舍五入取整数
        document.getElementById('screenName').value = Math.round(document.getElementById('screenName').value) / 100;
    } else {
        document.getElementById('screenName').value += document.getElementById(num).id;
    }
}

function eva() {
    // 计算输入结果
    document.getElementById('screenName').value = eval(document.getElementById('screenName').value);
    boolEva = true;
}

function clearNum() {
    // 清
    document.getElementById('screenName').value = null;
    document.getElementById('screenName').focus();
}

function tuiGe() {
    // 退格
    const arr = document.getElementById('screenName');
    arr.value = arr.value.substring(0, arr.value.length - 1);
}



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的计算器</title>
    <link rel="stylesheet" type="text/css" href="css/calCss.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 14px;
        }

        #calculator {
            display: block;
            margin: 10px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px;
            background-color: #ff6b81;
            border-radius: 10px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .LOGO {
            font-size: 15pt;
            font-weight: bold;
            color: #ffffff;
            margin: 5px 0px;
        }

        .screen {
            display: block;
            /* 配合行高和高度值，子元素的inline-block才能实现高度的方向的居中*/
            line-height: 50px;
            height: 50px;
            /* 子元素块是 inline-block，所有用这个来水平居中*/
            text-align: center;
            /* 为了子物体的字体在各个浏览器中的兼容，父级中要先设为0 */
            font-size: 0;
            background-color: #57606f;
            border-radius: 6px;
            border: 2px solid #a4b0be;
            margin-top: 10px;
            margin-bottom: 20px;
            padding-top: 30px; /*上面空30px放表达式*/
            position: relative /*相对定位，以便表达式容器定位*/
        }

            .screen #exp { /*显示表达式容器*/
                position: absolute; /*绝对定位*/
                right: 5px; /*距离.screen容器右边界距离*/
                top: 0;
                font-size: 11pt;
                color: #fff;
            }

            .screen input {
                display: inline-block;
                /* 宽度根据父级确定 */
                width: 98%;
                height: 98%;
                /* 高度方向居中 */
                vertical-align: middle;
                font-size: 18pt;
                /* input的子元素是文字行inline，所以用这个来实现文字右对齐 */
                text-align: right;
                /* 背景透明 */
                background-color: rgba(255, 255, 255, 0);
                /* 去掉输入框原本的外框 */
                border: 0;
                color: #ffffff;
                outline: none; /*获取焦点时去掉默认的高亮边框*/
            }

        #keys {
            display: block;
            margin: auto;
            width: 400px;
            padding: 0px 0px;
            border: 3px solid #ffffff;
            border-radius: 15px;
            background-color: rgba(212, 212, 212, 0.5);
        }

            #keys .btnBlock {
                display: block;
                /* 配合行高和高度值，子元素的inline-block才能实现高度的方向的居中*/
                margin: auto;
                width: 100%;
                line-height: 50px;
                height: 50px;
                /* 子元素块是 inline-block，所有用这个来水平居中*/
                text-align: center;
                /* 为了子物体的字体在各个浏览器中的兼容，父级中要先设为0 */
                font-size: 0;
            }

                #keys .btnBlock .btnShort {
                    display: inline-block;
                    margin: 3px 3px;
                    width: 17%;
                    height: 90%;
                    font-size: 25px;
                    font-weight: bold;
                    background-color: #57606f;
                    border: 2px solid #f1f2f6;
                    border-radius: 8px;
                    color: #ffffff;
                }

                #keys .btnBlock .btnLong {
                    display: inline-block;
                    margin: 3px 3px;
                    width: 20%;
                    height: 90%;
                    font-size: 25px;
                    font-weight: bold;
                    background-color: #7bed9f;
                    border: 2px solid #f1f2f6;
                    border-radius: 8px;
                    color: #ffffff;
                }

        .bg {
            background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1692853102,1420366288&fm=27&gp=0.jpg") no-repeat;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-size: cover;
            text-align: center;
        }

        article {
            width: 80%;
            margin: 0 auto;
            margin-top: 5px;
        }

        #home {
            /* background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=288008406,2182903897&fm=26&gp=0.jpg") no-repeat; */
            background-color: cadetblue;
            height: 1600px;
            overflow: hidden;
            background-size: cover;
        }

        #navbar :hover {
            background-color: rgb(90, 80, 80);
            box-shadow: 2px, 2px, 2px, #000;
            border-radius: 0.5em;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <div class="LOGO">@我的计算器</div>
        <!--screen输入栏-->
        <div class="screen">
            <div id="exp"></div>
            <input type="text" id="screenName" name="screenName" value="" readonly>
        </div>
        <div id="keys">
            <!--第一排-->
            <div class="btnBlock">
                <input type="button" id="7" onclick="jsq(this.id)" value="7" class="btnShort">
                <input type="button" id="8" onclick="jsq(this.id)" value="8" class="btnShort">
                <input type="button" id="9" onclick="jsq(this.id)" value="9" class="btnShort">
                <input type="button" id="Back" onclick="tuiGe()" value="Back" class="btnLong"
                       style="background-color:#ff4757;">
                <input type="button" id="C" onclick="clearNum()" value="C" class="btnLong"
                       style="background-color:#ff4757;">
            </div>
            <!--第二排-->
            <div class="btnBlock">
                <input type="button" id="4" onclick="jsq(this.id)" value="4" class="btnShort">
                <input type="button" id="5" onclick="jsq(this.id)" value="5" class="btnShort">
                <input type="button" id="6" onclick="jsq(this.id)" value="6" class="btnShort">
                <input type="button" id="*" onclick="jsq(this.id)" value="X" class="btnLong">
                <input type="button" id="/" onclick="jsq(this.id)" value="/" class="btnLong">
            </div>
            <!--第三排-->
            <div class="btnBlock">
                <input type="button" id="1" onclick="jsq(this.id)" value="1" class="btnShort">
                <input type="button" id="2" onclick="jsq(this.id)" value="2" class="btnShort">
                <input type="button" id="3" onclick="jsq(this.id)" value="3" class="btnShort">
                <input type="button" id="+" onclick="jsq(this.id)" value="+" class="btnLong">
                <input type="button" id="-" onclick="jsq(this.id)" value="-" class="btnLong">
            </div>
            <!--第四排-->
            <div class="btnBlock">
                <input type="button" id="0" onclick="jsq(this.id)" value="0" class="btnShort">
                <input type="button" id="00" onclick="jsq(this.id)" value="00" class="btnShort">
                <input type="button" id="." onclick="jsq(this.id)" value="." class="btnShort">
                <input type="button" id="%" onclick="jsq(this.id)" value="%" class="btnLong">
                <input type="button" id="eva" onclick="eva()" value="=" class="btnLong"
                       style="background-color:#1e90ff;">
            </div>
        </div>
    </div>
    <!--js保存到外部后，script加载要放到dom下面 ，不要放head
        <script type="text/javascript" src="js/calJs.js"></script>
    -->
    <script>
        const num = 0; // 定义第一个输入的数据
        let re = /^(\d+|\.)$/;//是否按下数字
        let screenName = document.getElementById('screenName')
        let exp = document.getElementById('exp')
        function jsq(num) {
            // 获取当前输入
            if (num == '%') {
                // Math.round是JS内置的MATH对象中的方法，用于四舍五入取整数
                screenName.value = Math.round(screenName.value) / 100;
                exp.innerText = '';
            } else {
                let id = document.getElementById(num).id
                if (!re.test(id)) {//按下的是操作符
                    if (screenName.value == '') return;//未输入输入退出
                    exp.innerText = screenName.value+=id//表达式赋值给exp容器
                    screenName.value = '';
                } else screenName.value += id;
            }
        }

        function eva() {
            if (exp.innerText.includes('=')) return;//已经计算过，再按等号退出
            // 计算输入结果
            exp.innerText += screenName.value
            screenName.value = eval(exp.innerText);
            exp.innerText += '='
        }

        function clearNum() {
            // 清
            exp.innerText = '';//清除表达式容器
            screenName.value = null;
            screenName.focus();

        }

        function tuiGe() {
            const v = screenName.value;
            if (v == '') exp.innerText = '';//输入部分为空，清除表达式
            else screenName.value = v.substring(0, v.length-1)
        }

    </script>
</body>

</html>

所以，连基础代码都没有的？

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7480023
  • 除此之外, 这篇博客: 【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）中的 【网页功能】 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 1.用户名：不填写会提示并无法提交

    2.性别选择

    3.密码：（1）密码不能为空，为空会提示并且无法成功提交（2）密码长度不能少于6位，少于六位报错且不能提交（3）根据输入的密码显示对应的强度（4）输入时为星号，且无法输入中文

    4.用户生日选择

    5.手机号 ：有格式验证，如果不符合规范则提示并无法提交

    6.邮箱：不符合基本规范会提示并无法提交

    7.验证码：（1）验证码不能为空，为空会提示并且无法提交（2）可以点击图片或者手动刷新验证码图片（3）验证码填写错误会提示并无法成功提交

    8.协议：（1）不同意协议会提示并无法提交（2）点击查看具体协议

    9.注册：上述所有条件满足后提示注册成功

    10.网站背景+网站图标设置