JavaScript经典实例日常收集整理（常用经典)

本文是小编日常收集整理些射流研究…经典实例，特此分享到我们平台供大家参考！

跨浏览器添加事件

//跨浏览器添加事件函数addEvent(obj，type，fn){ if(obj。addeventlistener){ obj。addeventlistener(类型，fn，false)；} else if(obj。attachevent){//ieobj。attchevent(' on '类型，fn)；}}跨浏览器移除事件

//跨浏览器移除事件函数removeEvent(obj，type，fn){ if(obj。removeeventlistener){ obj。removeeventlistener(类型，fn，false)；} else if(obj。独立通风口){//兼容ieobj。discouplevent(' on ')类型，fn)；}}跨浏览器阻止默认行为

//跨浏览器阻止默认行为函数predf(ev){ var e=ev | | window。事件；if(e . prevent default){ e . prevent default()；} else { e.returnValue=false}}跨浏览器获取目标对象

//跨浏览器获取目标对象函数getTarget(ev){ if(ev。target){//w3creturn ev。目标；} else if(窗口。事件。srcelement){//IEreturn窗口。事件。加速；}} 跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp==scroll position function GetSp(){ return { document。文档元素。向上滚动| |文档。尸体。向左上方滚动：文档。文档元素。向左滚动| |文档。尸体。向左滚动；}}跨浏览器获取可视窗口大小

//跨浏览器获取可视窗口大小函数getWindow(){ if(窗口的类型。内宽！=' undefined '){返回{ width : window。内宽，高：的窗户。内部高度} } else { return { width : document。文档元素。客户端宽度，高度：文档。文档元素。客户端高度} } }，js对象冒充

脚本类型='text/javascript '函数人(姓名、年龄){ this.name=namethis.age=年龄；这个。say=function(){ return ' name : ' this。把这个命名为“age :”。年龄；} ;}var o=新对象();//可以简化为Object()Person.call(o，)张三',20);控制台。log(o . say())；//名称：张山年龄： 20 /scriptjs异步加载和同步加载

异步加载也叫非阻塞模式加载，浏览器在下载射流研究…的同时，同时还会执行后续的页面处理。

在脚本标签内，用射流研究…创建一个脚本元素并插入到文件中，这种就是异步加载射流研究…文件了：

(函数(){ var s=document。create element(' script ')；s . type=' text/JavaScript '；s.async=trues。src=' http://您的域。com/script。js '；var x=文档。getelementsbytagname('脚本')[0]；x.parentNode.insertBefore(s，x)；})();同步加载

平常默认用的都是同步加载。如：

脚本src=' http :3358您的域。com/script。js '/脚本同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的射流研究…文件中有对数字正射影像图的操作，重定向，输出文件等默认行为，所以同步才是最安全的。

通常会把要加载的射流研究…放到身体结束标签之前，使得射流研究…可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

同步加载流程是瀑布模型，异步加载流程是并发模型。

射流研究…获取屏幕坐标

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312 '/meta http-equiv=' X-UA-Compatible '内容=' IE=仿真器7'/meta name='auther '内容=' FQ '/标题获取鼠标坐标/title/headdy script type=' text/JavaScript '函数MousePosition(ev){ if(ev。PageX | | ev。PageY){ return { x : ev。PageX，y : ev。PageY }；}返回{ x : ev。clientx文档。尸体。向左滚动文档。尸体。客户左侧，y : ev。客户文件。尸体。滚动顶部文档。尸体。客户端top }；}函数MouseMoVE(ev){ ev=ev | | window。事件；var MousePoS=MousePosition(ev)；document.getElementById('xxx ').value=MousePoS . x document . GetElementByID(' yyy ').value=mousePos.y}文档。onmousemove=Mousemove/script x : InPut id=' XXX ' type=' text '/y : InPut id=' yyy ' type=' text '/body/html注释：

1.1.documentElement属性可以返回文档的根节点。2.scrollTop()是滚动条向下移动的距离。3.document . document element . scroll top指滚动条的垂直坐标。4.document . document element . client height指浏览器可见区域的高度。

-

在避免双重征税声明的情况下：

！如果将这一行标记添加到页面中，请键入doctype html public '-//W3C//dtd XHTML 1.0 transitional//en ' ' http://www.w3.org/tr/XHTML 1/dtd/XHTML 1-transitional . dtd '。

工业管理学(Industrial Engineering)

document . body . client width==body对象宽度document . body . client height==body对象高度document . document element . client width==可见区域宽度document . document element . client height==可见区域高度。

火狐浏览器

