学习的过程中,免不了碰到各种各样的问题,收集、整理、熟悉,如此甚好。
1.defer、async的区别。
都是提前加载延后执行;
使用方式如下所示:
<script src="myAsyncScript.js" onload="myInit()" async></script>
<script src="myDeferScript.js" onload="myInit()" defer></script>
defer:js执行完后,加defer的再从头开始;
async: js执行完后,剩下的随机执行,不保证顺序;
2.javascript常见事件的触发情况
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件 onchange:当文字值改变时,产生该事件 onselect:当文字加亮后,产生该事件
onClick:当组件被点击时产生的事件
3. Onload事件DOMContentLoaded事件的区别
onload事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了;
domContentLoaded事件触发时,仅DOM加载完成,不包括样式表,图片,flash。目前已在HTML5中被标准化。
即onload事件在domcontentloaded事件之后触发。
4.以下贴几段代码,供自己闲暇时看看
1.倒计时
function countDowm(newDate){
var nDate = new Date(newDate),
oDate = new Date(),
during = (nDate - oDate)/1000;
var day = Math.floor(during/(24*60*60)),
t1 = during - (day*24*60*60),
hours = Math.floor(t1/(60*60)),
t2 = t1 - (hours*60*60),
min = Math.floor(t2/60),
sec = Math.floor(t2%60);
return '还剩' + day + '天 ' + hours + '小时 ' + min + '分 ' + sec + '秒 ';
}
setInterval(function(){
var str = countDowm(newDate);
console.log(str);
},1000);
var newDate = "2016-1-1";
2.获取n天前的日期
function getNewDay(n){
var d = new Date(),
time1 = d.getTime(),
during = n*24*60*60*1000,
time2 = time1-during;
var time = {
"0": "日",
"1": "一",
"2": "二",
"3": "三",
"4": "四",
"5": "五",
"6": "六",
}
var od= new Date(time2),
year = od.getFullYear(),
month = (((od.getMonth()+1)/100)+"").substr(2),
date = (((od.getDay()+1)/100)+"").substr(2),
hours = od.getHours(),
min = od.getMinutes(),
sec = od.getSeconds();
day = time[od.getDay()];
var arr1 = [year,month,date],
arr2 = [hours,min,sec];
console.log(arr1.join("-") + " 星期" + day);
console.log(arr2.join(":"));
return ;
}
getNewDay(30);
3.以json对象和数组为例做一个浅拷贝和深拷贝
浅拷贝:拷贝的是地址,即将a对象拷贝到b,当a发生变化时,b也发生相应的变化
function shadowCopy(obj){
var obj1;
if(obj instanceof Array){ // 如果是数组
obj1 = [];
for(var i=0; i < obj.length; i++){
obj1[i] = obj[i];
}return obj1;
}
if(typeof obj === "object" && obj + "" ==="[object Object]"){ //如果是json对象
obj1 = {};
for(var k in obj){
obj1[k] = obj[k];
}return obj1;
}
else{
return obj;
}
}
var arr = [1, 2, 3],
obj2 = shadowCopy(arr);
var person = {
"name" : "hello",
"age" : 20
},
obj3 = shadowCopy(person);
console.log(obj2);
console.log(obj3);
深拷贝:拷贝的是内容,即将a对象拷贝到b,当a发生变化时,b的变化
function deepCopy(o){
if(isArray(o)){ //判断是否是数组
var arr = [];
for(var i = 0; i < o.length; i++ ){
if(isArray(o[i]) || isJson(o[i])){ //如果数组里面有元素是json对象或数组
arr[i] = deepCopy( o[i] );//递归调用自身函数
}else{
arr[i] = o[i];
}
}return arr;
}
if(isJson(o)){ //判断是否是json对象
var obj = {};
for(var k in o){
if(isArray(o[k]) || isJson(o[k])){ //如果json对象中存在数组或json对象
obj[k] = deepCopy(o[k]);//递归调用自身函数
}else{
obj[k] = o[k];
}
}return obj;
}
else{
return o;
}
}
function isArray(data){
return (data instanceof Array);
}//判断是否是数组
function isJson(data){
return (typeof data === "object")&&( data + "" ==="[object Object]");
}//判断是否是json对象
var person = {
"name":"Tom",
"age":24,
"hobby":["sleep", "read", "music"]
},
p = deepCopy(person);
var newArr=["hello", 2, {
"name":"abc",
"sex":"male",}],
n = deepCopy(newArr);
var a = 1,
b = deepCopy(a);
console.log(p);
console.log(n);
console.log(b);
5.call()和apply()的区别
call():它的第一个参数用作 this 的对象,其他参数都直接传递给函数自身
apply():有两个参数,用作 this 的对象和要传递给函数的参数的数组;
function sayColor(sPrefix,sSuffix) {
alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, ["The color is ", "a very nice color indeed."]);
sayColor.call(obj, "The color is ", "a very nice color indeed.");//输出结果都为: "The color is blue, a very nice color indeed."
析:函数sayColor中的关键字this指向obj,call()方法以两个字符串分别与参数sPrefix和sSuffix匹配,apply()方法以数组形式与参数sPrefix和sSuffix匹配。
6.setTimeout、setInterval的区别
setTimeout:延时指定的毫秒数再执行指定代码,只执行一次
setInterval("javascript 函数",毫秒数);若毫秒数为0,即把该函数放到最后执行
var clock;
clock = setTimeout(function(){
console.log('延时3s开始执行')
}, 3000);
clearTimeout(clock);//停止执行setTimeout()
setInterval:间隔指定的毫秒数不停地执行指定的代码,执行很多次
var clock;
clock = setInterval(function(){
console.log('每隔3s执行一次')
}, 3000);
clearInterval(clock);
网友评论