怎么用js动态改变圆的半径
<style type="text/css">
.circle {
background: #FF3300;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:60px;
position: absolute;
margin-left:50px;
left: 242px;
top: 188px;
}
.circle1 {
background: #306;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:45px;
position: absolute;
left: 135px;
top: 136px;
}
.circle2 {
background: #C33;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:50px;
position: absolute;
left: 400px;
top: 135px;
}
.circle3 {
background: #0F0;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:42px;
position: absolute;
left: 232px;
top: 75px;
}
.circle4 {
background: #36F;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:63px;
position: absolute;
left: 201px;
top: 247px;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="circle3"></div>
<div class="circle1"></div>
<div class="circle4"></div>
<div class="circle2"></div>
</body>
</html>
圆已经生成了
[解决办法]
<style type="text/css">.circle {background: #FF3300;border-radius: 78.5px 78.5px 78.5px 78.5px;padding:60px;position: absolute;margin-left:50px;left: 242px;top: 188px;}.circle1 {background: #306;border-radius: 78.5px 78.5px 78.5px 78.5px;padding:45px;position: absolute;left: 135px;top: 136px;}.circle2 {background: #C33;border-radius: 78.5px 78.5px 78.5px 78.5px;padding:50px;position: absolute;left: 400px;top: 135px;}.circle3 {background: #0F0;padding:42px;position: absolute;left: 232px;top: 75px;}.circle4 {background: #36F;border-radius: 78.5px 78.5px 78.5px 78.5px;padding:63px;position: absolute;left: 201px;top: 247px;}</style></head><body><div class="circle"></div><div class="circle3" id="test"></div><div class="circle1"></div><div class="circle4"></div><div class="circle2"></div><script type="text/javascript"> var obj = document.getElementById('test'); var t = 100; var i = 0; var timer = setInterval(function(){ if( t ){ obj.style.borderRadius = i+'px'; // w3c obj.style.MozBorderRadius = i+'px'; // mozilla t--; i++ //console.log(i) }else{ clearInterval(timer); } }, 30)</script></body></html>