搜索
您的当前位置:首页正文

js常用代码段收集_javascript技巧

2023-12-03 来源:欧尚宠物网

每段代码前边都有功能注解和参数要求等说明文字,难度不大也就没做更多注释。 为看得清楚,这里依先后顺序做个小目录: 重写window.setTimeout, 理解递归程序的返回规律, 截取长字符串, 取得元素在页面中的绝对位置, 统计、去除重复字符(多种方法实现), 把有序的数组元素随机打乱(多种方法实现)。 代码如下: /* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 (同样可用于setInterval) 使用方法: setTimeout(回调函数,时间,参数1,...,参数n) (FF已经原生支持,IE不支持) */ var __sto = setTimeout; window.setTimeout = function(callback,timeout,param){ var args = Array.prototype.slice.call(arguments,2); var _cb = function(){ callback.apply(null,args); } __sto(_cb,timeout); } function aaaaa(a,b,c){ alert(a + b + c); } window.setTimeout(aaaaa,2000,5,6,7); /**//* 功能:理解递归程序的返回规律(从内到外) 对象之间成员的互引用 */ var ninja = { yell: function(n){ return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; } }; alert(ninja.yell(4))//结果为:hiyaaaa; var samurai = { yell: ninja.yell }; //var ninja = {}; // 此处 注释与否 对结果有影响 try { alert(samurai.yell(4)); } catch(e){ alert("Uh, this isn't good! Where'd ninja.yell go?" ); } /** 功能:截取长字符串 * @param {string} str 要截取的字符串 * @param {number} size 截取长度(单字节长度) */ var subStr = function(str, size){ var curSize = 0, arr = []; for(var i = 0, len = str.length; i < len; i++){ arr.push(str.charAt(i)); if (str.charCodeAt(i) > 255){ curSize += 2; if(size === curSize || size === curSize - 1){ return arr.join(''); } }else{ curSize++; if(size === curSize){ return arr.join(''); } } } }; var str = '#%*……&#什么东西1234abcd 还不够长'; alert(str.length); alert(str.substr(0, 15)); alert(subStr(str, 15)); /**//* 功能:取得元素在页面中的绝对位置(相对于页面左上角) @param {string} node 待求位置的DOM元素 */ function getAbsPosition(node) { var t = node.offsetTop; var l = node.offsetLeft; while (node = node.offsetParent) { t += node.offsetTop; l += node.offsetLeft; } alert("top=" + t + "" + "left=" + l); } /**//* 功能:统计、去除重复字符 @param str 需要统计的字符串 说明:常用于字符串中重复字符,或者数组中重复的字母、数字等个数统计。 此处从网上收集两种典型的类型,分别有两种实现方法,其他还有许多变种,从不同角度编写,可搜索学习。 待统计的数据,不论是数组和字符串都可以,只用借助String.split()或 Array.join() 转换为函数参数要求的类型即可。 */ // 类型一:借助新建对象来保存数据 var count1 = function (str) { var map = {}, maxCount = 0, maxChar, undefined, i = str.length; while (i--) { var t = str.charAt(i); map[t] == undefined ? map[t] = 1 : map[t] += 1; if (map[t] > maxCount) { maxChar = t; maxCount = map[maxChar]; } } return "字符:" + maxChar + "次数:" + maxCount; } function s_0(a) { // 此处参数应为数组类型 var b = {}, c = [], i; for (i = 0; i < a.length; i++){ if (!b[a[i]]) { c[c.length] = a[i], b[a[i]] = true; } } return c; } // 类型二:正则表达式匹配统计 var count2 = function (str) { var most = str.split('').sort().join('').match(/(.)1*/g); //排列重复字符 most = most.sort(function (a, b) { return a.length - b.length }).pop(); //按出现频繁排序 return most.length + ': ' + most[0]; } function s_1(a) { var a = a.join(""), b = []; while (a.length > 0) a = a.replace(new RegExp((b[b.length] = a.charAt(0)), "g"), ""); return b; } /**//* 功能:把有序数组打乱(产生无序随机数组) 说明:基本的排序算法大家应该都很清楚。但是在编程中也经常用到相反的操作,即把原来有序的数组元素随机打乱。 以下给出三种方法,第一种是以前我自己写出来的,由于水平差,写出的代码时间复杂度太大, 于是从网上搜索一些简单而且效率高的方法来。 第二种据说是“洗牌算法”,想必很多人都听说过; 第三种是利用JS的内置sort方法,这种实现起来很简单。 */ // 方法1(给大家做失败的教训借鉴) function randArray(num) { var rands = []; var ra = parseInt(num * Math.random()); rands.push(ra); for (var r = 0; r < num - 1; r++) { ra = parseInt(num * Math.random()); for (var m = 0; m < rands.length; m++) { while (rands[m] == ra) { ra = parseInt(num * Math.random()); m = -1; } } rands.push(ra); } //alert(rands); return rands; } // 方法2: //选择两个[0...array.Length)之间的随机数,把它们做下标的两个元素交换位置(这样乱序效率高) /* 说明:这是“洗牌算法” 有人证明打乱的效果如下: 随机交换nums/2次的效果很差,平均约1/3的对象还在原来的位置 随机交换nums次才基本可用,平均约15%的对象还在原来的位置 随机交换nums*2次才真正可用,平均约2%的对象还在原来的位置 */ function daluan(nums) { var array=[]; for (var i = 0; i < nums; i++) { array[i] = i; } for (var i = 0; i < nums; i++) { var rand = parseInt(nums * Math.random()); var temp = array[i]; array[i] = array[rand]; array[rand] = temp; } return array; } // 方法3: // 让比较函数随机传回-1或1就可以了(这样乱序效率可能不高) var testArray3=[1,2,3,4,5,6,7,8,9,10,22,33,55,77,88,99]; testArray3.sort(function(){return Math.random()>0.5?-1:1;}); alert(testArray3);