document . document element . scroll height==浏览器文档所有内容的高度. body.scrollHeight==浏览器文档所有内容的高度. documentelement.scrolltop==浏览器文档滚动部分的高度. body.s CrollTop==始终为0 document . document element . client height==浏览器文档可见部分的高度. body.clientHeight==浏览器所有内容的高度。

铬

document . document element . scroll height==浏览器文档所有内容的高度. body.scrollHeight==浏览器文档所有内容的高度. documentelement.scrolltop==始终0 document . body . scroll lt Op==浏览器文档滚动部分的高度. documentelement.clientheight==浏览器文档可见部分的高度. body.clientHeight==浏览器所有内容的高度。

浏览器所有内容的高度是浏览器整个框架的高度，包括滚动条底部隐藏部分的高度和部分可见部分的高度。

浏览器滚动部分的高度，也就是滚动条滚远的高度，可以看作是从整个对象顶部到顶部的高度。

概括起来

1.document . document element . scrollTop和document.body.scrollTop中的一个始终为0，因此可以使用这两个的总和来查找scroll top。

2.scrollHeight和clientHeight在声明DTD时使用documentElement，在未声明DTD时使用body。

客户端高度

在IE和FF下，这个属性没有区别，指的是浏览器的可见区域，也就是除了浏览器工具栏状态栏之外的页面显示空间的高度。

页面和客户端

PageX:鼠标在页面上的位置从页面左上角开始，即以页面为参考点，不随滑块的移动而改变。

ClientX:鼠标在页面可见区域的位置从浏览器可见区域的左上角开始，也就是以浏览器滑块此刻滑动的位置为参考点，随着滑块的移动而变化。

可悲的是，PageX是FF独有的，但IE没有这个，所以在IE下使用这个：

PageY=clientY scroll top-client top；(只讨论y轴，x轴相同，下同)。

ScrollTop表示浏览器滑块滚动的长度。

