www.qjdy.com-奇迹赌场 > 佳美特设计 > 特此分享到脚本之家平台供大家参考

原标题:特此分享到脚本之家平台供大家参考

浏览次数:54 时间:2019-07-11

正文是作者通常搜聚整理些js杰出实例,特此共享到剧本之家平台供我们参照他事他说加以考察!

跨浏览器增添事件

//跨浏览器添加事件
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 ==> 浏览器全体内容中度

浏览器全部内容惊人即浏览器整个框架的中度,包涵滚动条卷去一些 可视部分 底部遮掩部分的惊人总和

浏览器滚动部分低度即滚动条卷去部分中度就可以视最上端距离整个对象最上端的莫斯中国科学技术大学学。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有三个为0,所以能够用这多个的和来求scrollTop

2、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一条龙通杀!完全帮忙具备属性

 图片 1

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;
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 elem
var 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>

日前,全部浏览器都援救OdysseyGB表示法和十六进制表示法,除了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*.dd)d*/,"$1");
s=s.replace(".",",");
var re=/(d)(d{3},)/;
while(re.test(s))
s=s.replace(re,"$1,$2");
s=s.replace(/,(dd)$/,".$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 面向对象的经文实例代码
  • JavaScript 卓绝读书笔记(1,2)
  • javascript 优良笔记
  • js正则表达式基本语法(美貌)
  • JavaScript语言精粹卓越实例(整理篇)

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:特此分享到脚本之家平台供大家参考

关键词: GA电子游戏

上一篇:html部分代码如下

下一篇:没有了