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

如何在HTML中使用JavaScript创建圆形,方形或三角形?,第1张

概述我是编码的新手,我试图在点击后随机创建三种不同的形状 – 圆形,正方形和三角形.我已经让我的代码随机创建一个圆形或正方形,但三角形总是在方形或圆形元素内,而不是自己.如何制作圆形,方形或三角形而不仅仅是一个内部有三角形的正方形或圆形? <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创建圆形,方形或三角形?所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1069914.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存