要求: 点击按钮，随机生成一个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");

        }

--

原生JS 实现点击按钮创建元素的更多相关文章

  1. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  2. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  3. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  4. win32 htmlayout点击按钮创建新窗口，以及按钮图片样式

    最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...

  5. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  6. 使用原生js 实现点击消失效果

    JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  7. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  8. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  9. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

随机推荐

  1. 神秘的角落之张东升做了Java老师，悲剧就这样开始了

    故事背景   主人公张东升是某大学某软件学院的一名Java老师,他平时给学生讲课风格古怪呆板,加上他普通话不标准,一口家乡话,每次给学生讲课都分两种情况: 第一种情况:手持课本,把本节要讲的内容按书本 ...

  2. 前段人员必藏的7 个 CSS 好用的属性绝对干货

    学习CSS是构建好看网页的一种方式. 但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性. 毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西. 因此,在这篇文 ...

  3. Azure Web App (一)发布你的Net Core Web 项目

    一,引言 今天我们看一下Azure上的一个服务-----Web 应用,我们都知道云计算的三大模式:Iaas(基础设施即服务),Paas(平台即服务),Saas(软件即服务). Iass,其实就是虚拟主 ...

  4. day03总结

    一. 基本数据类型# 1.整型int# 作用:记录年龄.等级.号码等状态# 定义与使用# age = 999# level = 10# qq = 383838338 # res=age * 1# pr ...

  5. python面试题二:Python 基础题

    1.位和字节的关系? Byte 字节 bit 位 1Byte = 8bit 2.b.B.KB.MB.GB 的关系? 1Byte = 8bit KB 1KB=1024B MB 1MB=1024KB GB ...

  6. python数据处理（二）之处理Excel文件

    代码与资料 https://github.com/jackiekazil/data-wrangling 1.安装相关包 2.解析Excel文件 在解析Excel之前应该想办法寻找替代的格式 3.开始解 ...

  7. 安卓移动端line-height垂直居中出现偏移的解决方法

    目前移动端在项目使用的rem,安卓手机上line-height属性,让它的值等于height,结果发现是不居中的. 出现此问题的原因是Android在排版计算的时候参考了primyfont字体的相关属 ...

  8. Quartz.Net系列（十六）：通过Plugins模式使用Xml方式配置Job和Trigger和自定义LogPrivider

    1.简单介绍 Quarz.Net中采用插件式来实现配置文件配置,通过XMLSchedulingDataProcessor类进行Xml数据处理 默认配置文件命名:quart_jobs.xml publi ...

  9. 从JIT到类加载再到实现原理解式Lambda编译慢的问题

    问题回顾 描述的话不多说,直接上图: 看到输出结果了吗?为什么第一次和第二次的时间相差如此之多?咱们一起琢磨琢磨,也可以先去看看结论再回过头看分析 注:并非仅第二次快,而是除了第一次,之后的每一次都很 ...

  10. 我一天的工作，同事一个小时就做完了？python的应用

    " ONE "   众所周知,现在很多行业,都离不开用Excel: 做财务的,要用Excel做报表: 做物流的,会用Excel来跟踪订单情况: 做HR的,会用Excel算工资: 做 ...