小编还为您整理了以下内容,可能对您也有帮助:

Web前端工程师要掌握的JavaScript代码片段(一)

今天小编要跟大家分享的文章是关于Web前端工程师要掌握的JavaScript代码片段(一)。正在从事web前端工作的小伙伴们来和小编一起看一看吧,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。

1、Anagramsofstring(带有重复项)

使用递归。对于给定字符串中的每个字母,为字母创建字谜。使用map()将字母与每部分字谜组合,然后使用rece()将所有字谜组合到一个数组中,最基本情况是字符串长度等于2或1。

constanagrams=str=>{

if(str.length<=2)returnstr.length===2?[str,str[1]+str[0]]:

[str];

returnstr.split('').rece((acc,letter,i)=>

acc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=>

letter+val)),[]);

};

//anagrams('abc')['abc','acb','bac','bca','cab','cba']

2、数组平均数

使用rece()将每个值添加到累加器,初始值为0,总和除以数组长度。

constaverage=arr=>arr.rece((acc,val)=>acc+val,0)/

arr.length;

//average([1,2,3])2

3、大写每个单词的首字母

使用replace()匹配每个单词的第一个字符,并使用toUpperCase()来将其大写。

constcapitalizeEveryWord=str=>str.replace(/b[a-z]/g,char=>

char.toUpperCase());

//capitalizeEveryWord('helloworld!')'HelloWorld!'

4、首字母大写

使用slice(0,1)和toUpperCase()大写第一个字母,slice(1)获取字符串的其余部分。省略lowerRest参数以保持字符串的其余部分不变,或将其设置为true以转换为小写。(注意:这和上一个示例不是同一件事情)

constcapitalize=(str,lowerRest=false)=>

str.slice(0,1).toUpperCase()+(lowerRest?str.slice(1).toLowerCase():

str.slice(1));

//capitalize('myName',true)'Myname'

5、检查回文

将字符串转换为toLowerCase(),并使用replace()从中删除非字母的字符。然后,将其转换为tolowerCase(),将('')拆分为单独字符,reverse(),join(''),与原始的非反转字符串进行比较,然后将其转换为tolowerCase()。

constpalindrome=str=>{

consts=str.toLowerCase().replace(/[W_]/g,'');

returns===s.split('').reverse().join('');

}

//palindrome('tacocat')true

6、计数数组中值的出现次数

每次遇到数组中的特定值时,使用rece()来递增计数器。

constcountOccurrences=(arr,value)=>arr.rece((a,v)=>v===

value?a+1:a+0,0);

//countOccurrences([1,1,2,1,2,3],1)3

7、当前URL

使用window.location.href来获取当前URL。

constcurrentUrl=_=>window.location.href;

//currentUrl()'https://google.com'

8、Curry

使用递归。如果提供的参数(args)数量足够,则调用传递函数f,否则返回一个curried函数f。

constcurry=(fn,arity=fn.length,...args)=>

arity<=args.length

?fn(...args)

:curry.bind(null,fn,arity,...args);

//curry(Math.pow)(2)(10)1024

//curry(Math.min,3)(10)(50)(2)2

9、Deepflattenarray

使用递归,使用rece()来获取所有不是数组的元素,flatten每个元素都是数组。

constdeepFlatten=arr=>

arr.rece((a,v)=>a.concat(Array.isArray(v)?deepFlatten(v):v),

[]);

//deepFlatten([1,[2],[[3],4],5])[1,2,3,4,5]

10、数组之间的区别

从b创建一个Set,然后在a上使用Array.filter(),只保留b中不包含的值。

constdifference=(a,b)=>{consts=newSet(b);returna.filter(x

=>!s.has(x));};

//difference([1,2,3],[1,2])[3]

11、两点之间的距离

使用Math.hypot()计算两点之间的欧几里德距离。

constdistance=(x0,y0,x1,y1)=>Math.hypot(x1-x0,y1-y0);

//distance(1,1,2,3)2.23606797749979

12、可以按数字整除

使用模运算符(%)来检查余数是否等于0。

constisDivisible=(dividend,divisor)=>dividend%divisor===0;

//isDivisible(6,3)true

13、转义正则表达式

使用replace()来转义特殊字符。

constescapeRegExp=str=>str.replace(/[.*+?^${}()|[]]/g,

'$&');

//escapeRegExp('(test)')(test)

14、偶数或奇数

使用Math.abs()将逻辑扩展为负数,使用模(%)运算符进行检查。如果数字是偶数,则返回true;如果数字是奇数,则返回false。

constisEven=num=>num%2===0;

//isEven(3)false

15、阶乘

使用递归。如果n小于或等于1,则返回1。否则返回n和n-1的阶乘的乘积。

constfactorial=n=>n<=1?1:n*factorial(n-1);

//factorial(6)720

16、斐波那契数组生成器

