JS高级案例：面向对象实现步进器

最新推荐文章于 2024-09-11 15:33:18 发布

Cutterman

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量315

点赞数

分类专栏： JS高级文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_64355119/article/details/130353821

版权

JS高级专栏收录该内容

34 篇文章 0 订阅

订阅专栏

该文章展示了一个HTML和CSS构建的界面，结合JavaScript实现了基于面向对象的步进器功能。步进器包含加减按钮和中心显示数值，可以通过点击按钮增加或减少数值。JavaScript代码定义了Stepper函数，用于创建步进器组件，并提供了`low`和`add`方法来设置步长并处理点击事件，更新数值显示。

摘要由CSDN通过智能技术生成

HTML + CSS

<!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>
    <style>
        .box {
            margin-top: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box1"></div>
    <script src="./案例：面向对象实现步进器.js"></script>
    <script>
        var sp1 = new Stepper(
            // 父元素
            '.box',
            {
                // 左右两个标签的类型
                ele: 'button',
                // 中间标签的类型
                textEle: 'span',
                // 左右两边标签的值
                lowValue: '-',
                addValue: '+',
                // 初始值
                firstValue: 0
            })
        // 参数：步长
        sp1.low(5)
        sp1.add(5)
    </script>
</body>

</html>

function Stepper(ele, stepObj) {
    // 拿到父元素
    var faEle = document.querySelector(ele)
    // 创建三个节点元素
    this.lowBtn = document.createElement(stepObj.ele) || 'button'
    this.addBtn = document.createElement(stepObj.ele) || 'button'
    this.textBtn = document.createElement(stepObj.textEle) || 'span'
    // 文字节点放入节点元素
    this.lowBtn.appendChild(document.createTextNode(stepObj.lowValue))
    this.addBtn.appendChild(document.createTextNode(stepObj.addValue))
    this.textBtn.appendChild(document.createTextNode(stepObj.firstValue))
    // 将节点元素放入页面
    faEle.appendChild(this.lowBtn)
    faEle.appendChild(this.textBtn)
    faEle.appendChild(this.addBtn)
}
Stepper.prototype.low = function (step) {
    // 获取步长
    this.step = step
    this.lowBtn.onclick = () => {
        if (this.textBtn.innerHTML >= this.step) {
            this.textBtn.innerHTML = +this.textBtn.innerHTML - this.step
        }
    }
}
Stepper.prototype.add = function (step) {
    // 获取步长
    this.step = step
    this.addBtn.onclick = () => this.textBtn.innerHTML = +this.textBtn.innerHTML + this.step
}

效果：