javascript是一种属于网络的脚本语言，已经被广泛用于web应用开发，常用来为网页添加各式各样的动态功能，本文就来为大家提供一些javascript经典实例，希望对大家有一定的帮助。
跨浏览器事件
跨浏览器添加事件
//跨浏览器添加事件 function addevent(obj,type,fn){ if(obj.addeventlistener){ obj.addeventlistener(type,fn,false); }else if(obj.attachevent){//ie obj.attchevent('on'+type,fn); } }
跨浏览器移除事件
//跨浏览器移除事件function removeevent(obj,type,fn){ if(obj.removeeventlistener){ obj.removeeventlistener(type,fn,false); }else if(obj.detachevent){//兼容ie obj.detachevent('on'+type,fn); }}
跨浏览器阻止默认行为
//跨浏览器阻止默认行为 function predef(ev){ var e = ev || window.event; if(e.preventdefault){ e.preventdefault(); }else{ e.returnvalue =false; } }
跨浏览器获取目标对象
//跨浏览器获取目标对象function gettarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcelement){//ie return window.event.srcelement; }}
跨浏览器获取滚动条位置
//跨浏览器获取滚动条位置，sp == scroll position function getsp(){ return{ top: document.documentelement.scrolltop || document.body.scrolltop, left : document.documentelement.scrollleft || document.body.scrollleft; } }
跨浏览器获取可视窗口大小
//跨浏览器获取可视窗口大小 function getwindow () { if(typeof window.innerwidth !='undefined') { return{ width : window.innerwidth, height : window.innerheight } } else{ return { width : document.documentelement.clientwidth, height : document.documentelement.clientheight } } },
js 对象冒充
<script type = 'text/javascript'> function person(name , age){ this.name = name ; this.age = age ; this.say = function (){ return "name : "+ this.name + " age: "+this.age ; } ; } var o = new object() ;//可以简化为object() person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20</script>
js 异步加载和同步加载
异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了：
(function() { var s = document.createelement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getelementsbytagname('script')[0]; x.parentnode.insertbefore(s, x);})();
同步加载
平常默认用的都是同步加载。如：
<script src="http://yourdomain.com/script.js"></script>
同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。
通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型，异步加载流程是并发模型。
js获取屏幕坐标
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta http-equiv="x-ua-compatible" content="ie=emulateie7"/> <meta name="auther" content="fq" /> <title>获取鼠标坐标</title></head><body><script type="text/javascript"> function mouseposition(ev){ if(ev.pagex || ev.pagey){ return {x:ev.pagex, y:ev.pagey}; } return { x:ev.clientx + document.body.scrollleft - document.body.clientleft, y:ev.clienty + document.body.scrolltop - document.body.clienttop }; } function mousemove(ev){ ev = ev || window.event; var mousepos = mouseposition(ev); document.getelementbyid('xxx').value = mousepos.x; document.getelementbyid('yyy').value = mousepos.y; } document.onmousemove = mousemove;</script>x:<input id="xxx" type="text" /> y:<input id="yyy" type="text" /></body></html>
注释：
1、documentelement 属性可返回文档的根节点。
2、scrolltop() 为滚动条向下移动的距离
3、document.documentelement.scrolltop 指的是滚动条的垂直坐标
4、document.documentelement.clientheight 指的是浏览器可见区域高度
dtd已声明的情况下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话
ie
document.body.clientwidth ==> body对象宽度
document.body.clientheight ==> body对象高度
document.documentelement.clientwidth ==> 可见区域宽度
document.documentelement.clientheight ==> 可见区域高度
firefox
document.documentelement.scrollheight ==> 浏览器所有内容高度
document.body.scrollheight ==> 浏览器所有内容高度
document.documentelement.scrolltop ==> 浏览器滚动部分高度
document.body.scrolltop ==>始终为0
document.documentelement.clientheight ==>浏览器可视部分高度
document.body.clientheight ==> 浏览器所有内容高度
chrome
document.documentelement.scrollheight ==> 浏览器所有内容高度
document.body.scrollheight ==> 浏览器所有内容高度
document.documentelement.scrolltop==> 始终为0
document.body.scrolltop==>浏览器滚动部分高度
document.documentelement.clientheight ==> 浏览器可视部分高度
document.body.clientheight ==> 浏览器所有内容高度
js拖拽效果
<!doctype html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> <style type="text/css"> #login{ height: 100px; width: 100px; border: 1px solid black; position: relative; top:200px; left: 200px; background: red; }</style></head><body><div id="login"></div><script type="text/javascript"> var odiv = document.getelementbyid("login"); odiv.onmousedown = function(e){ var e = e || window.event; //window.event兼容ie,当事件发生时有效 var diffx = e.clientx - odiv.offsetleft; //获取鼠标点击的位置到所选对象的边框的水平距离 var diffy = e.clienty - odiv.offsettop; document.onmousemove = function(e){ //需设为document对象才能作用于整个文档 var e = e||window.event; odiv.style.left = e.clientx - diffx + 'px'; //style.left表示所选对象的边框到浏览器左侧距离 odiv.style.top = e.clienty -diffy + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; //清除鼠标释放时的对象移动方法 document.onmouseup = null; } }</script></body> </html>
offsettop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
js获取图片原始大小尺寸
var img = $("#img_id"); // get my img elemvar pic_real_width, pic_real_height;$("<img/>") // make in memory copy of image to avoid css issues .attr("src", $(img).attr("src")) .load(function() { pic_real_width = this.width; // note: $(this).width() will not pic_real_height = this.height; // work for in memory images. });
js循环遍历数组
<script> //循环遍历数组 var animals = ["cat",'dog','human','whale','seal']; var animalstring = ""; for(var i = 0;i<animals.length;i++){ animalstring += animals[i] + " "; } alert(animalstring); //输出数组里的每个项</script>
遍历二维数组
<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]]; for(var i=0;i<arr.length;i++){ //遍历每一个具体的值 for(var j=0;j<arr[i].length;j++){ document.writeln(arr[i][j]+" "); } document.writeln("<br/>"); }</script>
阻止表单重复提交
有两种方法可以解决：一是提交之后，立刻禁用点击按钮；第二种就是提交之后取消后续的表单提交操作。
document.getelementbyid("btn").disabled = true;//第一次提交后，将按钮禁用
这种方式只能用于通过提交按钮防止重复提交，还可以使用如下方式：
var flag = false;//设置一个监听变量if(flag ==true)return;//退出事件flag = true;//表示提交过一次了
字符串部分
在字符串中查找子字符串
<script type="text/javascript"> var test = 'welcome to my blog!'; var value = 'blog'; var subvalue = test.indexof(value); console.log(subvalue);//14,子字符串的索引</script>
number和math部分
数字可以是一个直接量，也可以是一个对象，但是math对象不同，他没有构造函数，并且其所有的属性和方法都是直接通过这个对象来访问的
把十进制转化为一个十六进制值
var num = 255;console.log(num.tostring(16));//ff
js中，十进制数字以0x开头，八进制数字总是以0开头
随机产生颜色
<script type="text/javascript"> function randomval(val){ return math.floor(math.random()*(val + 1)); } function randomcolor(){ return 'rgb(' + randomval(255) + ',' + randomval(255) + ',' + randomval(255) + ')'; }</script>
目前，所有浏览器都支持rgb表示法和十六进制表示法，除了ie7，它只支持十六进制表示法
在角度和弧度之间转换
var rad = degrees*(math.pi/180);var degrees = rad*(180/math.pi);
数组部分
创建多维数组
<script type="text/javascript"> var arraylength = 3;//设置数组长度 //创建数组 var multiarray = new array(arraylength); for(var i =0;i<multiarray.length;i++){ multiarray[i] = new array(arraylength); } //给第一个数组索引添加项 multiarray[0][0] = 'phone'; multiarray[0][1] = 'book'; multiarray[0][2] = 'tv'; //第二个 multiarray[1][0] = 2; multiarray[1][1] = 1; multiarray[1][2] = 98; //第三个 multiarray[2][0] = ['java','python']; multiarray[2][1] = ['js','c++']; multiarray[2][2] = ['haskell','php'];</script>
排序数组
<script type="text/javascript"> var fruits = ['banana','apple','orange','strawberry']; console.log(fruits.sort());//array [ "apple", "banana", "orange", "strawberry" ] var num = [32,43,2,5,-23,0,4]; console.log(num.sort());//array [ -23, 0, 2, 32, 4, 43, 5 ]</script>array对象的sort方法会按照字母顺序来排序数组元素。对于数字，是按照字符编码的顺序进行排序function compare(a,b){ return a-b;}var num = [32,43,2,5,-23,0,4];console.log(num.sort(compare));//array [ -23, 0, 2, 4, 5, 32, 43 ]
date日期时间部分
js计算时间差
var date1=new date(); //开始时间，当前时间var date2=new date(); //结束时间，需传入时间参数var date3=date2.gettime()-date1.gettime(); //时间差的毫秒数//计算出相差天数var days=math.floor(date3/(24*3600*1000));//计算出小时数var leave1=date3%(24*3600*1000); //计算天数后剩余的毫秒数var hours=math.floor(leave1/(3600*1000));//计算相差分钟数var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数var minutes=math.floor(leave2/(60*1000));//计算相差秒数var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数var seconds=math.round(leave3/1000);console.log(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒");
正则部分
js实现千分位分隔
<script type="text/javascript"> function cc(s){ if(/[^0-9\.]/.test(s)) return "invalid value"; s=s.replace(/^(\d*)$/,"$1."); s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1"); s=s.replace(".",","); var re=/(\d)(\d{3},)/; while(re.test(s)) s=s.replace(re,"$1,$2"); s=s.replace(/,(\d\d)$/,".$1"); return "￥" + s.replace(/^\./,"0.") }</script><input onchange="this.value=cc(this.value)" />
js判断传入参数是否为质数
function fn(input) { input = parseint(input,10); return isprime(input) ? 'is prime' : 'not prime';}function isprime(input) { if (input < 2) { return false; } else { for (var i = 2; i <= math.sqrt(input); i++) { if (input % i == 0) { return false; } } } return true;}
js判断字符串出现最多的字符，并统计次数
//js实现一个函数，来判断一个字符串出现次数最多的字符，并统计这个次数 function countstr(str){ var obj = {}; for(var i = 0, l = str.length,k; i < l ;i++){ k = str.charat(i); if(obj[k]){ obj[k]++; }else{ obj[k] = 1; } } var m = 0,i=null; for(var k in obj){ if(obj[k] > m){ m = obj[k]; i = k; } } return i + ':' + m; }
更多javascript知识请关注javascript视频教程
以上就是一些值得收藏的javascript经典实例的详细内容。