动态编译语言JavaScript之动态生成按钮

_半夏曲

已于 2023-09-14 13:50:07 修改

阅读量429

点赞数

文章标签： javascript 开发语言

于 2023-09-14 11:19:35 首次发布

本文链接：https://blog.csdn.net/qq_46135702/article/details/132872023

版权

案例运行效果：

众所周知，常见的动态解释型语言中JS绝对是一个常青树，

以往我对此一知半解，如今公司的物联网平台中规则引擎引起我的思考：规则引擎中的规则节点可动态的添加和编译。据此定位到一个js文件，再联想到JS是动态解释语言。又通过与前端小同事交流后打开思路，编写了一个动态生成前端按钮（根据输入框的数字，动态生成按钮）的案例：

<div class="container" id="container"></div>
<!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>
    <h1 style="color: brown;">智能按钮生成工厂</h1>
    <input type="number" id="boxCount" min="1" max="100" value="10">
    <button onclick="generateBoxes()">生成</button>
    <div class="container" id="container"></div>
    <script>
        function generateBoxes() {
            // 获取当前输入框中的值
            var count = parseInt(document.getElementById("boxCount").value);
            // 清空容器中已有的盒子
            document.getElementById("container").innerHTML = "";
            // 循环生成指定数量的盒子
            for (var i = 1; i <= count; i++) {
                // 创建div元素
                var div = document.createElement("button");
                // 设置盒子的内容为当前索引值
                div.innerHTML = i;
                // 将盒子插入父元素中
                document.getElementById("container").appendChild(div);
            }
        }
    </script>
</body>
</html>