创建一个特定长度的空数组,初始化前两个值(0和1)。使用Array.rece()向数组中添加值,后面的一个数等于前面两个数相加之和(前两个除外)。

constfibonacci=n=>

Array(n).fill(0).rece((acc,val,i)=>acc.concat(i>1?acc[i-

1]+acc[i-2]:i),[]);

//fibonacci(5)[0,1,1,2,3]

17、过滤数组中的非唯一值

将Array.filter()用于仅包含唯一值的数组。

constfilterNonUnique=arr=>arr.filter(i=>arr.indexOf(i)===

arr.lastIndexOf(i));

//filterNonUnique([1,2,2,3,4,4,5])[1,3,5]

18、Flatten数组

使用rece()来获取数组中的所有元素,并使用concat()来使它们flatten。

constflatten=arr=>arr.rece((a,v)=>a.concat(v),[]);

//flatten([1,[2],3,4])[1,2,3,4]

19、从数组中获取最大值

使用Math.max()与spread运算符(...)结合得到数组中的最大值。

constarrayMax=arr=>Math.max(...arr);

//arrayMax([10,1,5])10

20、从数组中获取最小值

使用Math.min()与spread运算符(...)结合得到数组中的最小值。

constarrayMin=arr=>Math.min(...arr);

//arrayMin([10,1,5])1

21、获取滚动位置

如果已定义,请使用pageXOffset和pageYOffset,否则使用scrollLeft和scrollTop,可以省略el来使用window的默认值。

constgetScrollPos=(el=window)=>

({x:(el.pageXOffset!==undefined)?el.pageXOffset:el.scrollLeft,

y:(el.pageYOffset!==undefined)?el.pageYOffset:el.scrollTop});

//getScrollPos(){x:0,y:200}

22、最大公约数(GCD)

使用递归。基本情况是当y等于0时。在这种情况下,返回x。否则,返回y的GCD和x/y的其余部分。

const=(x,y)=>!y?x:(y,x%y);

//(8,36)4

23、Headoflist

返回ARR[0]

consthead=arr=>arr[0];

//head([1,2,3])1

24、list初始化

返回arr.slice(0,-1)

constinitial=arr=>arr.slice(0,-1);

//initial([1,2,3])[1,2]

以上就是小编今天为大家分享的关于Web前端工程师要掌握的JavaScript代码片段(一)的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端相关知识和想要了解后面的代码片段的小伙伴,记得关注北大青鸟web培训官网。

如何编写高质量JS代码(续)_javascript技巧

继续上一篇文章《如何编写高质量JS代码》今次整理一下javascript函数知识点。

2.使用函数

函数给程序员提供了主要的抽象功能,又提供实现机制。函数可以实现其他语言中的多个不同的特性,例如,过程、方法、构造函数,甚至类或模块。

2.1 理解函数调用、方法调用以及构造函数调用之间的不同

针对面向对象编程,函数、方法和类的构造函数是三种不同的概念。

使用模式:

1,函数调用

代码如下:

function hello(username){

return "hello" + username;

}

2,方法调用

代码如下:

var obj = {

hello : function(){

return "hello , " + this.username;

},

username : "floraLam"

};

ohj.hello();//"hello , floraLam"

this变量被绑定到对象是由于hello方法被定义在obj对象中,我们也可以子啊另外一个对象中赋值一份相同的函数引用,并得到相同的答案。

代码如下:

var obj2 = {

hello : obj.hello(),

username : "floraLam"

};

3,构造函数使用

代码如下:

function User(name,passwordHash){

this.name = name;

this.passwordHash = passwordHash;

}

使用new操作符来调用User则视为构造函数。

代码如下:

var u = new User("floraLam","123");

与函数调用和方法调用不同的是,构造函数调用将一个全新的对象作为this变量的值,并隐式返回这个新对象作为调用结果。构造函数的主要职责是初始化该新对象。

2.2 熟练掌握高阶函数

高阶函数无非是那些将函数作为参数或返回值的函数,将函数作为参数(通常称为回调函数,因为高阶函数"随后调用"它)是一种特别强大、富有表现力的惯用法,也在js程序中被大量使用。

考虑数组的标准sort方法,为了对所有数组都能工作,sort方法需要调用者决定如何比较数组中的任意两个元素。

代码如下:

function compareNumber(x,y){

if(x < y){

return -1;

}

if(x > y){

return 1;

}

return 0;

}

[3,1,4,1,5,9].sort(compareNumbers);//[1,1,3,4,5,9]

代码如下:

[3,1,4,1,5,9].sort(function(x,y){

if(x < y){

return -1;

}

if(x > y){

return 1;

}

return 0;

});//[1,1,3,4,5,9]

上述例子使用一个匿名函数进一步简化。

学会使用高阶函数通常可以简化代码并消除繁琐的样板代码。简单的转换字符串数组的操作我们可以使用循环这样实现:

代码如下:

var names = ["Fred","Wilma","Pebbles"];

var upper = [];

for(var i = 0,n = names.length ;i< n;i++){

upper[i] = names[i].toUpperCase();

}

upper;//["FRED","WILMA","PEBBLES"];

使用数组便利的map方法,可以消除循环,仅仅使用一个局部函数就可以对元素的逐个转换。

代码如下:

var names = ["Fred","Wilma","Pebbles"];

var upper = names.map(function(name){

return name.toUpperCase();

});

