倒计时 妙味课堂_JavaScript知识点积累

Calibri (西文正文)

arguments

fn1(1,2,3); //实参——实际传递的参数

//function fn1(a,b,c){//形参——形式上传递的参数，abc这些名称代表123

function fn1(){

arguments=>[1,2,3]——实参的集合

alert(arguments); //object arguments

alert(arguments.length);//3 长度

alert(arguments[arguments.length-1]);//弹出参数的最后一个值

}

//当函数的参数个数无法确定的时候，用arguments

getComputedStyle()

alert(getComputedStyle($(div1)).width);

getComputedStyle是获取计算机(浏览器)计算后的样式,但是IE6,7，8不兼容

currentStyle

alert($('div1').currentStyle.width);//只兼容IE浏览器，不兼容标准浏览器

兼容获取元素的样式

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

cssText

设置某元素的style样式

$("div1").style.cssText="width:300px";

$("div1").style.width="500px";

定时器：时间概念

var timer=setInterval(函数，毫秒);=>重复执行

clearInterval(timer);=>清除

var timer=setTimeout(函数，毫秒);=>只执行一次(炸弹)

clearTimeout(timer);=>清除定时器

页面滚动元素

页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

上下滚动实例：

JS8-函数返回值、定时器基础——作业-按钮控制商品图片上下滚动.html

oUl.offsetTop:某元素与顶部的偏移量

timer=setInterval(function(){

if(oUl.offsetTop<=oDiv.offsetHeight-oUl.offsetHeight){

clearInterval(timer);

}else{

oUl.style.top=(oUl.offsetTop-3)+"px";

}

},30);

系统时间

var myTime = new Date();

var iYear = myTime.getFullYear();

var iMoth = myTime.getMonth()+1;//月是从0开始计算的

var iDay = myTime.getDate();//20日

var iWeek = myTime.getDay();//星期几

var iHours = myTime.getHours();

var iMinutes = myTime.getMinutes();

var iSec = myTime.getSeconds();

if(iWeek === 0){iWeek = "星期日";};

if(iWeek === 1){iWeek = "星期一";};

if(iWeek === 2){iWeek = "星期二";};

if(iWeek === 3){iWeek = "星期三";};

if(iWeek === 4){iWeek = "星期四";};

if(iWeek === 5){iWeek = "星期五";};

if(iWeek === 6){iWeek = "星期六";};

var str='';

str=iYear+"年"+iMoth+"月"+iDay+"日 "+iWeek+"

"+iHours+":"+iMinutes+":"+iSec;

alert(str);//2015年4月20日星期一 15:20:10

倒计时

倒计时：未来的时间点(不变)—现在的时间点(在变)

var t = Math.floor((iNew-iNow)/1000);

天： Math.floor(t/86400);

时:Math.floor(t%86400/3600);

分:Math.floor(t%86400/3600/60);

秒:Math.floor(t%60);

数字日期形式：new Date(2013,4,1,9,48,12)

字符串形式：new Date('June 10,2013 12:12:12')

注意月份。

var iNow = new Date();

var iNew = new Date(2015,3,22,10,31,0);//2015年4月22日9:55:0

var t = Math.floor((iNew-iNow)/1000);

var str= Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时

'+Math.floor(t%86400/3600/60)+'分'+Math.floor(t%60)+'秒';

alert(str);

字符串方法

var str='妙味课堂';

alert(str.length);//包括字符里面的空格

alert( str.charAt( 2 ) ); //课

alert( str.charCodeAt() ); //默认是下标为0的编码值: 22937

alert( str.charCodeAt(1) ); //21619

alert( String.fromCharCode( 22937 ) );//秒

alert( String.fromCharCode( 22937,21619 ) ); //妙味

常用ASCII编码值：

0~948-57

a~z97-122

A~Z65-90

var str = 'www.miaov.com/2013wwww';

alert(str.indexOf('m')); //4

alert(str.indexOf('m',5)); //从第5位开始 查找m的位置输出12

alert(str.indexOf('m',500)); //-1当找不到的时候，输出-1

alert(str.indexOf('x')); //-1

alert(str.indexOf('ww')); //0

alert(str.indexOf('ww',2)); //18

var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统';

alert(str.indexOf('妙味')); //0从左到右，从开始到最后

alert(str.lastIndexOf('妙味')); //39从右到左，从最后到开始

alert(str.lastIndexOf('妙味',38));//19

alert(str.lastIndexOf('妙味',-2));//0如果第二参数为负数，自动作为0来处

alert(str.substring(0,2)); //妙味从第0位开始输出2位数

alert(str.substring(4));//从第4位数开始到最后

alert(str.substring(2,0));//自动检测两个数的大小，把大的数放在后面，小的数放在前面

alert(str.substring()); //默认从0位开始到最后

alert(str.substring(-3,2)); //不接收负数，当0处理

