JS 经典实例知识点整理汇总【实践】

如果在页面中添加这行标记的话

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 ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElementjs实现鼠标移上去显示详细信息，未声明的情况下用body

clientHeight
 在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
 

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

可是悲剧的是,PageX只有FF特有,IE则没有这个js实现鼠标移上去显示详细信息，所以在IE下使用这个：

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

scrollTop代表的是被浏览器滑动条滚过的长度

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.最给力的是，chrome和safari一条龙通杀!完全支持所有属性

js拖拽效果

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

js获取图片原始大小尺寸

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("") // 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循环遍历数组

遍历二维数组

阻止表单重复提交

有两种方法可以解决：一是提交之后，立刻禁用点击按钮；第二种就是提交之后取消后续的表单提交操作。

document.getElementById("btn").disabled = true;//第一次提交后，将按钮禁用

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

var flag = false;//设置一个监听变量
if(flag ==true)return;//退出事件
flag = true;//表示提交过一次了

字符串部分在字符串中查找子字符串

Number和Math部分

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

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

var num = 255;
console.log(num.toString(16));//ff

js中，十进制数字以0x开头，八进制数字总是以0开头

随进产生颜色

目前，所有浏览器都支持RGB表示法和十六进制表示法，除了IE7，它只支持十六进制表示法

在角度和弧度之间转换

var rad = degrees*(Math.PI/180);
var degrees = rad*(180/Math.PI);

数组部分创建多维数组

排序数组

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实现千分位分隔

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经典实例学习资料文章

《前端开发规范：命名规范、html规范、css规范、js规范》

《【规范篇】前端团队代码规范最佳实践》

《100个原生JavaScript代码片段知识点详细汇总【实践】》

《关于前端174道 JavaScript知识点汇总（一）》

《关于前端174道 JavaScript知识点汇总（二）》

《关于前端174道 JavaScript知识点汇总（三）》

《几个非常有意思的javascript知识点总结【实践】》

《都2020年了，你还不会JavaScript 装饰器？》

《JavaScript实现图片合成下载》

《70个JavaScript知识点详细总结（上）【实践】》

《70个JavaScript知识点详细总结（下）【实践】》

《开源了一个 JavaScript 版敏感词过滤库》

《送你 43 道 JavaScript 面试题》

《3个很棒的小众JavaScript库，你值得拥有》

《手把手教你深入巩固JavaScript知识体系【思维导图】》

《推荐7个很棒的JavaScript产品步骤引导库》

《Echa哥教你彻底弄懂 JavaScript 执行机制》

《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》

《深入解析高频项目中运用到的知识点汇总【JS篇】》

《JavaScript 工具函数大全【新】》

《从JavaScript中看设计模式(总结)》

《身份证号码的正则表达式及验证详解(JavaScript，Regex)》

《浏览器中实现JavaScript计时器的4种创新方式》

《Three.js 动效方案》

《手把手教你常用的59个JS类方法》

《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》

《深入浅出讲解 js 深拷贝 vs 浅拷贝》

《手把手教你JS开发H5游戏【消灭星星】》

《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》

《手把手教你全方位解读JS中this真正含义【实践】》

《书到用时方恨少，一大波JS开发工具函数来了》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《手把手教你JS 异步编程六种方案【实践】》

《让你减少加班的15条高效JS技巧知识点汇总【实践】》

《手把手教你JS开发H5游戏【黄金矿工】》

《手把手教你JS实现监控浏览器上下左右滚动》