js實現實例例子,js基礎案例

本文目錄一覽：

• 1、JavaScript實現計算多邊形質心的方法示例
• 2、JS基於面向對象實現的拖拽庫實例
• 3、js實現可鍵盤控制的簡單抽獎程序
• 4、js Canvas實現的日曆時鐘案例有哪些
• 5、JS基於for語句編寫的九九乘法表示例

JavaScript實現計算多邊形質心的方法示例

本文實例講述了JavaScript實現計算多邊形質心的方法。分享給大家供大家參考，具體如下：

最近要基於百度地圖顯示多邊形的標註，所以就研究了下計算Polygon的質心，代碼如下：

function

Area(p0,p1,p2)

{

var

area

=

0.0

;

area

=

p0.lng

*

p1.lat

+

p1.lng

*

p2.lat

+

p2.lng

*

p0.lat

–

p1.lng

*

p0.lat

–

p2.lng

*

p1.lat

–

p0.lng

*

p2.lat;

return

area

/

2

;

}

//line

249

計算polygon的質心

function

getPolygonAreaCenter(points)

{

var

sum_x

=

0;

var

sum_y

=

0;

var

sum_area

=

0;

var

p1

=

points[1];

debugger;

for

(var

i

=

2;

i

points.length;

i++)

{

p2=points[i];

area

=

Area(points[0],p1,p2)

;

sum_area

+=

area

;

sum_x

+=

(points[0].lng

+

p1.lng

+

p2.lng)

*

area;

sum_y

+=

(points[0].lat

+

p1.lat

+

p2.lat)

*

area;

p1

=

p2

;

}

var

xx

=

sum_x

/

sum_area

/

3;

var

yy

=

sum_y

/

sum_area

/

3;

return

new

BMap.Point(xx,

yy);

}

標註文字的效果如下：

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數學運算用法總結》、《JavaScript數據結構與演算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》及《JavaScript字元與字元串操作技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:js浮點數精確計算(加、減、乘、除)javascript

計算兩個整數的百分比值js中精確計算加法和減法示例根據經緯度計算地球上兩點之間的距離js實現代碼js計算精度問題小結html+js實現簡單的計算器代碼(加減乘除)如何根據百度地圖計算出兩地之間的駕駛距離(兩種語言js和C#)jsvascript圖像處理—(計算機視覺應用)圖像金字塔Javascript計算兩個marker之間的距離(Google

Map

V3)javascript圖像處理—邊緣梯度計算函數

JS基於面向對象實現的拖拽庫實例

本文實例講述了JS基於面向對象實現的拖拽庫。分享給大家供大家參考。具體如下：

這是一個面向對象的JS拖拽庫，可設置水平鎖定、垂直鎖定、鎖定位置、鎖定範圍等，設定這些範圍後，只能在設定的模式下拖動，我覺得這是個挺不錯的拖拽實例。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

!DOCTYPE

html

PUBLIC

“-//W3C//DTD

XHTML

1.0

Transitional//EN”

“”

html

xmlns=””

head

meta

http-equiv=”Content-Type”

content=”text/html;

charset=utf-8″

/

title拖拽庫/title

style

type=”text/css”

div,h2,p{margin:0;padding:0;}

body{font:14px/1.5

arial;}

#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px

solid

#f60;}

#box

