要求: 点击按钮,随机生成一个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. web前端开发_文件/目录/样式/函数等命名规范

    页面的命名规则 统一用翻译的英文命名(推荐) 统一用拼音命名(拼音的简化也可) 如果文件名过长,企业要提前约定一份缩写的规范,如pro—product 例如: 首页—index 产品列表—prolis ...

  2. C++中vector和堆的常用使用方法&例题:数据流中的中位数

    vector常用函数: (1)a.size();//返回a中元素的个数: (2)a.push_back(5);//在a的最后一个向量后插入一个元素,其值为5 (3)a[i]; //返回a的第i个元素, ...

  3. Windows 用来定位 DLL 的搜索路径

    参考自:https://msdn.microsoft.com/zh-cn/library/253b8k2c.aspx 通过隐式和显式链接,Windows 首先搜索“已知 DLL”,如 Kernel32 ...

  4. Jmeter系列(41)- Jmeter + Ant +Jenkins 持续集成

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html Window 环境准备 安装 ant: ...

  5. redis(二十四):Redis分布式锁以及实现(python)

    阅读目录 什么事分布式锁 基于redis实现分布式锁 一.什么是分布式锁 我们在开发应用的时候,如果需要对某一个共享变量进行多线程同步访问的时候,可以使用我们学到的锁进行处理,并且可以完美的运行,毫无 ...

  6. Django框架02 /Django下载安装、url路由分发

    Django框架02 /Django下载安装.url路由分发 目录 Django框架02 /Django下载安装.url路由分发 1. django下载安装 2. pycharm创建项目 3. 基于D ...

  7. python 面向对象专题(二):类的空间问题、类与对象之间的关系、类与类之间的关系

    https://www.cnblogs.com/liubing8/p/11308127.html 目录 Python面向对象02/类的空间问题.类与对象之间的关系.类与类之间的关系 1. 类的空间问题 ...

  8. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  9. Unity3D Demo项目开发记录

    前言 经过一段时间的学习与实际开发,unity3D也勉强算是强行入门了,正所谓好记性不如烂笔头,更何况本人并非专业从事unity3D开发,会一点C#但也并不熟悉,为了避免后期遗忘,因此特意整理了一个D ...

  10. 高效C++:模板和泛型编程

    模板和泛型编程的关注重点在编译期,所有的行为都在编译期确定,因此其规则和玩法也有自己特殊的一套,和其他模块不通用. 了解隐式接口和编译期多态 元编程------编译器多态,决定哪个重载函数被调用 cl ...