【瞎搞】本当迷计算器

博主：本当迷
发布时间：2022 年 03 月 25 日
978 次浏览
暂无评论
4854字数
分类：前端开发练习项目

## 前言：

这几天在复习前端的知识，大一看过一点，大二就不记得了！于是搞了一个简易版的计算器，复习一下css布局！

![](https://www.bdmcom.cn/usr/uploads/2022/03/2731999148.png)

## html代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本当迷计算器</title>
    <link rel="stylesheet" type="text/css" href="css/index4.css">
    <script src="js/index4.js"></script>
</head>

<body>
<div id="father">
    <div id="top">
        <div>本当迷计算器</div>
    </div>

</table>
        </div>
        <div id="mid_2"></div>
        <div id="compute">
            <table>
                <tr>
                    <td><input type="button" name="(" value="(" onclick="calculate(this)"></td>
                    <td><input type="button" name=")" value=")" onclick="calculate(this)"></td>
                </tr>
                <tr>
                    <td><input type="button" name="C" value="C" onclick="deleteAll()"></td>
                    <td><input type="button" name="退格" value="退格" onclick="deleteNum()"></td>
                </tr>
                <tr>
                    <td><input type="button" name="%" value="%" onclick="calculate(this)"></td>
                    <td><input type="button" name="÷" value="/" onclick="calculate(this)"></td>
                </tr>
                <tr>
                    <td><input type="button" name="×" value="*" onclick="calculate(this)"></td>
                    <td><input type="button" name="-" value="-" onclick="calculate(this)"></td>
                </tr>
                <tr>
                    <td><input type="button" name="+" value="+" onclick="calculate(this)"></td>
                    <td><input type="button" name="=" value="=" onclick="result()"></td>
                </tr>
            </table>
        </div>
        <div class="clear"></div>
    </div>

</div>
        <div id="calculationResults">
            <div>计算结果：</div>
            <label>
                <input id="txtResults" type="text" name="Content" value="">
            </label>
            <div id="headPortrait">
                <img src="https://q1.qlogo.cn/g?b=qq&nk=1474051104&s=640" alt="本当迷" title="本当迷" style="">
            </div>
        </div>
    </div>
</div>
<div>

</div>
</body>
</html>
```

## js代码：

```javascript
function alertLove(){
    alert("本当迷最帅！");
}

window.onload = function (){
    alert("欢迎来到本当迷计算器！");
}

function calculate(object){
    let txtContent = document.getElementById("txtContent");
    txtContent.value += object.value;
}

function result(){

let txtResult = document.getElementById("txtResults");
    let txtContent = document.getElementById("txtContent");
    if(eval(txtContent.value)  === undefined){
        txtResult.value = "您输入的内容为空！";

}else{
        txtResult.value = eval(txtContent.value);
    }

}

function deleteNum(){
    let txtContent = document.getElementById("txtContent");
    txtContent.value = txtContent.value.substring(0, txtContent.value.length-1);
}

function deleteAll(){
    let txtContent = document.getElementById("txtContent");
    txtContent.value = "";
}

```

## css代码：

```css
body{
    background-image: url(../image/preview.jpg);
/*    background-repeat: no-repeat;*/

}

*{
    padding: 0;
    margin:auto;
}
#father{

margin-top: 20px;
    width: 800px;
    height: 600px;

}
#top div{

width:800px;
    height: 100px;
    border: 1px solid red;
    color: honeydew;
    background-color: red;
    text-align: center;
    line-height: 100px;
  
}

/*清除浮动*/
#class{
    clear: both;
}

#mid{
    position: relative;
}

#mid_1{
    width: 595px;
    height: 400px;
    border: 1px solid blue;
    float:left;
    background-color: springgreen;
    text-align: center;
    line-height: 400px;

}
#center table, tr, td{

width: 490px;
    height: 75px;
    border: 2px solid red;
    border-collapse: collapse;

}
#center input{
    width: 162px;
    height: 77px;
    font-size: 18px;
    font-weight: bold;
}
#center{
    position: absolute;
    top: 50px;
    left: 50px;
    text-align: center;
    line-height: 50px;
}

#mid_2{
    margin-left: 595px;
    width: 205px;
    height: 400px;
    border: 1px solid olivedrab;
    background-color: cyan;
    text-align: center;
    line-height: 400px;

}

#compute table tr td{
    width: 83px;
    height: 60px;

border-collapse: collapse;
    font-size: 18px;
    font-weight: bold;
}
#compute{
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    line-height: 50px;
}

#compute input{
    width: 83px;
    height: 68px;
    font-size: 18px;
    font-weight: bold;
}

#bottom{
    width:800px;
    height: 100px;
    border: 1px solid springgreen;
    background-color: lightsalmon;
    position:relative;
   /* text-align: center;
    line-height: 100px;*/
}