.title{height:25px;background:#f60;}

#tool{margin-bottom:10px;}

/style

script

type=”text/javascript”

function

Drag()

{

//初始化

this.initialize.apply(this,

arguments)

}

Drag.prototype

=

{

//初始化

initialize

:

function

(drag,

options)

{

this.drag

=

this.$(drag);

this._x

=

this._y

=

0;

this._moveDrag

=

this.bind(this,

this.moveDrag);

this._stopDrag

=

this.bind(this,

this.stopDrag);

this.setOptions(options);

this.handle

=

this.$(this.options.handle);

this.maxContainer

=

this.$(this.options.maxContainer);

this.maxTop

=

Math.max(this.maxContainer.clientHeight,

this.maxContainer.scrollHeight)

–

this.drag.offsetHeight;

this.maxLeft

=

Math.max(this.maxContainer.clientWidth,

this.maxContainer.scrollWidth)

–

this.drag.offsetWidth;

this.limit

=

this.options.limit;

this.lockX

=

this.options.lockX;

this.lockY

=

this.options.lockY;

this.lock

=

this.options.lock;

this.onStart

=

this.options.onStart;

this.onMove

=

this.options.onMove;

this.onStop

=

this.options.onStop;

this.handle.style.cursor

=

“move”;

this.changeLayout();

this.addHandler(this.handle,

“mousedown”,

this.bind(this,

this.startDrag))

},

changeLayout

:

function

()

{

this.drag.style.top

=

this.drag.offsetTop

+

“px”;

this.drag.style.left

=

this.drag.offsetLeft

+

“px”;

this.drag.style.position

=

“absolute”;

this.drag.style.margin

=

“0”

},

startDrag

:

function

(event)

{

var

event

=

event

||

window.event;

this._x

=

event.clientX

–

this.drag.offsetLeft;

this._y

=

event.clientY

–

this.drag.offsetTop;

this.addHandler(document,

“mousemove”,

this._moveDrag);

this.addHandler(document,

“mouseup”,

this._stopDrag);

event.preventDefault

event.preventDefault();

this.handle.setCapture

this.handle.setCapture();

this.onStart()

},

moveDrag

:

function

(event)

{

var

event

=

event

||

window.event;

var

iTop

=

event.clientY

–

this._y;

var

iLeft

=

event.clientX

–

this._x;

if

(this.lock)

return;

this.limit

(iTop

(iTop

=

0),

iLeft

(iLeft

=

0),

iTop

this.maxTop

(iTop

=

this.maxTop),

iLeft

this.maxLeft

(iLeft

=

this.maxLeft));

this.lockY

||

(this.drag.style.top

=

iTop

+

“px”);

this.lockX

||

(this.drag.style.left

=

iLeft

+

“px”);

event.preventDefault

event.preventDefault();

this.onMove()

},

stopDrag

:

function

()

{

this.removeHandler(document,

“mousemove”,

this._moveDrag);

this.removeHandler(document,

“mouseup”,

this._stopDrag);

this.handle.releaseCapture

this.handle.releaseCapture();

this.onStop()

},

//參數設置

setOptions

:

function

(options)

{

this.options

=

{

handle:

this.drag,

//事件對象

limit:

true,

//鎖定範圍

lock:

false,

//鎖定位置

lockX:

false,

//鎖定水平位置

lockY:

false,

//鎖定垂直位置

maxContainer:

document.documentElement

||

document.body,

//指定限制容器

onStart:

function

()

{},

//開始時回調函數

onMove:

function

()

{},

//拖拽時回調函數

onStop:

function

()

{}

//停止時回調函數

};

for

(var

p

in

options)

this.options[p]

=

options[p]

},

//獲取id

$

:

function

(id)

{

return

typeof

id

===

“string”

?

document.getElementById(id)

:

id

},

//添加綁定事件

addHandler

:

function

(oElement,

sEventType,

fnHandler)

{

return

oElement.addEventListener

?

oElement.addEventListener(sEventType,

fnHandler,

false)

:

oElement.attachEvent(“on”

+

sEventType,

fnHandler)

},

//刪除綁定事件

removeHandler

:

function

(oElement,

sEventType,

fnHandler)

{

return

oElement.removeEventListener

?

oElement.removeEventListener(sEventType,

fnHandler,

false)

:

oElement.detachEvent(“on”

+

sEventType,

fnHandler)

},

//綁定事件到對象

bind

:

function

(object,

fnHandler)

{

return

function

()

{

return

fnHandler.apply(object,

arguments)

}

}

};

//應用

window.onload

=

function

()

{

var

oBox

=

document.getElementById(“box”);

var

oTitle

=

oBox.getElementsByTagName(“h2”)[0];

var

oSpan

=

document.getElementsByTagName(“span”)[0];

var

oDrag

=

new

Drag(oBox,

{handle:oTitle,

limit:false});

var

aInput

=

document.getElementsByTagName(“input”);

//鎖定範圍介面

aInput[0].onclick

=

function

()

{

oDrag.limit

=

!oDrag.limit;

this.value

=

oDrag.limit

?

“取消鎖定範圍”

:

“鎖定範圍”

};

//水平鎖定介面

aInput[1].onclick

=

function

()

{

oDrag.lockX

=

!oDrag.lockX;

this.value

=

oDrag.lockX

?

“取消水平鎖定”

:

“水平鎖定”

};

//垂直鎖定介面

aInput[2].onclick

=

function

()

{

oDrag.lockY

=

!oDrag.lockY;

this.value

=

oDrag.lockY

?

“取消垂直鎖定”

:

“垂直鎖定”

};

//鎖定位置介面

aInput[3].onclick

=

function

()

{

oDrag.lock

=

!oDrag.lock;

this.value

=

oDrag.lock

?

“取消鎖定位置”

:

“鎖定位置”

};

//開始拖拽時方法

oDrag.onStart

=

function

()

{

oSpan.innerHTML

=

“開始拖拽”

};

//開始拖拽時方法

oDrag.onMove

=

function

()

{

oSpan.innerHTML

=

“left:”

+

this.drag.offsetLeft

+

“,

top:”

+

this.drag.offsetTop

};

//開始拖拽時方法

oDrag.onStop

=

function

()

{

oSpan.innerHTML

=

“結束拖拽”

};

};

/script

/head

body

div

id=”tool”

input

type=”button”

value=”鎖定範圍”

/

input

type=”button”

value=”水平鎖定”

/

input

type=”button”

value=”垂直鎖定”

/

input

type=”button”

value=”鎖定位置”

/

/div

p拖放狀態：span未開始/span/p

div

id=”box”

h2

class=”title”/h2

/div

/body

/html

希望本文所述對大家的JavaScript程序設計有所幫助。

js實現可鍵盤控制的簡單抽獎程序

本文實例為大家分享了js抽獎程序的編寫代碼，以及編寫注意事項，感興趣的小夥伴們可以參考一下

代碼：

!DOCTYPE

html

html

lang=”en”

head

meta

charset=”UTF-8″

title簡單抽獎（可用鍵盤）/title

style

*{margin:0;padding:0;}

.box{width:

400px;height:

300px;margin:50px

auto;background:

red}

.title{color:

#fff;font-size:

30px;font-weight:700px;padding:

50px

0;text-align:

center;height:40px;}

.btm{text-align:

center;padding:20px

0;}

.btm

a{display:

inline-block;width:

120px;height:60px;line-height:

60px;background:

#FEF097;margin:0

10px;text-decoration:

none;}

/style

script

var

data=[‘Iphone’,’Ipad’,’筆記本’,’相機’,’謝謝參與’,’充值卡’,’購物券’],

timer=null,//定時器

flag=0;//阻止多次回車

window.onload=function(){

var

play=document.getElementById(‘play’),

stop=document.getElementById(‘stop’);

//

開始抽獎

play.onclick=playFun;

stop.onclick=stopFun;

//

鍵盤事件

document.onkeyup=function(event){

event

=

event

||

window.event;

//

回車鍵的code值：13

if(event.keyCode==13){

if(flag==0){

playFun();

flag=1;

}else{

stopFun();

flag=0;

}

}

}

function

playFun(){

var

title=document.getElementById(‘title’);

var

play=document.getElementById(‘play’);

clearInterval(timer);

timer=setInterval(function(){

var

random=Math.floor(Math.random()*data.length);

title.innerHTML=data[random];

},60);

play.style.background=’#999′;

}

function

stopFun(){

clearInterval(timer);

var

play=document.getElementById(‘play’);

play.style.background=’#FEF097′;

}

}

/script

/head

body

div

class=”box”

div

class=”title”

id=”title”淘家趣抽獎/div

div

class=”btm”

a

href=”javascript:;”

id=”play”開始/a

a

href=”javascript:;”

id=”stop”停止/a

/div

/div

/body

/html

注意點：

1.隨機數，取數組的其中一個；取0-n之間：Math.random()*(n+1)

2.定時器，開始抽獎時要停止前面的一次抽獎，不然會定時器重疊

3.按鍵操作，要判斷是抽獎進行中，還是未開始，所有設置了變數

flag

想要學習更多關於javascript抽獎功能，請參考此專題：javascript實現抽獎功能

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

js Canvas實現的日曆時鐘案例有哪些

一、.獲取上下文對象 

var cxt = document.getElementById(『元素名』).getContect(『2d』); 

IE8或更早的瀏覽器不支持元素。

二、 drawClock() – 實現畫時鐘 

1. clearRect() 清空給定矩形內的指定像素。 

context.clearRect(x,y,width,height);

屬性 |  值

—–|————

x,y | 要清除的矩形左上角點的(x,y)坐標

width,height| 要清除的矩形寬度和高度，單位為像素12345

2.new Date() — 得到系統時間

var sec = now.getSeconds();  var min = now.getMinutes();  var hour = now.getHours();  123

3.畫時鐘的形狀

cxt.beginPath();  cxt.lineWidth = 10;  cxt.strokeStyle = “blue”;  cxt.arc(550, 310, 300, 0, 360, false);  cxt.closePath();  cxt.stroke(); 123456

beginPath()的作用是canvas的繪製方法，都會以上一次beginPath之後的所有路徑為基礎進行繪製。

closepath()是關閉路徑，而不是結束路徑，它會試圖從當前路徑的終點連一條路徑到七、起點，讓整個路徑閉合起來。

cxt.lineWidth() ： 畫筆的寬度

cxt.strokeStyle() : 設置或返回用於筆觸的顏色、漸變或模式。

屬性值：color 指示繪圖筆觸顏色的 CSS 顏色值。默認值是 #000000。

gradient 用於填充繪圖的漸變對象（線性或放射性）

pattern 用於創建 pattern 筆觸的 pattern 對象

stroke ()繪製已定義的路徑

arc() 方法創建弧/曲線（用於創建圓或部分圓）。如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。 

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

參數

描述

x    圓的中心的 x 坐標。  

y    圓的中心的 y 坐標。  

r    圓的半徑。  

sAngle    起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。  

eAngle    結束角，以弧度計。  

counterclockwise    可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。  

4）drawScale — 自定義函數畫刻度

function drawScale(size, width, color, value, startx, starty, endx, endy){  

   for(var i = 0; i size; i++){  

       drawPointer(width, color, value, i, startx, starty, endx, endy);  

   }  }  12345

5. 畫時鐘刻度依託點

function drawPointer(width, color, value, angle, startx, starty, endx, endy){  

   cxt.save();                 //先保存當前畫布  

   cxt.lineWidth = width;      //設置畫筆的寬度  

   cxt.strokeStyle = color;    //設置畫筆的顏色  

   cxt.translate(550, 310);    //重置異次元空間的原點坐標  

   cxt.rotate(value * angle * Math.PI / 180);  //設置旋轉的角度，參數是弧度  

   cxt.beginPath();  

   cxt.moveTo(startx, starty);  

   cxt.lineTo(endx, endy);  

   cxt.closePath();            //先閉合路徑，再畫線  

   cxt.stroke();               //開始畫線  

   cxt.restore();              //將旋轉後的線段返回給畫布  }  12345678910111213

translate() 方法重新映射畫布上的 (0,0) 位置。

–

JS代碼如下：

//獲取上下文文檔對象  var clock = document.getElementById(‘clock’);  

var cxt = clock.getContext(‘2d’);  

//畫指針  function drawPointer(width, color, value, angle, startx, starty, endx, endy){  

   cxt.save();                 //先保存當前畫布  

   cxt.lineWidth = width;      //設置畫筆的寬度  

   cxt.strokeStyle = color;    //設置畫筆的顏色  

   cxt.translate(550, 310);    //重置異次元空間的原點坐標  

   cxt.rotate(value * angle * Math.PI / 180);  //設置旋轉的角度，參數是弧度  

   cxt.beginPath();  

   cxt.moveTo(startx, starty);  

   cxt.lineTo(endx, endy);  

   cxt.closePath();            //先閉合路徑，再畫線  

   cxt.stroke();               //開始畫線  

   cxt.restore();              //將旋轉後的線段返回給畫布  }  

//畫刻度  function drawScale(size, width, color, value, startx, starty, endx, endy){  

   for(var i = 0; i size; i++){  

       drawPointer(width, color, value, i, startx, starty, endx, endy);  

   }  

}  

//為錶盤的中心填充顏色  function drawFill(){  

   cxt.save();  

   cxt.beginPath();  

   cxt.arc(550, 310, 7, 0, 360, false);  

   cxt.closePath();  

   cxt.fillStyle = “red”;  

   cxt.fill();  

   cxt.restore();  

}  

