欢迎光临
我们一直在努力

JavaScript | 实现随机创建div(宽度和颜色)

题目要求:当点击添加按钮时,给divs添加一个随机20-100px宽度的正方形,颜色也随机

题目HTML代码:

<button id="bn">添加</button>
<div id="divs"></div>

解题思路:

  • 通过添加点击事件,触发匿名函数。
  • 获取id为divs的标签,并存到一个变量内。
  • 通过innerHTML,向divs内添加新的div。
  • 通过lastChild,获取divs的最后一个子元素。
  • 通过random生成随机的宽度与颜色。
  • 修改divs内最后一个子元素的style。

实现代码:

bn.onclick = function() {
var divs = document.getElementById("divs");
divs.innerHTML += "<div><\/div>";
var nowDiv = document.getElementById("divs").lastChild;
randWidth = Math.random() * 80 + 20;
ranColor = function() {
    var c = "#";
    for (i = 0; i < 6; i++) {
    c += parseInt(Math.random() * 16).toString(16);
    }
    return c;
};
nowDiv.style.backgroundColor = ranColor();
nowDiv.style.width = randWidth + "px";
nowDiv.style.height = randWidth + "px";
};
赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 实现随机创建div(宽度和颜色)
分享到: 更多 (0)

评论 抢沙发

4 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