#calculateContent{
    float: left;
    width: 420px;
    height: 98px;
    border: 2px solid gray;
}

#calculationResults{
    float: right;
    width: 370px;
    height: 98px;
    border: 2px solid gray;
    position: relative;

}

#calculateContent label input{
    width: 396px;
    height: 57px;
    font-size: 18px;
    font-weight: bold;
}

#calculationResults label input{
    width: 239px;
    height: 55px;
    font-size: 18px;
    font-weight: bold;
}

#headPortrait img {
    width: 58px;
    height: 58px;
    position: absolute;
    top: 20px;
    right: 18px;
    border: aliceblue solid 2px;
    border-radius: 50%;
    transition: all 2.0s;

}

```

最后修改：2022 年 03 月 25 日

如果文章有用，请随意打赏。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

【瞎搞】本当迷计算器

本当迷 • 2022 年 03 月 25 日

## 前言：

这几天在复习前端的知识，大一看过一点，大二就不记得了！于是搞了一个简易版的计算器，复习一下css布局！

![](https://www.bdmcom.cn/usr/uploads/2022/03/2731999148.png)

## html代码：

<body>
<div id="father">
    <div id="top">
        <div>本当迷计算器</div>
    </div>

</div>
</body>
</html>
```

## js代码：

```javascript
function alertLove(){
    alert("本当迷最帅！");
}

window.onload = function (){
    alert("欢迎来到本当迷计算器！");
}

function calculate(object){
    let txtContent = document.getElementById("txtContent");
    txtContent.value += object.value;
}

function result(){

}else{
        txtResult.value = eval(txtContent.value);
    }

}

function deleteNum(){
    let txtContent = document.getElementById("txtContent");
    txtContent.value = txtContent.value.substring(0, txtContent.value.length-1);
}

function deleteAll(){
    let txtContent = document.getElementById("txtContent");
    txtContent.value = "";
}

```

## css代码：

```css
body{
    background-image: url(../image/preview.jpg);
/*    background-repeat: no-repeat;*/

}

*{
    padding: 0;
    margin:auto;
}
#father{

margin-top: 20px;
    width: 800px;
    height: 600px;

}
#top div{

width:800px;
    height: 100px;
    border: 1px solid red;
    color: honeydew;
    background-color: red;
    text-align: center;
    line-height: 100px;
  
}

/*清除浮动*/
#class{
    clear: both;
}

#mid{
    position: relative;
}

#mid_1{
    width: 595px;
    height: 400px;
    border: 1px solid blue;
    float:left;
    background-color: springgreen;
    text-align: center;
    line-height: 400px;

}
#center table, tr, td{

width: 490px;
    height: 75px;
    border: 2px solid red;
    border-collapse: collapse;

#mid_2{
    margin-left: 595px;
    width: 205px;
    height: 400px;
    border: 1px solid olivedrab;
    background-color: cyan;
    text-align: center;
    line-height: 400px;

}

#compute table tr td{
    width: 83px;
    height: 60px;

border-collapse: collapse;
    font-size: 18px;
    font-weight: bold;
}
#compute{
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    line-height: 50px;
}

#compute input{
    width: 83px;
    height: 68px;
    font-size: 18px;
    font-weight: bold;
}

#bottom{
    width:800px;
    height: 100px;
    border: 1px solid springgreen;
    background-color: lightsalmon;
    position:relative;
   /* text-align: center;
    line-height: 100px;*/
}

#calculateContent{
    float: left;
    width: 420px;
    height: 98px;
    border: 2px solid gray;
}

#calculationResults{
    float: right;
    width: 370px;
    height: 98px;
    border: 2px solid gray;
    position: relative;

}

#calculateContent label input{
    width: 396px;
    height: 57px;
    font-size: 18px;
    font-weight: bold;
}

#calculationResults label input{
    width: 239px;
    height: 55px;
    font-size: 18px;
    font-weight: bold;
}

#headPortrait img {
    width: 58px;
    height: 58px;
    position: absolute;
    top: 20px;
    right: 18px;
    border: aliceblue solid 2px;
    border-radius: 50%;
    transition: all 2.0s;

}

```

【瞎搞】本当迷计算器

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【修仙之路】JAVA学习路线

对于异或运算的初步认识与auto用法

【JAVA经典例题】生产者/消费者问题

最近某音挺火的代码实现爱心形状

再见Swagger！拥抱smart-doc无侵入生成接口文档

使用Hutool实现数据库数据excel导入与导出

C语言-结构体

2020年蓝桥c++B组题解

【c/c++】不借助第三变量交换两数-高级语法

【java】如何保证登录状态和退出登录状态？

【瞎搞】本当迷计算器

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【瞎搞】本当迷计算器

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款