JavaScript是網頁開發(fā)中不可或缺的一部分，它能夠實現(xiàn)網頁的各種動態(tài)效果，其中最常見的就是DIV劃圓形。要實現(xiàn)這個效果，我們需要用到CSS3的 border-radius 屬性和 JavaScript 的 DOM 操作。接下來，我們就來詳細介紹一下利用 JavaScript 實現(xiàn) DIV 劃圓形的方法和步驟。 首先，我們需要了解一下CSS3的 border-radius 屬性，它能夠讓我們實現(xiàn)圓形或橢圓形的DIV。這個屬性接受一個值，即圓角的度數(shù)。例如，將水平半徑和垂直半徑都設置為DIV寬度的一半，就可以實現(xiàn)一個圓形DIV，代碼如下：

div{
width:200px;
height:200px;
border-radius:50%;
background-color:red;
}

這樣就能夠實現(xiàn)一個紅色的圓形DIV。當我們想要實現(xiàn)多個形狀不一的DIV的時候，就需要用到JavaScript來實現(xiàn)。例如，將一個DIV變成正方形和圓形的切換效果，代碼如下：

var div = document.getElementById("myDiv");
div.onclick = function(){
if(this.style.borderRadius == "50%"){
this.style.borderRadius = "0";
}else{
this.style.borderRadius = "50%";
}
};

這段JavaScript代碼會在DIV被點擊時切換其樣式，從而實現(xiàn)DIV的形狀從圓形到正方形的切換效果。這里的關鍵在于利用了JS代碼控制CSS樣式的能力。 除了切換DIV的形狀，我們還可以通過JavaScript來動態(tài)生成圓形的DIV。例如，生成10個隨機顏色的圓形DIV，代碼如下：

for(var i = 0; i< 10; i++){
var div = document.createElement("div");
div.style.width = "50px";
div.style.height = "50px";
div.style.borderRadius = "50%";
div.style.backgroundColor = randomColor();
document.body.appendChild(div);
}
function randomColor(){
var color = "#";
for(var i = 0; i< 6; i++){
var num = Math.floor(Math.random()*16);
if(num< 10){
color += num;
}else{
color += String.fromCharCode(num+87); 
}
}
return color;
}

這段JavaScript代碼會生成10個寬高均為50px、隨機顏色的圓形DIV，并將它們插入到BODY中。 總結一下，利用 JavaScript 實現(xiàn) DIV 劃圓形的方法包括使用CSS3的 border-radius 屬性和 JavaScript 的 DOM 操作。CSS3的 border-radius 屬性能夠實現(xiàn)圓形或橢圓形的DIV，而利用 JavaScript 的 DOM 操作，我們可以動態(tài)地生成和改變DIV的形狀。通過JavaScript，我們能夠切換DIV的形狀、生成多個形狀不一的DIV，實現(xiàn)各種動態(tài)效果。