如何在HTML中使用JavaScript创建圆形,方形或三角形？

概述我是编码的新手,我试图在点击后随机创建三种不同的形状 – 圆形,正方形和三角形.我已经让我的代码随机创建一个圆形或正方形,但三角形总是在方形或圆形元素内,而不是自己.如何制作圆形,方形或三角形而不仅仅是一个内部有三角形的正方形或圆形？ <div id="shape1"></div> CSS样式(我试图将三角形设置为“基础”形状. #shape1 { width: 0; height 我是编码的新手,我试图在点击后随机创建三种不同的形状 – 圆形,正方形和三角形.我已经让我的代码随机创建一个圆形或正方形,但三角形总是在方形或圆形元素内,而不是自己.如何制作圆形,方形或三角形而不仅仅是一个内部有三角形的正方形或圆形？

<div ID="shape1"></div>

CSS样式(我试图将三角形设置为“基础”形状.

#shape1 {    wIDth: 0;    height: 0;    border-left: 100px solID transparent;    border-right: 100px solID transparent;    border-bottom: 200px solID #2f2f2f;    Font-size: 0;    line-height: 0;}

main.Js

setTimeout(function () {        if (Math.random()<=0.3){            document.getElementByID("shape1").style.borderRadius="50%";        }        else if (Math.random()<=0.6){            document.getElementByID("shape1").style.borderRadius="0";        }        else {            document.getElementByID("shape1").style = this.self;        }

任何帮助将不胜感激.最好的编码给你.

解决方法 您可以定义三个不同的CSS类 – 每个形状一个类.请注意,样式表中的类以点“.”开头.并使用class =“…”属性应用于DOM元素.

在CSS文件中定义这四个CSS规则：

#shape1 {    /* common styles for all shapes */}.square {    /* square specific CSS */}.circle {    /* circle specific CSS */}.triangle {    /* triangle specific CSS */}

你现在可以做的只是在元素上设置正确的类：

var shape = document.getElementByID("shape1");if (Math.random()<=0.3){    shape.classname = "square";}else if (Math.random()<=0.6){    shape.classname = "circle";}else {    shape.classname = "triangle";}

我希望这就是你想要做的;).

总结

以上是内存溢出为你收集整理的如何在HTML中使用JavaScript创建圆形,方形或三角形？全部内容，希望文章能够帮你解决如何在HTML中使用JavaScript创建圆形,方形或三角形？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。