Day 01—
实现开关功能用布尔值通过 if 语句判断。
var onOff=true;
if(onOff==true){
document.getElementById('a').style.display=‘ block';
onOff=false;
}else{
document.getElementById('a').style.display=‘ none';
onOff=true;
}
对于一组标签的单个属性设置，前面加 this.
Day 02—
做5个选项卡。点击效果：
for（var i=0; i预览图：
图片发自App
HTML：
js：
var oBtn1 = document.getElementById("oBt1");
var oBtn2 = document.getElementById("oBt2");
var oDiv = document.getElementById("oDiv");
oBtn2.onclick=function(){
alert(oBtn1.value);
oDiv.innerHTML=oBtn1.value+'圣诞节快乐'；
};
Day 3—
做点选显示时，给自定义索引属性，for循环控制单个显示，清空显示样式。
例：
HTML:
![]()
![]()
![]()
![]()
![]()
CSS:
div{
display:none;}
Js:
var oDiv n = document.getElementById('oDivn');
var oUl = document.getElementById('oUl');
var aLi = document.getElementsByTagName('li');
var aImg = document.getElementsByTagName('img');
//获取元素
var arr=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
for(var i=0; iDay 4—
利用 [i] 选择具体 div
var oDiv = document.getElementByTagName('div')[0];
innerHTML获取的类型都是 string
Day 5 –
NaN: not a number(运算或数据转换出错)。
函数传参：
轮播图：
Day 6
利用splice（）函数对数组函数内容进行增加或删除。
1.替换：
var arr = ["前端","圣诞","热情","开心"];
arr.splice(1,2,"春节");
console.log(arr);
输出： ["前端","春节","热情","开心"];
2.添加：
var arr = ["前端","圣诞","热情","开心"];
arr.splice(1,0,"春节");
console.log(arr);
输出： ["前端","春节","圣诞","热情","开心"];
3.删除：
var arr = ["前端","圣诞","热情","开心"];
for (var i=0; i输出： ["前端","热情","开心"];
4.字符串、数组的拼接：
var arr1=["前端","圣诞","热情","开心"];
var arr2=["后端","春节","冷漠","失落"];
var arr = arr1.concat(arr2);
console.log(arr);
输出：["前端","圣诞","热情","开心","后端","春节","冷漠","失落"];
5.将数组函数转换成字符串函数：
var arr = ["大家","春节","快乐"];
var str = arr.join("");
console.log(str);
输出：大家春节快乐
注：join函数里写间隔符（默认以 ， 间隔），不写则无间隔符。
6.数组排序：
(1)数字排序：
var arr = [1,5,88,6];
arr.sort(function (a,b){
return a-b;
});
console.log(arr);
(2)字符串排序：
var arr = ["a","ab","ac","dd"];
arr.sort();
console.log(arr);
重要！！冒泡排序（将最大值一次放在数组最后）：
var arr = [23,4,72,67];
for (var j=0; jarr[i+1]){
var temp = arr[i];
arr[i] = arr[i+1];
arr[i+1] = temp;
}
}
}
console.log(arr);
Day 7
日期函数:
(1) 获取系统当前时间(根据格林尼治时间划分)
var date = new Date();
(2)
// 月份:0-11
var date = new Date(2018,1,13);
var year = date.getFullYear();
console.log(year);
//输出年
var month = date.getMonth();
console.log(month);
//输出月-1;
var adate = date.getDate();
console.log(adate);
//输出日
var day = date.getDay();
console.log(day);
//输出星期
var time = date.getTime();
//时间戳.
2.计时器
var timer = window.setInterval(function(){
console.log(i);
},1000)
setInterval() 函数可重复执行
setTimeout() 函数只执行一次
注:创建计时器,时间间隔1秒.
例:倒计时
HTML:
60
CSS:
#time{
width:200px;
height:100px;
margin:0 auto;
}
JS:
var date = document.getElementById("time");
var value = time.innerHTML;
var timer = setInterval(function(){
value - = 1;
time.innerHTML = value;
if(value<=0){
clearInterval(timer);
}
},1000);
Day 8
获取计算后样式(可获得行间 内联样式):
var style = getComputedStyle(标签名);
var xxx = style.xxx; //属性
另(IE):
var abc = 标签名.currentStyle.属性名;
获得计算后样式函数例子:
function getCss(obj,name){
if(wrap.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj)[name];
}
}
var value = getCss(wrap,"left");
计时器的例子:
大图滚动
- 第一张
- 第二张
- 第三张
- 第四张
- 第五张