使用JavaScript,控制div标签的CsS样式。点击“圆形”按钮,div变为圆形;点击“正方形”按 钮,div变为正方形。事件源: “圆形”按钮和“正方形"”按钮
时间: 2023-10-01 17:04:35 浏览: 46
好的,可以使用以下JavaScript代码实现:
HTML代码:
```
<div id="myDiv">这是一个div</div>
<button onclick="makeCircle()">圆形</button>
<button onclick="makeSquare()">正方形</button>
```
CSS代码:
```
#myDiv {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
}
```
JavaScript代码:
```
function makeCircle() {
var div = document.getElementById("myDiv");
div.style.borderRadius = "50%";
}
function makeSquare() {
var div = document.getElementById("myDiv");
div.style.borderRadius = "0";
}
```
当点击“圆形”按钮时,JavaScript代码会找到id为“myDiv”的div标签,并将其样式的border-radius属性设置为50%,这样div就变为了圆形;当点击“正方形”按钮时,JavaScript代码会将border-radius属性设置为0,这样div就变为了正方形。
相关问题
1点击按钮,div的形状从正方形变成圆形,同时按钮内的文字从“圆形”变成“正方形" 2再次点击按钮,diy的形状从圆形变成正方形,同时按钮内的文字从“正方形”变成“圆形”。 提示:事件驱动程序中需要使用条件语句判断按钮的内容(innerHTML)。如果按钮的内容为“圆形”,执行1; 否则,执行2。
好的,这是一个前端开发的问题,需要使用JavaScript来实现。你可以在按钮的点击事件中使用条件语句判断按钮的内容,然后根据不同情况执行不同的操作。以下是一个实现的示例代码:
HTML代码:
```
<button id="btn">圆形</button>
<div id="shape" class="square"></div>
```
CSS代码:
```
.square {
width: 100px;
height: 100px;
background-color: blue;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
```
JavaScript代码:
```
var btn = document.getElementById("btn");
var shape = document.getElementById("shape");
btn.onclick = function() {
if (btn.innerHTML === "圆形") {
btn.innerHTML = "正方形";
shape.classList.remove("square");
shape.classList.add("circle");
} else {
btn.innerHTML = "圆形";
shape.classList.remove("circle");
shape.classList.add("square");
}
}
```
在上面的代码中,我们首先获取了按钮和形状的DOM元素,然后给按钮添加了一个点击事件。在点击事件中,我们使用了条件语句判断按钮的内容,如果是“圆形”,则将按钮的文本改为“正方形”,同时将形状的样式从“square”改为“circle”;否则,将按钮的文本改为“圆形”,同时将形状的样式从“circle”改为“square”。这样,每次点击按钮,就可以实现形状和按钮文本的切换了。
编写代码,页面加载后div逐步由正方形变化至圆形,然后再逐步由圆形形变化至正方形,重复这个过程。
可以使用CSS3的transition和border-radius属性实现这个效果,同时结合JavaScript设置定时器来实现循环。下面是一个简单的示例代码:
HTML代码:
```
<div id="shape"></div>
```
CSS代码:
```
#shape {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
border-radius: 0%;
}
```
JavaScript代码:
```
var shape = document.getElementById("shape");
var radius = 0;
setInterval(function() {
if (radius < 50) {
shape.style.borderRadius = radius + "%";
shape.style.width = (100 - radius * 2) + "px";
shape.style.height = (100 - radius * 2) + "px";
radius++;
} else {
shape.style.borderRadius = radius + "%";
shape.style.width = (radius * 2 - 100) + "px";
shape.style.height = (radius * 2 - 100) + "px";
radius--;
}
}, 10);
```
解释如下:
1. 在CSS代码中,设置了一个id为shape的div,并对其进行样式设置,其中包括了transition属性和border-radius属性。
2. 在JavaScript代码中,首先获取了id为shape的div元素,并定义了一个变量radius,用于记录当前的圆角半径。
3. 使用setInterval函数来设置定时器,每隔10毫秒执行一次匿名函数。
4. 匿名函数中,使用if语句判断当前是否处于圆形变换到正方形的过程中。如果是,则将圆角半径加1,同时修改div元素的宽度、高度和border-radius属性,以实现逐步变为正方形的效果。如果不是,则将圆角半径减1,同时修改div元素的宽度、高度和border-radius属性,以实现逐步变为圆形的效果。
5. 使用transition属性来使变换效果更加平滑,同时设置了1秒的过渡时间和ease缓动函数。
6. 最后,将整个JavaScript代码放在一个匿名函数中,并在页面加载完成后执行该函数,以确保JavaScript代码能够正确执行。