JavaScript常用BOM对象

最新推荐文章于 2023-04-16 00:10:03 发布

xaiozhu`s code

最新推荐文章于 2023-04-16 00:10:03 发布

阅读量135

点赞数 5

分类专栏： HTML 前端，CSS，HTML 文章标签： javascript css html5 html

本文链接：https://blog.csdn.net/zy12344321/article/details/117742046

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端，CSS，HTML

7 篇文章 0 订阅

订阅专栏

一、JavaScript BOM对象

二、JavaScript Window对象

类似对象很多，可直接使用。

三、JavaScript BOM Document

四、JavaScript Document

五、JavaScript BOM History

计算器代码示例：
HTML页面：

<!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>练习一</title>
    <script src="练习一.js"></script>
</head>

<body>
    <!--第一个输入框输入值-->
    <input type='text' id='value1' />
    <!--下拉选择操作以字符串的形式传入到js的switch中-->
    <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <!--第二个输入框输入值-->
    <input type='text' id='value2' />
    <!--此处为了界面效果所以将属性设置为button，表示等号，并无实际操作-->
    <input type='button' value=' = ' />
    <!--通过 result 按钮来输出结果-->
    <input type='text' id='result' />
    <br>
    <!--通过 equal 按钮来调用创建的函数，得到结果-->
    <input type="button" id="equal" onclick="count()" value="计算" style="margin-left: 200px; margin-top: 20px;" />
</body>

</html>

js页面：

function count() {
    //获取第一个输入框的值
    var x1 = document.getElementById("value1").value;
    //获取第二个输入框的值
    var x2 = document.getElementById("value2").value;
    //获取选择框的值
    var op = document.getElementById("select").value;
    var x3;
    /*
    通过op作为关键词经行选择的操作，parseFloat函数：将字符串转换为浮点数
    获取通过下拉框来选择的值来改变加减乘除的运算法则
    */
    switch (op) {
        case '+':
            x3 = parseFloat(x1) + parseFloat(x2);
            break;
        case '-':
            x3 = parseFloat(x1) - parseFloat(x2);
            break;
        case '*':
            x3 = parseFloat(x1) * parseFloat(x2);
            break;
        default:
            x3 = parseFloat(x1) / parseFloat(x2);
            break;

    }
    //设置结果输入框的值 
    document.getElementById("result").value = x3;

}

效果图：