upper;//["FRED","WILMA","PEBBLES"];

另外,例如我们想创建若干个方法创建不同的字符串,具有共同的实现逻辑,每个循环通过连接每个部分的计算结果来创建一个字符串。

代码如下:

function bulidString(n,callback){

var result = "";

for(var i = 0 ; i < n ;i++){

result += callback(i);

}

return result;

}

var alphabet = bulidString(26,function(i){

return String.fromCharCode(aIndex + i);

});

alphabet;//"abcdefghijklmnopqrxtuvwxyz";

var digits = buildString(10,function(i){ return i;})

digits;//"0123456789"

var random = buildString(9,function(){

random += String.fromCharCode(Math.floor(Math.random()*26)+aIndex

});

random;//"yefjmcef"(随机)

这样能够使得读者更清晰了解该代码能做什么,无须深入实现细节。

备注

javascript返回指定范围的随机数(m-n之间)的公式:Math.random()*(n-m)+m

同时要注意题目要求,是否要求返回正整数

2.3调用模式

调用一个函数将会暂停当前函数的执行,传递控制权与参数给新的函数。 除了声明时定义的形式参数,每个函数会接收到两个新的附加参数:this和arguments。

this是个很重要的参数,并且它的值是由调用模式决定的。

以下是JavaScript中很重要的4个调用模式:

a. 方法调用模式the method invocation pattern

b. 函数调用模式the function invocation pattern

c. 构造器调用模式the constructor invocation pattern

d. Apply调用模式the apply invocation pattern

这些模式在如何初始化关键参数this上存在差异

1. 方法调用模式the method invocation method

当函数作为对象的方法的时候,我们就叫函数为方法。当一个方法被调用的时候,this绑定到调用的对象。

代码如下:

var myObj={

val:0,

increment:function(inc){

this.val+=typeof inc ==="number"? inc:1;

},

get_val:function(){return this.val;}

}

myObj.increment();// 1

myObj["increment"](2);//3

小结:

1、通过this可取得它们所属对象的上下文的方法称为公共方法

2、当用 .或者下标表达式 来使用一个函数的时候,就是方法调用模式,this对象绑定到前面的对象。

3,一个函数可以使用this来访问对象,所以它能检索对象的值或者更改对象的值。绑定this到对象发生在调用的时候。

2. 函数调用模式the function invocation pattern

当一个函数不是一个对象的属性,那么它就是作为函数来调用的。当一个函数作为函数调用模式来调用的时候,this绑定到全局对象。这是JavaScript设计时的错误并延续了下来。

代码如下:

function add(x,y){

return x+y;

}

myObj.double=function(){

var that=this;

var helper=function(){

that.val=add(that.value,that.value);

//错误的写法可能是这样,为什么错呢?因为函数作为内部函数调用的时候,this已经绑定到了错误的对象,全局对象并没有val属性,所以返回不正确的值。

//this.val = this.val+this.val;

}

helper();

}

myObj.double();//6

3. 构造器调用模式the constructor invocation pattern

JavaScript是一门基于原型继承的语言,这意味着对象可以直接继承属性从其它的对象,该语言是无类别的。

如果在一个函数前面带上new来调用,那么将得到一个隐藏连接到该函数的prototype成员的新对象,同时this也将会绑定到该新对象。

new前缀也会改变return语句的行为。这也不是推荐的编程方式。

代码如下:

var Foo = function(status){

this.status = status;

}

Foo.prototype.get_status = function(){

return this.status;

}

//构造一个Foo实例

var myFoo = new Foo("bar");

myFoo.get_status();//"bar"

4. Apply调用模式the apply invocation pattern

因为JavaScript是一个函数式的面向对象语言,所以函数可以拥有方法。

Apply方法拥有两个参数,第一个是将绑定到this的值,第二个是参数数组,也就是说Apply方法让我们构建一个数组并用其去调用函数,即允许我们选择this的值,也允许我们选择数组的值。

代码如下:

var array = [3,4];

var sum = add.apply(null,array); // 7

var statusObj = {status:"ABCDEFG"};

Foo.prototype.pro_get_status = function(prefix){

return prefix +"-"+this.status;

}

var status = Foo.prototype.get_status.apply(statusObj);// "ABCDEFG"

var pro_status = Foo.prototype.get_status.apply(statusObj,["prefix"]);// "prefix -ABCDEFG"

通常情况下,函数或方法的接收者(级绑定到特殊关键字this的值)是由调用者的语法决定性的。特别地,方法调用语法将方法被查找对象绑定到this变量。然而,有时需要使用自定义接收者来调用函数。这时候就需要使用call方法或者bind方法自定义接收者来调用方法

2.4 使用bind方法提取具有确定接受者的方法

由于方法与值为函数的属性没有区别,因此也容易提取对象的方法并提取出函数作为回调函数直接传递给高阶函数。

但这也很容易忘记将提取出来的函数的接受着绑定到该函数被提取出的对象上。

代码如下:

var buffer = {

entries: [],

add :function(s){

this.entries.push(s);

}

}

var source = ["867","-","5309"];

source.forEach(butter.add);//error:entries is undefined

这个时候butter.add的接受者不是butter对象。函数的接收者取决于它是如何被调用的,forEach方法在全局作用域中被调用,因此forEach方法的实现使用全局对象作为默认的接收者,由于全局对象中没有entries属性,因此这段代码抛出错误。

forEach方法允许调用者提供一个可选的参数作为回调函数的接收者。

代码如下:

var source = ["867","-","5309"];

source.forEach(butter.add,butter);

但并非所有高阶函数都细心周到为使用者提供回调函数的接收者。

解决方法有两种:

1)创建一个显式地一buffer对象方法的方式调用add的封装函数。不管封装函数如何被调用,它总能确保将其参数推送到目标数组中。

