利用JavaScript实现随机生成圆形与矩形动态效果

185 浏览量更新于2024-08-28 收藏 32KB PDF 举报

本文主要介绍了如何使用JavaScript实现随机圆与矩形在网页中的动态绘制功能，通过DOM节点操作来达到这个效果。以下详细讲解了实现步骤和关键代码段。首先，我们关注的是HTML结构部分，它包含一个`<body>`元素，其中包含一个背景颜色为浅灰色的`<div id="content" class="box">`用于显示绘制的图形，以及两个按钮`<button id="createCircle">创建随机圆</button>`和`<button id="createRect">创建随机矩形</button>`，用于触发各自的图形生成事件。在CSS样式部分，定义了一些基础的布局和样式规则。`*`选择器设置了全局的margin和padding为0，确保页面整洁。`.box`类设置了`html`、`body`和`.box`元素的宽度和高度为100%，使它们占据整个屏幕。`.circle`和`.rect`类分别表示圆形和矩形的样式，圆使用了50%的边框半径，矩形定位为绝对定位。接下来是JavaScript部分的核心内容，定义了两个类：`Public`和`Circle`。`Public`类是基础类，包含了创建随机圆和矩形所需的一些通用方法，如`randomR()`用于生成指定范围内的随机数，`randomColor()`用于生成随机颜色。`Circle`类继承自`Public`类，额外添加了创建圆形的功能。在`Circle`构造函数中，子类对象会继承父类的属性，并在创建时随机设置圆的位置（x和y坐标）、半径以及颜色。用户可以通过点击按钮调用对应的构造函数实例化对象，然后在`#content`元素上绘制图形。具体实现时，你需要在JavaScript文件中为这两个按钮添加事件监听器，当点击“创建随机圆”按钮时，创建一个新的`Circle`实例并在`#content`中添加圆形；点击“创建随机矩形”按钮时，创建一个矩形实例（可能需要扩展一个名为`Rect`的类或者在`Public`类中添加矩形功能）。这些操作可以通过修改`#content`的CSS样式或直接在其中创建`<div>`元素并设置其形状和样式来完成。总结来说，本文提供了在浏览器中使用JavaScript动态生成随机圆和矩形的基本思路，包括使用DOM操作、事件监听和自定义类来控制图形的生成和样式。这对于理解和实践JavaScript图形操作，特别是在网页交互设计中是非常有用的技能。

js实现随机圆与矩形功能实现随机圆与矩形功能

本文实例为大家分享了js实现随机圆与矩形功能的具体代码，供大家参考，具体内容如下

1、节点操作版

<!DOCTYPE html>

<head>

<title>DOM节点操作版本</title>

</head>

<style>

margin: 0;padding: 0;

}

html,body,.box{

width: 100%;height: 100%;

}

#content{

background: #f5f5f5;

}

.circle{

border-radius: 50%;position: absolute;

}

.rect{

position: absolute;

}

.btn{

position: fixed;top: 0;left: 0;

}

</style>

<body>

<button id="createCircle">创建随机圆</button>

<button id="createRect">创建随机矩形</button>

</div>

</body>

class Public{

constructor(){

this.x = this.randomR(0,1800);

this.y = this.randomR(40,806);

this.color = this.randomColor();

this.r = this.randomR(10,20);

}

randomR(min,max){//指定范围内的随机半径

return parseInt(Math.random() * (max - min) + min);

}

randomColor(){//随机颜色

let rgba = `rgba(${this.randomR(0,255)},${this.randomR(0,255)},${this.randomR(0,255)},1)`;

return rgba;

}

class Circle extends Public{

constructor(){

super();

}

circle(){

const {r,x,y,color} = this;

const contentElem = document.getElementById("content");

let declareElem = document.createElement("div");

declareElem.className = "circle";

declareElem.style.width = `${r * 2}px`;

declareElem.style.height = `${r * 2}px`;

declareElem.style.background = color;

declareElem.style.top = `${y}px`;

declareElem.style.left = `${x}px`;

contentElem.appendChild(declareElem);

}

class Rect extends Public{

constructor(){

super();

}

rect(){

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38579899

粉丝: 2
资源: 979

利用JavaScript实现随机生成圆形与矩形动态效果

js实现固定区域内的不重叠随机圆

javascript HTML5 Canvas实现圆盘抽奖功能

利用JavaScript和Canvas实现点击随机生成图形与清除功能

【JavaScript源代码】javascript实现点击产生随机图形.docx

js实现刮刮乐功能.zip

matter.js实现小球随机从管道掉落模拟的高斯分布图动画效果源码.zip

JavaScript生成随机验证码代码实例

js+canvas实现滑动拼图验证码功能

js+html5实现canvas绘制圆形图案的方法

基于JavaScript伪随机正态分布代码实例

最新资源