计算机代码

山河曦晨

于 2022-09-14 21:25:49 发布

阅读量239

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_53374733/article/details/126860724

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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">
    <title>Document</title>
</head>

<body>
    <input type="text" name="content">
    <select>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="×">×</option>
        <option value="÷">÷</option>
    </select>
    <input type="text" name="content">
    <button>=</button>
    <span>计算的结果是:0</span>
</body>
<script>
    // 1.获取元素
    var inp = document.getElementsByName('content')
    var select = document.getElementsByTagName('select')[0]
    var btn = document.getElementsByTagName('button')[0]
    var span = document.querySelector('span')
    console.log(inp, select, btn, span);
    btn.onclick = function () {
        // console.log(inp[0].value,inp[1].value,select.value);
        // console.log(typeof(select.value));
        // console.log(typeof(inp[0].value));
        // NaN不等于NaN NaN+''==NaN+''
        console.log(Number(inp[0].value)+''==NaN+'');
        // 1.输入的内容不能为空
        if (inp[0].value === "" || inp[1].value === "") {
            alert("输入的内容不能为空哦！")
        } else if (Number(inp[0].value)+''==NaN+''||Number(inp[0].value)+''==NaN+'') {
            // 2.输入的内容必须是数字
            alert("输入的不是数字 计算个锤子啊！")
        } else {
            // 3.正常情况
            // 将表单获取的值转为数字
            var x = inp[0].value * 1
            var y = inp[1].value * 1
            // console.log(x);
            // console.log(y);
            // 判断你选择的运算符
            switch (select.value) {
                case '+':
                    span.innerHTML = '计算的结果是:' + (x + y)
                    break;
                case '-':
                    span.innerHTML = '计算的结果是:' + (x - y)
                    break;
                case '×':
                    span.innerHTML = '计算的结果是:' + (x * y)
                    break;
                case '÷':
                    span.innerHTML = '计算的结果是:' + (x / y)
                    break;
                default:
                    break;
            }
        }
    }
</script>

</html>