代码如下:

var source = ["867","-","5309"];

source.forEach(function(s){

butter.add(s);

});

2)函数对象的bind方法需要一个接收者对象,并产生一个以该接收者对象的方法调用的方法调用原来的函数的封装函数。

代码如下:

var source = ["867","-","5309"];

source.forEach(butter.add.bind(buffer));

备注

buffer.add.bind(buffer)创建一个新函数而不是修改buffer.add函数:

buffer.add === buffer.add.bind(buffer); //false

<大虾进> javascript常用脚本代码有那些呀?

适合阅读范围:对JavaScript一无所知~离精通只差一步之遥的人

基础知识:HTML

JavaScript就这么回事1:基础知识

1 创建脚本块

1: <script language=”JavaScript”>

2: JavaScript code goes here

3: </script>

2 隐藏脚本代码

1: <script language=”JavaScript”>

2: <!--

3: document.write(“Hello”);

4: // -->

5: </script>

在不支持JavaScript的浏览器中将不执行相关代码

3 浏览器不支持的时候显示

1: <noscript>

2: Hello to the non-JavaScript browser.

3: </noscript>

4 链接外部脚本文件

1: <script language=”JavaScript” src="/”filename.js"”></script>

5 注释脚本

1: // This is a comment

2: document.write(“Hello”); // This is a comment

3: /*

4: All of this

5: is a comment

6: */

6 输出到浏览器

1: document.write(“<strong>Hello</strong>”);

7 定义变量

1: var myVariable = “some value”;

8 字符串相加

1: var myString = “String1” + “String2”;

9 字符串搜索

1: <script language=”JavaScript”>

2: <!--

3: var myVariable = “Hello there”;

4: var therePlace = myVariable.search(“there”);

5: document.write(therePlace);

6: // -->

7: </script>

10 字符串替换

1: thisVar.replace(“Monday”,”Friday”);

11 格式化字串

1: <script language=”JavaScript”>

2: <!--

3: var myVariable = “Hello there”;

4: document.write(myVariable.big() + “<br/>”);

5: document.write(myVariable.blink() + “<br/>”);

6: document.write(myVariable.bold() + “<br/>”);

7: document.write(myVariable.fixed() + “<br/>”);

8: document.write(myVariable.fontcolor(“red”) + “<br/>”);

9: document.write(myVariable.fontsize(“18pt”) + “<br/>”);

10: document.write(myVariable.italics() + “<br/>”);

11: document.write(myVariable.small() + “<br/>”);

12: document.write(myVariable.strike() + “<br/>”);

13: document.write(myVariable.sub() + “<br/>”);

14: document.write(myVariable.sup() + “<br/>”);

15: document.write(myVariable.toLowerCase() + “<br/>”);

16: document.write(myVariable.toUpperCase() + “<br/>”);

17:

18: var firstString = “My String”;

19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);

20: // -->

21: </script>

12 创建数组

1: <script language=”JavaScript”>

2: <!--

3: var myArray = new Array(5);

4: myArray[0] = “First Entry”;

5: myArray[1] = “Second Entry”;

6: myArray[2] = “Third Entry”;

7: myArray[3] = “Fourth Entry”;

8: myArray[4] = “Fifth Entry”;

9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);

10: // -->

11: </script>

13 数组排序

1: <script language=”JavaScript”>

2: <!--

3: var myArray = new Array(5);

4: myArray[0] = “z”;

5: myArray[1] = “c”;

6: myArray[2] = “d”;

7: myArray[3] = “a”;

8: myArray[4] = “q”;

9: document.write(myArray.sort());

10: // -->

11: </script>

14 分割字符串

1: <script language=”JavaScript”>

2: <!--

3: var myVariable = “a,b,c,d”;

4: var stringArray = myVariable.split(“,”);

5: document.write(stringArray[0]);

6: document.write(stringArray[1]);

7: document.write(stringArray[2]);

8: document.write(stringArray[3]);

9: // -->

10: </script>

15 弹出警告信息

1: <script language=”JavaScript”>

2: <!--

3: window.alert(“Hello”);

4: // -->

5: </script>

16 弹出确认框

1: <script language=”JavaScript”>

2: <!--

3: var result = window.confirm(“Click OK to continue”);

4: // -->

5: </script>

17 定义函数

1: <script language=”JavaScript”>

2: <!--

3: function multiple(number1,number2) {

4: var result = number1 * number2;

5: return result;

6: }

7: // -->

8: </script>

18 调用JS函数

1: <a href=”#” onClick=”functionName()”>Link text</a>

2: <a href="/”javascript:functionName"()”>Link text</a>

19 在页面加载完成后执行函数

1: <body onLoad=”functionName();”>

2: Body of the page

3: </body>

20 条件判断

1: <script>

2: <!--

3: var userChoice = window.confirm(“Choose OK or Cancel”);

4: var result = (userChoice == true) ? “OK” : “Cancel”;

5: document.write(result);

6: // -->

7: </script>

