js經典實例大全,js案例100講解

本文目錄一覽：

• 1、js閉包是什麼？
• 2、js下拉菜單，怎樣更簡便的實現？
• 3、js求和小案例 求解
• 4、JavaScript學習筆記之數組基本操作示例
• 5、JavaScript實現計算多邊形質心的方法示例
• 6、JS for循環計算 經典例題 ： 水仙花數

js閉包是什麼？

js閉包是一個擁有許多變量和綁定了這些變量的環境的表達式。

閉包的特點：

1、作為一個函數變量的一個引用，當函數返回時，其處於激活狀態，一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區。

2、js閉包允許使用內部函數，這些內部函數可以訪問它們所在的外部函數中聲明的參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包。

擴展資料：

js閉包實例：

1、函數內部可以直接讀取全局變量

script type=”text/javascript”

var n=100;

function parent(){

alert(n);

}

2、讀取函數內的局部變量

parent();//100

/script

function parent(){

m=50;

}

parent();

alert(m);//50

參考資料來源：百度百科：javascript閉包

js下拉菜單，怎樣更簡便的實現？

你這個效果的下拉菜單，不需要用 JavaScript，只用CSS就能實現。

加上一句

li:hover ul{ display:block;}

就行了。

!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”* {

margin: 0px;

padding: 0px;

}

body {

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

}

#nav {

width: 600px;

height: 40px;

background-color: #eee;

margin: 0 auto;

}

ul {

list-style: none;

}

ul li {

float: left;

line-height: 40px;

text-align: center;

width: 100px;

}

a {

text-decoration: none;

color: #000;

display: block;

}

a:hover {

color: #F00;

background-color: #666;

}

ul li ul li {

float: none;

background-color: #eee;

margin: 2px 0px;

}

ul li ul {

display: none;

}

li:hover ul{ display:block;}

/style

/head

body

div id=”nav”

ul

lia href=”#”首頁/a/li

lia href=”#”課程大廳/a

ul

lia href=”#”JavaScript/a/li

lia href=”#”Html/CSS/a/li

/ul

/li

lia href=”#”學習中心/a

ul

lia href=”#”視頻學習/a/li

lia href=”#”實例練習/a/li

lia href=”#”問與答/a/li

/ul

/li

lia href=”#”經典案例/a/li

lia href=”#”關於我們/a/li

/ul

/div

/body

/html

js求和小案例 求解

!DOCTYPE html

html

head

meta charset=”UTF-8″

title兩數區間求和/title

style type=”text/css”

.resCls{

width: 100%;

height: auto;

border: solid 1px #ddd;

word-break: break-all; /* 允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行 */

word-wrap: break-word; /* 允許英文單詞內斷句換行 */

box-shadow: 4px 6px 8px #ccc;

}

input{

box-shadow: 2px 4px 6px #ccc;

width: 80px;

}

p{

text-shadow: 4px 3px 4px #678;

}

/style

script src=”jquery-1.8.3.min.js”/script

/head

body

p輸入兩個非負整數：/p

input type=”text” id=”tx0″ value=”0″ /

input type=”text” id=”tx1″ value=”130″ /

input type=”button”  value=”   求和    ” onclick=”getSum()”/

brbr

span id=”sum0″/span

div id=”sum”/div

script

$(function(){

//0~9的keyCode: 主鍵區48~57 , keyup/keydown:數字小鍵盤96~105 , keypress:全同

$(“#tx0”).bind(“keypress”,function(e){

if(!(e.keyCode47  e.keyCode58)){

    return false;

}

});

$(“#tx1”).bind(“keypress”,function(e){

if(!(e.keyCode47  e.keyCode58)){

    return false;

}

});

});

