我是编码的新手,我试图在点击后随机创建三种不同的形状 – 圆形,正方形和三角形.我已经让我的代码随机创建一个圆形或正方形,但三角形总是在方形或圆形元素内,而不是自己.如何制作圆形,方形或三角形而不仅仅是一个内部有三角形的正方形或圆形?
<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";
}
我希望这就是你想要做的;).