21 指定次数循环

1: <script>

2: <!--

3: var myArray = new Array(3);

4: myArray[0] = “Item 0”;

5: myArray[1] = “Item 1”;

6: myArray[2] = “Item 2”;

7: for (i = 0; i < myArray.length; i++) {

8: document.write(myArray[i] + “<br/>”);

9: }

10: // -->

11: </script>

22 设定将来执行

1: <script>

2: <!--

3: function hello() {

4: window.alert(“Hello”);

5: }

6: window.setTimeout(“hello()”,5000);

7: // -->

8: </script>

23 定时执行函数

1: <script>

2: <!--

3: function hello() {

4: window.alert(“Hello”);

5: window.setTimeout(“hello()”,5000);

6: }

7: window.setTimeout(“hello()”,5000);

8: // -->

9: </script>

24 取消定时执行

1: <script>

2: <!--

3: function hello() {

4: window.alert(“Hello”);

5: }

6: var myTimeout = window.setTimeout(“hello()”,5000);

7: window.clearTimeout(myTimeout);

8: // -->

9: </script>

25 在页面卸载时候执行函数

1: <body onUnload=”functionName();”>

2: Body of the page

3: </body>

JavaScript就这么回事2:浏览器输出

26 访问document对象

1: <script language=”JavaScript”>

2: var myURL = document.URL;

3: window.alert(myURL);

4: </script>

27 动态输出HTML

1: <script language=”JavaScript”>

2: document.write(“<p>Here’s some information about this document:</p>”);

3: document.write(“<ul>”);

4: document.write(“<li>Referring Document: “ + document.referrer + “</li>”);

5: document.write(“<li>Domain: “ + document.domain + “</li>”);

6: document.write(“<li>URL: “ + document.URL + “</li>”);

7: document.write(“</ul>”);

8: </script>

28 输出换行

1: document.writeln(“<strong>a</strong>”);

2: document.writeln(“b”);

29 输出日期

1: <script language=”JavaScript”>

2: var thisDate = new Date();

3: document.write(thisDate.toString());

4: </script>

30 指定日期的时区

1: <script language=”JavaScript”>

2: var myOffset = -2;

3: var currentDate = new Date();

4: var userOffset = currentDate.getTimezoneOffset()/60;

5: var timeZoneDifference = userOffset - myOffset;

6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);

7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());

8: </script>

31 设置日期输出格式

1: <script language=”JavaScript”>

2: var thisDate = new Date();

3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();

4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();

5: document.write(thisTimeString + “ on “ + thisDateString);

6: </script>

32 读取URL参数

1: <script language=”JavaScript”>

2: var urlParts = document.URL.split(“?”);

3: var parameterParts = urlParts[1].split(“&”);

4: for (i = 0; i < parameterParts.length; i++) {

5: var pairParts = parameterParts[i].split(“=”);

6: var pairName = pairParts[0];

7: var pairValue = pairParts[1];

8: document.write(pairName + “ :“ +pairValue );

9: }

10: </script>

你还以为HTML是无状态的么?

33 打开一个新的document对象

1: <script language=”JavaScript”>

2: function newDocument() {

3: document.open();

4: document.write(“<p>This is a New Document.</p>”);

5: document.close();

6: }

7: </script>

34 页面跳转

1: <script language=”JavaScript”>

2: window.location = “http://www.liu21st.com/”;

3: </script>

35 添加网页加载进度窗口

1: <html>

2: <head>

3: <script language='javaScript'>

4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');

5: </script>

6: <title>The Main Page</title>

7: </head>

8: <body onLoad='placeHolder.close()'>

9: <p>This is the main page</p>

10: </body>

11: </html>

36 读取图像属性

1: <img src="/”image1.jpg"” name=”myImage”>

2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>

3:

37 动态加载图像

1: <script language=”JavaScript”>

2: myImage = new Image;

3: myImage.src = “Tellers1.jpg”;

4: </script>

38 简单的图像替换

1: <script language=”JavaScript”>

2: rollImage = new Image;

3: rollImage.src = “rollImage1.jpg”;

4: defaultImage = new Image;

5: defaultImage.src = “image1.jpg”;

6: </script>

7: <a href="/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”

8: onMouseOut=”document.myImage.src = defaultImage.src;”>

9: <img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>

39 随机显示图像

1: <script language=”JavaScript”>

2: var imageList = new Array;

3: imageList[0] = “image1.jpg”;

4: imageList[1] = “image2.jpg”;

5: imageList[2] = “image3.jpg”;

6: imageList[3] = “image4.jpg”;

7: var imageChoice = Math.floor(Math.random() * imageList.length);

8: document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);

9: </script>

40 函数实现的图像替换

1: <script language=”JavaScript”>

2: var source = 0;

3: var replacement = 1;

4: function createRollOver(originalImage,replacementImage) {

5: var imageArray = new Array;

6: imageArray[source] = new Image;

7: imageArray[source].src = originalImage;

8: imageArray[replacement] = new Image;

9: imageArray[replacement].src = replacementImage;

10: return imageArray;

11: }

12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);

13: </script>

14: <a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”

15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>

16: <img src="/”image1.jpg"” width=100 name=”myImage1” border=0>

17: </a>

41 创建幻灯片

1: <script language=”JavaScript”>

2: var imageList = new Array;

3: imageList[0] = new Image;

4: imageList[0].src = “image1.jpg”;