//畫時鐘  function drawClock(){  

   cxt.clearRect(0, 0, 1350, 620);  //清空整個畫布  

   var now = new Date();            //獲取系統時間，取出時,分,秒  

   var sec = now.getSeconds();  

   var min = now.getMinutes();  

   var hour = now.getHours();  

   min += sec / 60;  

   hour += min / 60;  

   if(hour 12) hour -= 12;  

   cxt.beginPath();  

   cxt.lineWidth = 10;  

   cxt.strokeStyle = “blue”;  

   cxt.arc(550, 310, 300, 0, 360, false);  

   cxt.closePath();  

   cxt.stroke();  

   drawScale(12, 7, “pink”, 30, 0, -280, 0, -260);      //畫時刻度  

   drawScale(60, 5, “pink”, 6,  0, -280, 0, -270);      //畫分刻度  

   drawPointer(7, “purple”, hour, 30, 0, 12, 0, -210);  //畫時針  

   drawPointer(5, “yellow”, min, 6, 0, 15, 0, -240);    //畫分針  

   drawPointer(4, “red”, sec, 6, 0, 17, 0, -250);       //畫秒針  

   //細化秒針,為秒針加箭頭  

   drawPointer(3, “red”, sec, 6, -7, -235, 0, -255);  

   drawPointer(3, “red”, sec, 6, 7, -235, 0, -255);  

   drawFill();  

}  