OffsetX:IE是独一无二的。与触发事件的元素位置相比，鼠标以元素框模型内容区域的左上角为参考点。如果有身体`，可能会出现负值。

只有clientX和screenX高兴是W3C标准。其他人都纠结了。

最棒的是，chrome和safari互相残杀！完全支持所有属性。

Js拖拽效果。

！doctype html html lang=' Zn-CN ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '/title/title style type=' text/CSS ' # log in { height : 100px；宽度： 100像素；border: 1px纯黑；相对位置：top:200pxleft: 200px背景：红色；}/style/headdydiv id=' log in '/div script type=' text/JAVAScript ' var Odiv=document。getelementbyid('登录')；奥迪夫。onmousedown=function(e){ var e=e | | window。事件；//window.event兼容IE，当事件发生时有效var DifX=e . ClientX-OdiV。offsetLeft//获取鼠标点击的位置到所选对象的边框的水平距离var Diffy=e . clienty-Odiv。偏移顶部；文件。onmousemove=function(e){//需设为文件对象才能作用于整个文档var e=e | | window.eventodiv。风格。left=e . client x-DifX ' px '；//style.left表示所选对象的边框到浏览器左侧距离奥迪夫。风格。top=e . clienty-Diffy ' px '；};文件。onmouseup=function(){ document。onmousemove=null//清除鼠标释放时的对象移动方法document.onmouseup=null} }/脚本/正文/htmloffsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。

射流研究…获取图片原始大小尺寸

var img=$(' # img _ id ')；//获取我的img elemvar pic_real_width，pic _ real _ height$('img/') //在内存中复制图像以避免钢性铸铁问题attr('src '，$(img).attr('src ').load(function(){ pic _ real _ width=this。宽度；//Note: $(这个)。宽度()将不会pic _ real _ height=this。身高；//为内存中的图像工作。});射流研究…循环遍历数组

脚本/循环遍历数组定义变量动物=['猫','狗','人','鲸','海豹'];var animalString=for(var I=0；ianimals . lengthi){ animalString=animals[I]' '；} alert(animalString)；//输出数组里的每个项/script遍历二维数组

脚本var arr=[[0，0，0，0，0，0]，[0，0，1，0，0，0]，[0，2，0，3，0，0]，[0，0，0，0，0，0，0]]；for(var I=0；长度；i ){ //遍历每一个具体的值for(var j=0；贾尔[我]。长度；j){文档。writeln(arr[I][j]' ')；}文档。writeln(' br/')；}/脚本阻止表单重复提交

有两种方法可以解决：一是提交之后，立刻禁用点击按钮；第二种就是提交之后取消后续的表单提交操作document.getElementById('btn ').disabled=true//第一次提交后，将按钮禁用

这种方式只能用于通过提交按钮防止重复提交，还可以使用如下方式：

定义变量标志=false//设置一个监听变量if(标志==true)返回；//退出事件标志=真//表示提交过一次了字符串部分

在字符串中查找子字符串

脚本类型='text/javascript'var test='欢迎来到我的博客！定义变量值=' blogvar subValue=test.indexOf(值);控制台。日志(子值)；//14,子字符串的索引/scriptNumber和数学部分

数字可以是一个直接量，也可以是一个对象，但是数学对象不同，他没有构造函数，并且其所有的属性和方法都是直接通过这个对象来访问的

把十进制转化为一个十六进制值

var num=255console。日志(编号。tostring(16))；//ffjs中，十进制数字以0x开头，八进制数字总是以0开头

随进产生颜色

脚本类型='text/javascript '函数randomVal(val){返回数学。地板(数学。random()*(val 1))；}函数randomColor(){ return ' RGB(' randomVal(255)'，' randomVal(255)'，' randomVal(255)')'；}/脚本目前，所有浏览器都支持RGB表示法和十六进制表示法，除了IE7，它只支持十六进制表示法

在角度和弧度之间转换

var rad=度数*(数学)。PI/180)；

定义变量度=rad *(180/数学).PI)；

数组部分

创建多维数组

脚本类型=' text/JavaScript ' var arrayLength=3；//设置数组长度//创建数组变量多数组=新数组（数组长度);for(var I=0；长度；I){多数组[i]=新数组（数组长度);}//给第一个数组索引添加项多数组[0][0]=“电话”；多数组[0][1]=' book '；多阵列[0][2]="电视";//第二个多数组[1][0]=2;多数组[1][1]=1;多数组[1][2]=98;//第三个multiArray[2][0]=['java '，' python ']；multiArray[2][1]=['js '，' C ']；multiArray[2][2]=['Haskell '，' PHP ']；/script排序数组

脚本类型='text/javascript'var水果=['香蕉','苹果','橘子','草莓'];console.log(水果。sort())；//数组['苹果','香蕉','橘子','草莓]var num=[32，43，2，5，-23，0，4]；控制台。日志(编号。sort())；//数组[ -23，0，2，32，4，43，5]/脚本数组对象的分类方法会按照字母顺序来排序数组元素。对于数字，是按照字符编码的顺序进行排序

函数比较(a，b){返回a-b；}var num=[32，43，2，5，-23，0，4]；控制台。日志(编号。排序(比较))；//数组[ -23,0,2,4,5,32,43 ]日期日期时间部分

射流研究…计算时间差

var日期1=新日期();//开始时间，当前时间var日期2=新日期();//结束时间，需传入时间参数var日期3=日期2。GetTime()-日期1。GetTime()；//时间差的毫秒数//计算出相差天数var days=数学。楼层(日期3/(24 * 3600 * 1000))；//计算出小时数var休假1=日期3%(24 * 3600 * 1000)；//计算天数后剩余的毫秒数var小时=数学。楼层(留1/(3600 * 1000))；//计算相差分钟数var休假2=休假1%(3600 * 1000)；//计算小时数后剩余的毫秒数定义变量分钟=数学。楼层(留2/(60 * 1000))；//计算相差秒数var休假3=休假2%(60 * 1000)；//计算分钟数后剩余的毫秒数定义变量秒=数学。轮次(留3/1000)；console.log('相差'天'天小时小时分钟分钟'秒'秒');正则部分

射流研究…实现千分位分隔

脚本类型="文本/javascript "函数cc(s){if(/[^0-9\.]/.测试)返回"无效值";s=s.replace(/^(\d*)$/,'$1.');s=(s '00 ').替换(/(\d*\).\d\d)\d*/，' $ 1 ')；s=s.replace(' .',');var re=/(\d)(\d{3}，)/；而(re。测试)s=s . replace(re，' $1，$ 2 '；s=s.replace(/，(\d\d)$/，' .$1');返回's.replace(/^\./,'0.)}/脚本输入onchange=' this。值=cc(这。value)'/js判断传入参数是否为质数

函数fn(输入){ input=parsent(输入，10)；返回isPrime(输入)?是质数':'不是质数；}函数isPrime(输入){if(输入2){返回false} else { for(var I=2；i=Math.sqrt(输入);I){如果(输入% I==0){返回false} } }返回true}js判断字符串出现最多的字符，并统计次数

//js实现一个函数，来判断一个字符串出现次数最多的字符，并统计这个次数函数count str(str){ var obj={ }；for(var i=0，l=str.length，k；我。I){ k=str。charat(一)；if(obj[k]){ obj[k]；} else { obj[k]=1；}}var m=0，I=null for(obj中的var k){ if(obj[k]m){ m=obj[k]；I=k；} }返回我：米；}以上内容是小编日常收集整理的Java脚本语言经典实例，非常具有参考价值，感兴趣的朋友收藏起来吧。