5: imageList[1] = new Image;

6: imageList[1].src = “image2.jpg”;

7: imageList[2] = new Image;

8: imageList[2].src = “image3.jpg”;

9: imageList[3] = new Image;

10: imageList[3].src = “image4.jpg”;

11: function slideShow(imageNumber) {

12: document.slideShow.src = imageList[imageNumber].src;

13: imageNumber += 1;

14: if (imageNumber < imageList.length) {

15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);

16: }

17: }

18: </script>

19: </head>

20: <body onLoad=”slideShow(0)”>

21: <img src="/”image1.jpg"” width=100 name=”slideShow”>

42 随机广告图片

1: <script language=”JavaScript”>

2: var imageList = new Array;

3: imageList[0] = “image1.jpg”;

4: imageList[1] = “image2.jpg”;

5: imageList[2] = “image3.jpg”;

6: imageList[3] = “image4.jpg”;

7: var urlList = new Array;

8: urlList[0] = “http://some.host/”;

9: urlList[1] = “http://another.host/”;

10: urlList[2] = “http://somewhere.else/”;

11: urlList[3] = “http://right.here/”;

12: var imageChoice = Math.floor(Math.random() * imageList.length);

13: document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);

14: </script>

JavaScript就这么回事4:表单

还是先继续写完JS就这么回事系列吧~

43 表单构成

1: <form method=”post” action=”target.html” name=”thisForm”>

2: <input type=”text” name=”myText”>

3: <select name=”mySelect”>

4: <option value=”1”>First Choice</option>

5: <option value=”2”>Second Choice</option>

6: </select>

7: <br/>

8: <input type=”submit” value=”Submit Me”>

9: </form>

44 访问表单中的文本框内容

1: <form name=”myForm”>

2: <input type=”text” name=”myText”>

3: </form>

4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45 动态复制文本框内容

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText”><br/>

3: Copy Text: <input type=”text” name=”copyText”>

4: </form>

5: <a href=”#” onClick=”document.myForm.copyText.value =

6: document.myForm.myText.value;”>Copy Text Field</a>

46 侦测文本框的变化

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>

3: </form>

47 访问选中的Select

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: <option value=”Third Choice”>3</option>

6: </select>

7: </form>

8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48 动态增加Select项

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: </select>

6: </form>

7: <script language=”JavaScript”>

8: document.myForm.mySelect.length++;

9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;

10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;

11: </script>

49 验证表单字段

1: <script language=”JavaScript”>

2: function checkField(field) {

3: if (field.value == “”) {

4: window.alert(“You must enter a value in the field”);

5: field.focus();

6: }

7: }

8: </script>

9: <form name=”myForm” action=”target.html”>

10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>

11: <br/><input type=”submit”>

12: </form>

50 验证Select项

1: function checkList(selection) {

2: if (selection.length == 0) {

3: window.alert(“You must make a selection from the list.”);

4: return false;

5: }

6: return true;

7: }

51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br/>

3: Password: <input type=”password” name=”password”><br/>

4: <input type=”button” value=”Login” onClick=”this.form.submit();”>

5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>

6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>

7: </form>

52 使用图像按钮

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br/>

3: Password: <input type=”password”name=”password”><br/>

4: <input type=”image” src="/”login.gif"” value=”Login”>

5: </form>

6:

53 表单数据的加密

1: <SCRIPT LANGUAGE='JavaScript'>

2: <!--

3: function encrypt(item) {

4: var newItem = '';

5: for (i=0; i < item.length; i++) {

6: newItem += item.charCodeAt(i) + '.';

7: }

8: return newItem;

9: }

10: function encryptForm(myForm) {

11: for (i=0; i < myForm.elements.length; i++) {

12: myForm.elements[i].value = encrypt(myForm.elements[i].value);

13: }

14: }

15:

16: //-->

17: </SCRIPT>

18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>

19: Enter Some Text: <input type=text name=myField><input type=submit>

20: </form>

JavaScript就这么回事5:窗口和框架

54 改变浏览器状态栏文字提示

1: <script language=”JavaScript”>

2: window.status = “A new status message”;

3: </script>

55 弹出确认提示框

1: <script language=”JavaScript”>

2: var userChoice = window.confirm(“Click OK or Cancel”);

3: if (userChoice) {

4: document.write(“You chose OK”);

5: } else {

6: document.write(“You chose Cancel”);

7: }

8: </script>

56 提示输入

1: <script language=”JavaScript”>

2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);

3: document.write(“Your Name is “ + userName);

4: </script>

57 打开一个新窗口

1: //打开一个名称为myNewWindow的浏览器新窗口

2: <script language=”JavaScript”>

