js實(shí)現(xiàn)兩點(diǎn)之間畫線的方法
本文實(shí)例講述了js實(shí)現(xiàn)兩點(diǎn)之間畫線的方法。分享給大家供大家參考。具體分析如下:
最近有點(diǎn)無聊,琢磨了很久,想到了一消磨時(shí)間的點(diǎn)子,也就是做js版的連連看。
兩點(diǎn)之間畫線也只是連連看最基本功能的一部分,所以我畫的線也僅是折線,而且還只能向左折,后面將根據(jù)連連看中圖片位置點(diǎn)來確定折線的方向。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>兩點(diǎn)之間畫折線</title> <style type="text/css"> body{ font-size:12px; } </style> </head> <script type="text/javascript"> <!-- var dot=new Array(); document.onmousedown =function(a) { //若div存在,則刪除 if(document.getElementById('line_div')){ var clearDiv=document.getElementById("line_div"); clearDiv.parentNode.removeChild(clearDiv); } //按下時(shí)創(chuàng)建一個(gè)事件 if(!a) a=window.event; //獲取x軸、y軸坐標(biāo) var x=a.clientX; var y=a.clientY; //當(dāng)數(shù)組長(zhǎng)度大于等于4時(shí),清空數(shù)組 if(dot.length>=4) dot.splice(0,4); //將x、y添加到數(shù)組中,數(shù)組中保存了兩組坐標(biāo)值,相當(dāng)于頁面上的A(x1,y1)、B(x2,y2)兩點(diǎn) dot.push(x,y); //當(dāng)數(shù)組長(zhǎng)度為4時(shí),畫線。 if(dot.length==4){ //計(jì)算div的長(zhǎng)和寬 var width=Math.abs(dot[0]-dot[2]); var height=Math.abs(dot[1]-dot[3]); //在頁面上定位div左上角的具體位置 var left=dot[0]-dot[2]<0?dot[0]:dot[2]; var top=dot[1]-dot[3]<0?dot[1]:dot[3]; //創(chuàng)建div var div=document.createElement("div"); div.innerHTML=' <div id="line_div" style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border-left:1px solid #cdcdcd;border-top:1px solid #cdcdcd;"></div>'; document.body.appendChild(div); } } --> </script> <body> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
用Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
腳注(Footnote)是向用戶提供更多信息的一個(gè)最佳途徑,也是主體信息的一個(gè)有效補(bǔ)充,常見于各種印刷書籍中。2009-09-09鼠標(biāo)滾輪控制網(wǎng)頁橫向移動(dòng)實(shí)現(xiàn)思路
設(shè)置window的scrollLeft值,這里一定要是window不能是body否則滾動(dòng)有問題,綁定事件mousewhell 也必須是在body上,感興趣的各位可以了解下哈,希望可以幫助到你2013-03-03在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05JS中數(shù)據(jù)類型的正確判斷方法實(shí)例
怎么去判斷一個(gè)數(shù)據(jù)屬于哪個(gè)數(shù)據(jù)類型,這個(gè)是很常見的操作,我們一般都會(huì)想到typeof和instanceof這兩個(gè)常見的方法,但有時(shí)候這兩種方法并不能滿足我們的需求,下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)據(jù)類型的正確判斷方法,需要的朋友可以參考下2021-08-08BootStrap table實(shí)現(xiàn)表格行拖拽效果
這篇文章主要為大家詳細(xì)介紹了BootStrap table實(shí)現(xiàn)表格行拖拽效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12非常好用的JsonToString 方法 簡(jiǎn)單實(shí)例
這篇文章介紹了非常好用的JsonToString簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-07-07js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08