function getSum(){

var int0=Number($(“#tx0”).val());

var int1=Number($(“#tx1”).val());

if(isNaN(int0)){ //如果為“非數值”

return;

}

if(isNaN(int1)){

return;

}

var sum=0;

var process=””;

if(int0int1){

for(var i=int0;i=int1;i++){

sum+=i;

process+=i+”+”;

}

}else{

for(var i=int1;i=int0;i++){

sum+=i;

process+=i+”+”;

}

}

process=process.substring(0,process.lastIndexOf(“+”))+” = “;

$(“#sum”).text(process + sum).addClass(“resCls”);

}

/script

/body

/html

JavaScript學習筆記之數組基本操作示例

本文實例講述了JavaScript學習筆記之數組基本操作。分享給大家供大家參考，具體如下：

一、數組定義

1、定義

vara=[1,2,3]

vara=newArray(1,2,3);

2、長度

返回長度

script

vara=[1,2,3,4,5,6];

alert(a.length);

/script

設置長度

script

vara=[1,2,3,4,5,6];

a.length=2;

alert(a);

/script

二、數組連接

script

vara=[1,2,3];

varb=[4,5,6];

alert(a.concat(b));

alert(b.concat(a));

/script

三、數組排序

sort()函數

默認情況是把數組元素按字符串排序

例子

01

script

vararr=[‘float’,’width’,’alpha’,’zoom’,’left’];

arr.sort();

alert(arr);

/script

例子02

vararr=[12,8,99,19,112];

arr.sort();

alert(arr);

例子03

sort()函數的改進

vararr=[12,8,99,19,112];

arr.sort(function(n1,n2){

returnn1-n2;

});

alert(arr);

四、數組連接

1、兩個數組間的連接：contact()

script

vara=[1,2,3];

varb=[4,5,6];

alert(a.concat(b));

alert(b.concat(a));

/script

2、數組元素間的連接：join()

script

vararr=[1,2,3,4];

alert(arr.join(‘–p’));

/script

五、數組元素添加、刪除

1、數組尾部的添加、刪除

尾部添加：push(value)

例子01

script

vara=[1,2,3];

a.push(4);

alert(a);

/script

尾部刪除：pop()

例子02

script

vara=[1,2,3];

a.pop();

alert(a);

/script

2、數組頭部的添加、刪除

頭部添加

unshift(value)

例子01

script

vararr=[1,2,3];

arr.unshift(0)

alert(arr);

/script

頭部刪除:shift()

例子02

script

vararr=[1,2,3];

arr.shift();

alert(arr);

/script

3、數組——splice()

刪除數據

例子01

script

vararr=[1,2,3,4,5,6];

//splice(起點，長度)

arr.splice(2,3);

alert(arr);

/script

插入數據

例子02

script

vararr=[1,2,3,4,5,6];

//插入數據splice（起點，長度，元素）

arr.splice(2,0,’a’,’b’,’c’);

alert(arr);

/script

替換數據

例子02

script

vararr=[1,2,3,4,5,6];

//替換數據

arr.splice(2,2,’a’,’b’);

alert(arr);

/script

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：測試上述代碼運行結果。

更多關於JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript排序算法總結》、《JavaScript查找算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》

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

您可能感興趣的文章:js數組與字符串的相互轉換方法js刪除數組元素、清空數組的簡單方法(必看)js數組循環遍曆數組內所有元素的方法JS

array

數組詳解js數組去重的三種常用方法總結JavaScript從數組中刪除指定值元素的方法JS數組的遍歷方式for循環與for…in向JavaScript的數組中添加元素的方法小結JS刪除數組裡的某個元素方法javascript

數組的定義和數組的長度Js數組的操作push,pop,shift,unshift等方法詳細介紹

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 for循環計算 經典例題 ： 水仙花數

打印出所有的 “水仙花數 “，所謂 “水仙花數 “是指一個三位數，其各位數字立方和等於該數 本身。

例如：153是一個 “水仙花數 “，因為153=1的三次方＋5的三次方＋3的三次方。

首先，他是一個三位數，那麼他的取值範圍就是100~999。

那麼。這個數 個十百位 每一位的數字的取值範圍都有了。百位是1-9。十位個位都是0-9。

其次。每一位數字的立方 的和 要等於它本身。

那麼就有了1 *100 + 5 * 10 +3 = 1 * 1 * 1 + 5 * 5 * 5 + 3 * 3 * 3 = 153。

用三重for循環可以計算出每一個百位數。然後 添加 if “其各位數字立方和等於該數本身”這個條件。就計算出滿足條件的數了。

結果如下