drawClock();  

setInterval(drawClock, 1000);   //setInterval()方法中表示每隔1000ms，就執行drawClock一次  1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

JS基於for語句編寫的九九乘法表示例

本文實例講述了JS基於for語句編寫的九九乘法表。分享給大家供大家參考，具體如下：

js的功能非常強大,那麼現在我們就用js裡面的for循環來輸出一個原汁原味的九九乘法表;

先看運行效果：

核心代碼如下：

script

type=”text/javascript”

document.write(‘table

border=”1″

bgcolor=”#ccc”

width=”80%”

cellpadding=”0″

cellspacing=”0″‘);

for(var

i=1;i=9;i++){

document.write(‘tr’);

for(var

j=1;j=i;j++){

document.write(‘td’+i+’x’+j+’=’+(i*j)+’/td’);

}

document.write(‘/tr’);

}

document.write(‘/table’);

/script

大家可以試著去走一下循環,我們把九九乘法表的兩個乘數設為兩個變數,分別是i和j;

當i=1時滿足for循環的條件,執行循環語句,先輸出一個tr(table標籤裡面的行屬性),然後執行tr裡面的另一個for循環;

令j=1,j=i,此時的i=1,符合循環條件,執行循環語句,輸出1*1=1;j++之後j的值就變成了2;我們再來看j=i,就是2=1是錯誤的,因此終止循環;

我們第一遍循環就輸出了一行,行裡面的內容是1*1=1;那我們在用i++令i=2執行循環,同樣根據上面的來走循環;

知道i走到9再往下走到10不符合條件的時候,終止整個循環,我們就輸出了一個原汁原味的九九乘法表;

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與演算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript排序演算法總結》、《JavaScript遍歷演算法與技巧總結》、《JavaScript查找演算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。