3: window.open(“http://www.liu21st.com/”,”myNewWindow”);

4: </script>

58 设置新窗口的大小

1: <script language=”JavaScript”>

2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');

3: </script>

59 设置新窗口的位置

1: <script language=”JavaScript”>

2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');

3: </script>

60 是否显示工具栏和滚动栏

1: <script language=”JavaScript”>

2: window.open(“http:

61 是否可以缩放新窗口的大小

1: <script language=”JavaScript”>

2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script>

62 加载一个新的文档到当前窗口

1: <a href='#' onClick='document.location = '125a.html';' >Open New Document</a>

63 设置页面的滚动位置

1: <script language=”JavaScript”>

2: if (document.all) { //如果是IE浏览器则使用scrollTop属性

3: document.body.scrollTop = 200;

4: } else { //如果是NetScape浏览器则使用pageYOffset属性

5: window.pageYOffset = 200;

6: }</script>

64 在IE中打开全屏窗口

1: <a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a>

65 新窗口和父窗口的操作

1: <script language=”JavaScript”>

2: //定义新窗口

3: var newWindow = window.open(“128a.html”,”newWindow”);

4: newWindow.close(); //在父窗口中关闭打开的新窗口

5: </script>

6: 在新窗口中关闭父窗口

7: window.opener.close()

66 往新窗口中写内容

1: <script language=”JavaScript”>

2: var newWindow = window.open(“”,”newWindow”);

3: newWindow.document.open();

4: newWindow.document.write(“This is a new window”);

5: newWIndow.document.close();

6: </script>

67 加载页面到框架页面

1: <frameset cols=”50%,*”>

2: <frame name=”frame1” src="/”135a.html"”>

3: <frame name=”frame2” src="/”about:blank"”>

4: </frameset>

5: 在frame1中加载frame2中的页面

6: parent.frame2.document.location = “135b.html”;

68 在框架页面之间共享脚本

如果在frame1中html文件中有个脚本

1: function doAlert() {

2: window.alert(“Frame 1 is loaded”);

3: }

那么在frame2中可以如此调用该方法

1: <body onLoad=”parent.frame1.doAlert();”>

2: This is frame 2.

3: </body>

69 数据公用

可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用

1: <script language=”JavaScript”>

2: var persistentVariable = “This is a persistent value”;

3: </script>

4: <frameset cols=”50%,*”>

5: <frame name=”frame1” src="/”138a.html"”>

6: <frame name=”frame2” src="/”138b.html"”>

7: </frameset>

这样在frame1和frame2中都可以使用变量persistentVariable

70 框架代码库

根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1: <frameset cols=”0,50%,*”>

2: <frame name=”codeFrame” src="/”140code.html"”>

3: <frame name=”frame1” src="/”140a.html"”>

4: <frame name=”frame2” src="/”140b.html"”>

5: </frameset>

欧尚宠物网还为您提供以下相关内容希望对您有帮助:

Web前端工程师要掌握的JavaScript代码片段(一)

1、Anagramsofstring(带有重复项)使用递归。对于给定字符串中的每个字母,为字母创建字谜。使用map()将字母与每部分字谜组合,然后使用reduce()将所有字谜组合到一个数组中,最基本情况是字符串长度等于2或1。constanagrams=str...

如何编写高质量JS代码(续)_javascript技巧

代码如下:var source = ["867","-","5309"];source.forEach(function(s){ butter.add(s);});2)函数对象的bind方法需要一个接收者对象,并产生一个以该接收者对象的方法调用的方法调用原来的函数的封装函数。 代码如下:var sour...

js自执行函数的几种不同写法的比较_javascript技巧

正确的写法多种多样,也各有利弊: 方法1:最前最后加括号 代码如下: (function(){alert(1);}()); 这是jslint推荐的写法,好处是,能提醒阅读代码的人,这段代码是一个整体。 例如,...

JS函数的几种定义方式分析_javascript技巧

第二种是将一匿名函数赋给一个变量,调用方法:func2([函数]);第三种是将func4赋给变量func3,调用方法:func3([函数]);或func4([函数]);第四种是声明func5为一个对象。再看看它们的区别:但同样是定义函数,在...

求教下面的javascript代码意思

这是一段使用jQuery库的JavaScript代码片段,如果菜单中超链接的URL与当前页面的URL匹配,则将“menu_hover”类添加到菜单中的超链接的父元素中,以突出显示或激活该菜单项。代码使用 $(document).ready() 函数确保文档加载...

javascript相关事件的几个概念_javascript技巧

事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程;注册事件处理程序:1、设置javascript对象属性;2、设置html标签属性3、addEventListener或attachEvent(后者为IE的) 事件传播的三个阶段:1、发生在...

&lt;大虾进&gt; javascript常用脚本代码有那些呀?

1: 2: JavaScript code goes here3: 2 隐藏脚本代码1: 2: &lt;!--3: document.write(“Hello”);4: // --&gt;5: 在不支持JavaScript的浏览器中将不执行相关代码3 浏览器不支持的时候显示1: &lt;noscript&gt;2: Hello to the ...

Javascript页面跳转间的常用方法有哪些

Javascript页面跳转间的常用方法一:JS 重载页面,本地刷新,返回上一页 代码如下:返回上一页 重载页面,本地刷新 返回上一页重载页面,本地刷新返回前二页并刷新的JS代码应该怎样写。 代码如下:history.go(-2); ...

Web前端工程师应该知道的提高JavaScript技能的技巧!

技能的技巧,下面让我们一起来看一看吧!01、变量赋值(值vs引用)理解JavaScript如何给变量赋值可以帮助我们减少一些不必要的bug。如果你不理解这一点,可能很容易地编写被无意中更改值的代码。JavaScript总是按照值来给变量赋值。这一部分...

求三个常用的js代码?

上面的2个是不可能实现的。你问我为什么?请多看看web2.0的规则,简单的说js没有页头的功能,再说了,搜索引擎也不认识JS代码呀,第三个如果你要用JS代码,是可以实现的,但是那么一来搜索引擎一个都不会抓取,所以更不...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top