本文實(shí)例講述了JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域。分享給大家供大家參考，具體如下：

目前成都創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、眉山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

方法一：

通過usemap映射到的circle形。

方法二：

設(shè)置div的border-radius:50%。

#circle{
 background:red;
 width:100px;
 height:100px;
 border-radius:50%;
}

方法三：

JS實(shí)現(xiàn)，獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)，判斷其到圓點(diǎn)的距離是否不大于圓的半徑，來判斷點(diǎn)擊位置是否在圓內(nèi)。

document.onclick = function(e) { 
 var r = 50; 
 var x1 = 100;
 var y1 = 100;
 var x2= e.clientX;
 var y2= e.clientY; 
 var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))); 
 if (distance <= 50)
 alert("Yes!"); 
}

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測試一下運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。