alert(str.substring(2,-3)); //自动检测改写为(0,2)

alert(str.slice(2,0));//不会输出任何数不会自动检测两个数的大小

alert(str.slice(-2));//输出 字符串的从后面数，两个字符串

alert(str.slice(-4,-2));//从后面数，第4位字符串开始 数两位字符串

var str = 'www.MIaoV.com';

alert(str.toUpperCase());

alert(str.toLowerCase());

var str = 'www.miaov.com';

var arr = str.split('.');//根据点分割成三个字符串数组，['www','miaov','com']

alert(arr[1]);

var str = 'leo';

alert(str.split());//['leo']

alert(str.split('')); //['l','e','0']

var str = '2013-2-29-23-07';

alert(str.split('-'));//['','','','','','']

alert(str.split('-',3)); //['2013','2','29']保留前面3段

var arr = ['aa','bb','cc'];

alert(typeof arr); //object

alert(typeof arr.join()); //string 把数组转换成字符串

alert(arr.join('-')); //aa-bb-cc

alert(arr.join('')); //aabbcc

有关json

(1)Json格式

var json2 = { 'name':'miaov' };

json2.name = '妙味';

json2['name'] = 'miaov';

alert( json2.name );

alert( json2['name'] );

(2)For-in 与for循环

var json5 = {

'url' : ['img/1.png','img/2.png','img/3.png','img/4.png'],

'text' : ['图片一','图片二','图片三','图片四'],

};

for ( var attr in json5 ){

for ( var i = 0; i < json5[attr].length; i++ ){

alert(json5[attr][i]);

}

}

var arr = ['a','b','c'];

for ( var i in arr){

alert(i);//弹出下标

}

注意：数组可以用for循环，也可以用for-in,

但是json没有长度，因此只能用for-in

有关数组

(1)数组的格式

var arr = new Array(1,2,3);

var arr = new Array(4);//当这里写一个数字的时候，表示长度为4

alert(arr.length);

var arr = ['aa',2,3];

alert(arr.length);

arr.length = 1;//数组长度赋值为1，那么数组就只留第一个值

arr.length = 0; //数组长度赋值为0，表示清空数组；字符串的长度不能写

alert(arr);

(2)数组有关字符方法

var arr = [1,2,3];

alert( arr.push('abc') ); //返回值：数组的长度

alert( arr.unshift('bbbb') ); //在数组前面压入，返回值是：数组的长度

alert( arr.unshift(0) ); //IE6,7不支持unshift的返回值

alert( arr );

var arr = ['TM','ZY','ZS','DP','LEO'];

alert(arr.pop()); //默认删除数组的最后一个值；返回值：删除的值

alert(arr.shift()); //删除数组第一个值；返回值：删除的值

alert(arr);

arr.unshift(arr.pop()); //往后走

arr.push(arr.shift());//往前走

var arr = ['T1','Z2','Z3','D4','L5'];

alert(arr.splice(0,2)); //第0位开始，删除两个值 ,返回值：删除的值

arr.splice(0,2,'莫涛'); //第0位开始，两个值替换成'莫涛'

arr.splice(2,0,'钟意媳妇'); //在索引值2的位置添加一个值

arr.splice(2,1,'钟意媳妇'); //在索引值2的位置替换一个值为 '钟意媳妇~~'

alert(arr);

数组去重

var arr = [30,45,30,39,30];

for (var i = 0; i

for ( var j = i+1; j

if( arr[j] == arr[i] ){ // 30 = 30

arr.splice(j,1); //[30,45,39,30]

j--;//j =1

}

}

}

alert(arr);

排序

var arr = ['d','c','a','e','b'];

arr.sort(); //a b c d e 是按照　ACSII码排序的

var arr2 = [4,3,5,76,2,8];

arr2.sort(); //2,3,4,5,,76,8

比较函数

arr2.sort(function(a,b){

return a - b; //从小到大

//return b - a; //从大到小

});

alert(arr2); //2,3,4,5,,8,76

var arrWidth = ['345px','23px','100px','10000px'];

arrWidth.sort(function(a,b){

return parseInt(a) - parseInt(b);

});

alert(arrWidth);

随机排序

var arr = [1,2,3,4,5,6,7,8];

alert( Math.random() ); //0~1的小数随机函数

arr.sort(function(a,b){

return Math.random() - 0.5;

});

alert( arr );

随机函数

//50~100

var x = 50;

var y = 100;

alert( Math.round( Math.random()*(y-x) + x ) );

// 1~x

alert( Math.ceil( Math.random()*x ) );

var arr = [1,2,3];

var arr1 = [4,5,6];

var arr2 = [7,8,9];

alert( arr.concat( arr1,arr2 ) );

var arr1 = [1,2,3];

arr1.reverse();

alert(arr1); //3,2,1

//面试题

var str = 'abcdef';

alert(str.split('').reverse().join(''));