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

时间：2021-05-28

本文是小编日常收集整理些js经典实例，特此分享到平台供大家参考！

跨浏览器添加事件

//跨浏览器添加事件function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}else if(obj.attachEvent){//IEobj.attchEvent('on'+type,fn);}}

跨浏览器移除事件

//跨浏览器移除事件function removeEvent(obj,type,fn){if(obj.removeEventListener){obj.removeEventListener(type,fn,false);}else if(obj.detachEvent){//兼容IEobj.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){//w3creturn ev.target;}else if(window.event.srcElement){//IEreturn window.event.srcElement;}}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp == scroll positionfunction 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://pare));//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 经典实例，非常具有参考价值，感兴趣的朋友收藏起来吧。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章