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){    veEventListener){        veEventListener(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.bo 跨浏览器获取可视窗⼝⼤⼩
//跨浏览器获取可视窗⼝⼤⼩          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 = ateElement('script');    s.type = 'text/javascript';    s.async = true;    s.src = 'yourdomain/script.js';    var x = ElementsByTagName('script')[0];    x.parentNode.insertBef 同步加载
平常默认⽤的都是同步加载。如：
<script src="yourdomain/script.js"></script>
同步模式⼜称阻塞模式，会阻⽌流览器的后续处理。停⽌了后续的⽂件的解析，执⾏，如图像的渲染。浏览器之所以会采⽤同步模式，是因为加载的js⽂件中有对dom的操作，重
定向，输出document等默认⾏为，所以同步才是最安全的。
通常会把要加载的js放到body结束标签之前，使得js可在页⾯最后加载，尽量减少阻塞页⾯的渲染。这样可以先让页⾯显⽰出来。同步加载流程是瀑布模型，异步加载流程是并发
模型。
js获取屏幕坐标
<!DOCTYPE html><html xmlns="/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
注释：
1.documentElement属性可返回⽂档的根节点。
2.scrollTop()为滚动条向下移动的距离
3.document.documentElement.scrollTop指的是滚动条的垂直坐标
4.document.documentElement.clientHeight指的是浏览器可见区域⾼度
DTD已声明的情况下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/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
Chrome
document.documentElement.scrollHeight ==> 浏览器所有内容⾼度document.body.scrollHeight ==> 浏览器所有内容⾼度document.documentElement.scrollTop==> 始终为0document.body.scrollTop==>浏览器滚动部分⾼度
浏览器所有内容⾼度即浏览器整个框架的⾼度，包括滚动条卷去部分+可视部分+底部隐藏部分的⾼度总和浏览器滚动部分⾼度即滚动条卷去部分⾼度即可视顶端距离整个对象顶端的⾼度。
综上1、document.documentElement.scrollTop和document.body.scrollTop始终有⼀个为0，所以可以⽤这两个的和来求scrollTop2、scrollHeight、clientHeight在DTD已声明的情况下
⽤documentElement，未声明的情况下⽤body
clientHeight 在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些⼯具栏状态栏剩下的页⾯展⽰空间的⾼度。
PageX和clientX
PageX:⿏标在页⾯上的位置，从页⾯左上⾓开始，即是以页⾯为参考点，不随滑动条移动⽽变化clientX:⿏标在页⾯上可视区域的位置，从浏览器可视区域左上⾓开始，即是以浏览器滑动
条此刻的滑动到的位置为参考点，随滑动条移动⽽变化.可是悲剧的是,PageX只有FF特有,IE则没有这个，所以在IE下使⽤这个：PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同
理，下同)scrollTop代表的是被浏览器滑动条滚过的长度offsetX:IE特有,⿏标相⽐较于触发事件的元素的位置，以元素盒⼦模型的内容区域的左上⾓为参考点，如果有boder`，可能出现负值只
有clientX 和screenX  皆⼤欢喜是W3C 标准.其他的，都纠结了.
最给⼒的是，chrome 和safari ⼀条龙通杀!完全⽀持所有属性
js 拖拽效果
offsetTop  返回的是数字，⽽ p  返回的是字符串，除了数字外还带有单位：px 。
js 获取图⽚原始⼤⼩尺⼨
js 循环遍历数组
遍历⼆维数组
阻⽌表单重复提交
有两种⽅法可以解决：⼀是提交之后，⽴刻禁⽤点击按钮；第⼆种就是提交之后取消后续的表单提交操作。
这种⽅式只能⽤于通过提交按钮防⽌重复提交，还可以使⽤如下⽅式：
字符串部分
在字符串中查⼦字符串
Number 和Math 部分
数字可以是⼀个直接量，也可以是⼀个对象，但是Math 对象不同，他没有构造函数，并且其所有的属性和⽅法都是直接通过这个对象来访问的
把⼗进制转化为⼀个⼗六进制值
js 中，⼗进制数字以0x 开头，⼋进制数字总是以0开头
随进产⽣颜⾊
⽬前，所有浏览器都⽀持RGB 表⽰法和⼗六进制表⽰法，除了IE7，它只⽀持⼗六进制表⽰法
在⾓度和弧度之间转换
数组部分
创建多维数组
排序数组
Array 对象的sort ⽅法会按照字母顺序来排序数组元素。对于数字，是按照字符编码的顺序进⾏排序
Date ⽇期时间部分
js 计算时间差
<!doctype html><html lang="zn-CN"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <title></title>    <style type="text/css">        #login{            height: 100px;            width: 100px;        var diffX = e.clientX - oDiv.offsetLeft;//获取⿏标点击的位置到
所选对象的边框的⽔平距离        var diffY = e.clientY - oDiv.offsetTop;
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.w <script>        //循环遍历数组      var animals = ["cat",'dog','human','whale','seal'];      var animalString = "";      for(var i = 0;i<animals.length;i++){          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]];        for(var i=0;i<arr.length;i++){        //遍历每⼀个具体的值        for(var j=0;j<arr[i].length;j++){                    document.writeln(arr[i][j]+" ");              }ElementById("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>
var num = 255;console.String(16));//ff
<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>javascript经典代码大全
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>
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 ]
var date1=new Date();  //开始时间，当前时间
var date2=new Date(); //结束时间，需传⼊时间参数var Time()-Time();  //时间差的毫秒数
//计算出相差天数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.f //计算相差秒数var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数var und(leave3/1000);
console.log(" 相差 "+days+"天 "+hours+"⼩时 "+minutes+" 分钟"+seconds+" 秒");
正则部分
js实现千分位分隔
<script type="text/javascript">    function cc(s){        if(/[^0-9\.]/.test(s)) return "invalid value";        place(/^(\d*)$/,"$1.");        s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1");        place(".",",");        var re=/(\d)(\d{3},)/;
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。