當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實(shí)現(xiàn)通過兩點(diǎn)坐標(biāo)計(jì)算直線距離

JS代碼實(shí)現(xiàn)通過兩點(diǎn)坐標(biāo)計(jì)算直線距離

2012/11/7 11:13:44作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS代碼實(shí)現(xiàn)通過兩點(diǎn)坐標(biāo)計(jì)算直線距離

【實(shí)例描述】

本例一般用于精確畫圖，在實(shí)際中應(yīng)用并不多。主要通過給定的兩個(gè)坐標(biāo)點(diǎn)計(jì)算這兩點(diǎn)之間的距離。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（www.denvermotorcycleaccidentlawyer.com）</title>
<script LANGUAGE="JavaScript">
function distanceCAL(form) 
{
    var x1 = eval(form.x1.value);  
//獲取第一點(diǎn)的X坐標(biāo)
    var y1 = eval(form.y1.value);  
//獲取第一點(diǎn)的Y坐標(biāo)
    var x2 = eval(form.x2.value);  
//獲取第二點(diǎn)的X坐標(biāo)
    var y2 = eval(form.y2.value);  
//獲取第二點(diǎn)的Y坐標(biāo)
    var calX = x2 - x1;        
    var calY = y2 - y1;
    form.result.value = 
Math.pow((calX *calX + calY * calY), 0.5);
}
</script>
</head>
<body >
<form>
<table border=3 cellspacing=2 cellpadding=5>
<tr>
        <td colspan=4 align=center height="18">
            <strong><span style="font-size: 14pt">
兩點(diǎn)的直線距離</span></strong></td>
</tr>
<tr>
        <td colspan=2 align=center>
            <span style="color: #666666">
第一點(diǎn)的坐標(biāo)</span></td>
        <td colspan=2 align=center>
            <span style="color: #999966">
第二點(diǎn)的坐標(biāo)</span></td>
</tr>
<tr>
        <td align=center>X 軸</td>
        <td align=center>Y 軸</td>
        <td align=center>X 軸</td>
        <td align=center>Y 軸</td>
</tr>
<tr>
<td align=center><input type=text 
name=x1 size=5></td>
<td align=center><input type=text 
name=y1 size=5></td>
<td align=center><input type=text 
name=x2 size=5></td>
<td align=center><input type=text 
name=y2 size=5></td>
</tr>
<tr>
<td colspan=4 align=center>
<input type=button value="計(jì)算距離" 
onClick="distanceCAL(this.form)">
<input type=text name=result size=20></td>
</tr>
</table>
</form>
</body>
</html>
 

 
【運(yùn)行效果】

 通過兩點(diǎn)坐標(biāo)計(jì)算直線距離運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是如何計(jì)算兩個(gè)指定坐標(biāo)點(diǎn)之間的距離。獲取坐標(biāo)的值非常容易，使用“form．x1．value”即可。計(jì)算兩個(gè)點(diǎn)之間的距離就得使用“Math.pow”方法實(shí)現(xiàn)，其使用語法是“Math．pow(x，n)”，返回結(jié)果是“x”的“n”次方值。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：通S代碼實(shí)現(xiàn)通過兩點(diǎn)坐標(biāo)計(jì)算直線距離 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS代碼  計(jì)算  直線距離