js案例：1.简单计算器

小姚学前端

已于 2023-08-09 13:00:39 修改

阅读量304

点赞数 2

分类专栏： js案例文章标签： javascript 前端 html

于 2023-08-09 12:18:29 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/132183512

版权

js案例专栏收录该内容

8 篇文章 3 订阅

订阅专栏

一.效果图

二.实现思路

整体思路

1.关键是dom操作

通过 document.getElementById('id') 获取html中的dom元素

每一个html标签都是一个对象，称为dom对象，每一个标签的属性也是一个对象的属性

设置对象属性的值 obj.属性值 = 'aa'; 获取对象属性的值 obj.属性名

每一个html标签都有style标签，因此可以使用js 操作style，’

如果设置stylr属性，则给标签行间添加一个style属性

2.设置点击事件

// 给按钮设置点击事件 cum是按钮，设置点击事件会用到一些函数的内容

cum.onclick = function () {

}

3.数据类型的隐式转换和赋值

//使用隐式转换- ，把获取的数值转化为number类型，不转换默认是string字符串类型，无法进行下一步运算

let v1 = su1.value-0;

let v2 = su2.value-0;

//使用if语句判断选择的运算符号，并把运算结果赋值给相关的输出框

// 获取运算符

let actVal = act.value;

if (actVal == '+') {

su3.value = v1 + v2;

}

三.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <h2>换算</h2>
    <input type="number" name="" id="curry" value="">
    <button id="bth">计算</button>

    <h2>计算器</h2>
    <input type="number" value="" id="su1">
    <select name="" id="act">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">x</option>
        <option value="/">÷</option>
    </select>
    <input type="number" value="" id="su2">
    <button id="eq">=</button>
    <input type="number" value="" id="su3">

</body>
</html>
<script>
    //获取输入人民币的input
     let rmd = document.getElementById('curry');
     //获取点击计算的按钮
     let cum = document.getElementById('bth');
     console.log(rmd.value);
     let v0 = rmd.value - 0;
    //  给按钮设置点击事件
    cum.onclick = function () {
        //从新获取用户输入的值，并且隐式转化为number类型
        let v1 = rmd.value-0;
        //100的张数
        let num1 = parseInt(v1/100);
    //    出去100元剩余的金额 ,456 余数为56，查看余数56中有
    // 多少张50面值
        let yu1 = v1%100;

        // 50的张数
        let num2 = parseInt(yu1/50);

        let yu2 = yu1%50;

        let num3 = parseInt(yu2/20);
        let yu3 = yu2%20;
        let num4 = parseInt(yu3/10);
        let yu4 = yu3%10;
        let num5 = parseInt(yu3/5);
        let yu5 = yu4%5;
        

        alert(num1 +'张100元'+num2+'张50元'+ num3+'张20元'+ num4+'张10元'+ num5+'张5元'+ yu5+'张1元');
    }

    // 获取dom元素
    let su1 = document.getElementById('su1');
    let su2 = document.getElementById('su2');
    let su3 = document.getElementById('su3');
    let act = document.getElementById('act');
    let eq = document.getElementById('eq');
     
    // 点击等号
    eq.onclick = function () {
        let v1 = su1.value-0;
        let v2 = su2.value-0;
        // 获取运算符
        let actVal = act.value;
        if (actVal == '+') {
            su3.value = v1 + v2;
        }
        if (actVal == '-') {
            su3.value = v1 - v2;
        }
        if (actVal == '*') {
            su3.value = v1 * v2;
        }
        if (actVal == '/') {
            su3.value = v1 / v2;
        }
    };

</script>