原生JS 实现点击按钮创建元素

时间：2024-01-31 09:28:45

要求: 点击按钮，随机生成一个20px-100px宽度正方形，随机颜色，随机位置，不能出可视区域外

 

思路：（1）创建按钮，为按钮添加事件侦听

　　　　（2）触发事件，创建一个元素

　　　　（3）设置元素样式，包括大小，位置，颜色

 

基础HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>添加</button>
    <script>

    </script>
</body>
</html>

 

JS代码：

        init();
        function init() {
            var bn = document.getElementById("bn");     //通过id获取按钮bn
            bn.addEventListener("click",clickHandler);  //为按钮添加点击事件
        }
        function clickHandler(e) {
            var wid = document.documentElement.clientWidth;   //获取视口宽度
            var hei = document.documentElement.clientHeight;  //获取视口高度
            var div = document.createElement("div");          //创建一个div
             //定义一个局部变量divWidth  存放当前创建的div的大小
            var divWidth = Math.floor(Math.random() * 80 + 20); 
            //设置div的样式,包括 宽  高  定位  背景颜色
            div.style.position = "absolute";
            div.style.width=divWidth+"px";
            div.style.height=divWidth+"px";
            //div的位置应该是当前视口宽高减去创建div的宽高 然后取随机值,才能保证div不会超出视口
            div.style.left = Math.floor(Math.random() * (wid - divWidth))+"px";    
            div.style.top = Math.floor(Math.random() * (hei - divWidth))+"px";
            div.style.backgroundColor =randomColor();
            //将元素添加到body中
            document.body.appendChild(div);
        }
        //定义一个函数,执行返回一个代表颜色的字符串
        function randomColor() {
            return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0");
        }

 

 

效果展示：

 

 

 看完上面的代码，你是不是觉得它看起来有一些 繁杂 也许我们可以将它 “美化” 一下，让代码看起来更漂亮，更加赏心悦目

我们可以将代码中的一些类似的部分摘取出来，用一个函数来完成这些内容，比如为元素添加style 样式

我们可以这么写

        // createNewElement 创建一个元素, 函数内有两个参数第一个参数是要创建的元素类型,第二个参数是样式
        //通过Object.assign()方法将style内的属性添加给创建的元素的style上
        //最后将处理好的元素返回
        function createNewElement(elem,style){
            var elem=document.createElement(elem);
            Object.assign(elem.style,style);
            return elem;
        }

 

 

 

注： Object.assign(target, source_1, ···)

　　  用于将源对象的所有可枚举属性复制到目标对象中。

我们怎么使用这个函数呢

　　 var  elem(用于接收函数return的元素)=createNewElement("div(要创建的元素类型)",{

　　　　　属性:属性值;  //第二个参数为对象,将这个对象传入,并将对象的属性复制到元素的style属性上完成样式的添加.

　　　　　width:"100px",

　　　　　backgroundColor:"green"

　　});

这个函数不仅可以用于这里,还可以用于创建其他元素

 

        init();
        function init() {
            var bn = document.getElementById("bn");     //通过id获取按钮bn
            bn.addEventListener("click",clickHandler);  //为按钮添加点击事件
        }
        function clickHandler(e) {
            var wid = document.documentElement.clientWidth;   //获取视口宽度
            var hei = document.documentElement.clientHeight;  //获取视口高度
            //定义一个变量divWidth  存放当前创建的div的大小
            var divWidth = Math.floor(Math.random() * 80 + 20); 
            var div=createNewElement("div",{
                position : "absolute",
                width:divWidth+"px",
                height:divWidth+"px",
                left: Math.floor(Math.random() * (wid - divWidth))+"px",
                top:Math.floor(Math.random() * (hei - divWidth))+"px",
                backgroundColor:randomColor()
            })
            document.body.appendChild(div);
        }
        // createNewElement 创建一个元素, 函数内有两个参数第一个参数是要创建的元素类型,第二个参数是样式
        //通过Object.assign()方法将style内的属性添加给创建的元素的style上
        //最后将处理好的元素返回
        function createNewElement(elem,style){
            var elem=document.createElement(elem);
            Object.assign(elem.style,style);
            return elem;
        }
        //定义一个函数,执行返回一个代表颜色的字符串
        function randomColor() {
            return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0");
        }

 

 

 

--

 

相关文章