您的位置:

js经典实例大全,js案例100讲解

js经典实例大全,js案例100讲解

更新:

本文目录一览:

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 “其各位数字立方和等于该数本身”这个条件。就计算出满足条件的数了。

结果如下

js经典实例大全,js案例100讲解

本文目录一览: 1、js闭包是什么? 2、js下拉菜单,怎样更简便的实现? 3、js求和小案例 求解 4、JavaScript学习笔记之数组基本操作示例 5、JavaScript实现计算多边形质心的方

2023-12-08
js经典实例收集,js基础案例

本文目录一览: 1、js控制页面滚动(实例) 2、JS隐藏号码中间4位代码实例 3、如何学Web前端 4、JS基于面向对象实现的拖拽库实例 5、JS for循环计算 经典例题 : 水仙花数 js控制页

2023-12-08
web项目中js的经典案例(js基础案例)

本文目录一览: 1、Web前端工程师应该知道的经典代码 2、有创意的JavaWeb项目 3、Web前端学习之Javascript继承的常用4种方法 4、求一个web前端的项目,只需要用到js和jq的,

2023-12-08
js实现实例例子,js基础案例

2022-11-24
js实例大全jsdemo,js基础案例

本文目录一览: 1、jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载) 2、JS实现鼠标滑过链接改变网页背景颜色的方法 3、js中的数组应用实例 4、JS基于面向对象实现

2023-12-08
js机制实例详解(js基础案例)

本文目录一览: 1、我对JS异步执行机制的理解 2、请说明javascript的继承机制和java继承机制的区别 3、北大青鸟java培训:js解析机制与闭包分析? 我对JS异步执行机制的理解 说起J

2023-12-08
40个js实例(js什么是实例)

本文目录一览: 1、求JS分页实例或者servlet分页实例,最好有例子能直接运行看看效果 2、js中的数组应用实例 3、JavaScript学习笔记之数组基本操作示例 4、JS隐藏号码中间4位代码实

2023-12-08
js案例代码70行(js经典编程100题)

2022-11-16
js键盘实例讲解,js键盘实例讲解教程

2022-11-22
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
经典的js代码收藏,完整的js代码

本文目录一览: 1、谁给我帖一段下拉选择菜单的js代码? 2、使用浏览器实现收藏功能js怎么写 3、求三个常用的js代码? 4、求一段简单的JS代码 5、Web前端工程师应该知道的经典代码 谁给我帖一

2023-12-08
js实例与应用简介下载,js基础案例

本文目录一览: 1、《JavaScript核心概念及实践》pdf下载在线阅读,求百度网盘云资源 2、求《JavaScript从入门到精通第二版》全文免费下载百度网盘资源,谢谢~ 3、前端神器rrweb

2023-12-08
js编程大全(js编程教程)

本文目录一览: 1、前端开发必学的技术有哪些? 2、求推荐html到css到js相关的书籍 3、想做web前端的工作,应该先学什么? 4、前端必看的书籍 5、简述一个JavaScript脚本的基本结构

2023-12-08
js图片时钟实例,js图片时钟实例图

本文目录一览: 1、JS,时钟案例 2、如何使用JS实现一个简易数码时钟 3、js Canvas实现的日历时钟案例有哪些 4、一个JS的简单时钟程序 5、javascript,实现一个时钟,页面显示当

2023-12-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
css特效js实例(css3网页特效)

本文目录一览: 1、如何用JS和CSS3制作炫酷的弹窗效果 2、导航条js+css特效代码怎么用 3、怎样用js触发css的过渡效果 4、如何用css,js实现如图效果 5、js+css实现文字散开重

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js简单效果代码(js案例特效大全)

本文目录一览: 1、简单的js代码编程 2、JS效果代码 3、js网页打字机效果代码? 4、急!急!急!求一段简单的JS代码 5、关于Javascript 特效代码 6、求一个简单的点击图片放大缩小的

2023-12-08
java学习笔记(java初学笔记)

2022-11-14