设一个div 在页面加载完成后 改变他的radius值 使div变成圆形 变成圆形后再逐渐变为矩形 重复这一过程 使用js完成
时间: 2024-01-31 19:04:59 浏览: 40
可以通过定时器和CSS样式来实现该效果。首先,需要给该 div 设置默认的圆角样式:
```html
<div id="myDiv" style="border: 1px solid black; width: 100px; height: 100px; border-radius: 50%;"></div>
```
然后,通过 JavaScript 代码来改变该 div 的圆角样式:
```javascript
// 获取 div 元素
var myDiv = document.getElementById("myDiv");
// 设置定时器
var timer = setInterval(function() {
// 获取当前圆角半径
var radius = parseInt(myDiv.style.borderRadius);
// 如果已经是矩形,则改为圆形
if (radius == 0) {
myDiv.style.borderRadius = "50%";
}
// 如果已经是圆形,则改为矩形
else if (radius == 50) {
myDiv.style.borderRadius = "0";
}
// 否则,根据方向增加或减少圆角半径
else {
var direction = radius < 25 ? 1 : -1;
myDiv.style.borderRadius = radius + direction + "%";
}
}, 50);
```
在上述代码中,使用 setInterval() 函数来每隔一段时间执行一次改变圆角样式的操作。首先获取当前圆角半径,如果已经是矩形,则改为圆形;如果已经是圆形,则改为矩形;否则,根据当前圆角半径的大小来决定增加或减少圆角半径,并更新 div 的样式。其中,定时器的时间间隔可以根据需要进行调整。