HTML+CSS+JS制作简单计算器

最新推荐文章于 2022-10-22 22:13:49 发布

tamplo

最新推荐文章于 2022-10-22 22:13:49 发布

阅读量256

点赞数 1

文章标签： js练习

本文链接：https://blog.csdn.net/qq_39203309/article/details/101064917

版权

主要代码：

HTML：

<body>
    <div class="divbox">
        <div class="counter">
            <div class="counter-top">
                <input type="text" class="content-input" readOnly="true" id="frame" value="">
            </div>
            <div class="counter-down">
                <div class="btns">
                    <div class="number">
                        <input type="button" value="1" class="btn-num" id="one">
                        <input type="button" value="2" class="btn-num" id="two">
                        <input type="button" value="3" class="btn-num" id="three">
                        <input type="button" value="4" class="btn-num" id="four">
                        <input type="button" value="5" class="btn-num" id="five">
                        <input type="button" value="6" class="btn-num" id="six">
                        <input type="button" value="7" class="btn-num" id="seven">
                        <input type="button" value="8" class="btn-num" id="eight">
                        <input type="button" value="9" class="btn-num" id="nine">
                        <input type="button" value="0" class="btn-num" id="zero">
                        <input type="button" value="." class="btn-num" id="dot">
                    </div>
                    <input type="button" value="+" class="btn-typeid" id="add">
                    <input type="button" value="-" class="btn-typeid" id="minus">
                    <input type="button" value="*" class="btn-typeid" id="product">
                    <input type="button" value="/" class="btn-typeid" id="divide">
                    <input type="button" value="←" class="btn-typeid" id="back">
                    <input type="button" value="C" class="btn-typeid" id="reset">
                    <input type="button" value="=" class="btn-typeid" id="sum">
                </div>
            </div>
        </div>
    </div>
    <script src="./counter.js"></script>
</body>

CSS：

/* 整体 */
*{
    padding: 0px;
    margin: 0px;
}
.divbox{
    display: flex;
    justify-content: center;
}
.counter{
    background-color: #efefef;
    width: 270px;
    height: 360px;
    border: 2px solid black
}

/* 输入框 */
.content-input{
    width: 250px;
    height: 50px;
    margin: 15px 10px;
    font-size: 25px;
}

/* 键盘盒子弹性布局 */
.counter-down{
    display: flex;
    justify-content: center;
}
.btns{
    display: inline-grid;
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: repeat(5, 50px);
    grid-gap: 1px 1px;
}
.number{
    display: inline-grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(4, 50px);
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 6;
}
.btn-num,.btn-typeid{
    width: 55px;
    height:45px;
    font-size: 25px;
    margin: 5px;
}
#zero{
    width: 110px;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 6;
}
#sum{
    height: 95px;
}

JS：

//设置数据容器
var value1 = '';
var value2 = '';
var sum = '';
var flag = 0;
//获取id函数
function tagID(id) {
    return document.getElementById(id);
}
//console.log('add');
//判断value1是否赋值
function Flag() {
    if (flag == 0) {
        //flag==0 value1赋值
        value1 = this.value;

        //console.log(value1);
    } else {
        value2 = this.value;
    }
    flag++
}

/* 数字键盘 */
//获取对象集合
var nums = document.getElementsByClassName("btn-num");
var btns = document.querySelectorAll(".btn-num");
var num = "";
//遍历对象
for (let i = 0; i < nums.length; i++) {
    //绑定事件
    nums[i].onclick = function () {
        //获取值
        tagID("frame").value += this.value;
        if (flag == 0) {
            value1 += this.value;
        } else {
            value2 += this.value;
        }
    }
}

/* 功能键盘 */
//运算符变量
var char = "''";
// "+"
tagID("add").onclick = function Add() {
    tagID("frame").value += this.value;
    flag++;
    char = "+";
}
// "-"
tagID("minus").onclick = function () {
    tagID("frame").value += this.value;
    char = "-";
    flag++;
}
// "*"
tagID("product").onclick = function () {
    tagID("frame").value += this.value;
    char = "*";
    flag++;
}
// "/"
tagID("divide").onclick = function () {
    tagID("frame").value += this.value;
    char = "/";
    flag++;
}
//退格键
tagID("back").onclick = function () {
        //输入框中字符串操作
        //获取输入框中字符串的长度
        var textLeng = tagID("frame").value.length;
        //获取输入框中的字符串
        var textValue = tagID("frame").value;
        //操作字符串删除最后一个字符
        tagID("frame").value = textValue.substring(0, textLeng - 1)
        //value1 value2 char字符串的判定
        //判断value2是否为空
        if(value2 != ""){
            value2 = value2.substring(0,value2.length-1);
        }
        else{
            value1 = value1.substring(0,value1.length-1);
        }   
}

//清零键
tagID("reset").onclick = function () {
    tagID("frame").value = '';
    value1 = '';
    value2 = '';
    flag = 0;
}
//求值
tagID("sum").onclick = function () {
    //value值为number
    value1 = parseFloat(value1);
    value2 = parseFloat(value2);
    //运算符
    sum = eval(value1 + char + value2);
    sum = parseFloat(sum);
    //初始化
    flag = 0;
    value1 = sum;
    value2 = '';
    //输入框显示值
    if (sum == Infinity) {
        tagID("frame").value = '除数不能为0';
    } else {
        tagID("frame").value = sum;
    }
}

效果图：

tamplo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS制作简单计算器

主要代码：HTML：<body> <div class="divbox"> <div class="counter"> <div class="counter-top"> <input type="text" class="content-input" read...
复制链接

扫一扫