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<aLi.length;i++）{
aLi[i].onclick=function(){
for(var i=0; i<aLi.length;i++){
aLi[i].className=‘’}
this.className=‘action’;
};
};
预览图：
前端学习日记
HTML：
<input id="oBt1" type="text" value="请输入你的名字">
<input id="oBt2" type="button" value="提交">
<div id="oDiv"></div>
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—
做点选显示时，给<li>自定义索引属性，for循环控制单个显示，清空显示样式。
例：
HTML:
<ul id=oUl>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id=oDiv1><img src=""></div>
<div id=oDiv2><img src=""></div>
<div id=oDiv3><img src=""></div>
<div id=oDiv4><img src=""></div>
<div id=oDiv5><img src=""></div>
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; i<aLi.length; i++){
aLi[i].index=i;
for(var i=0; i<aLi.length; i++){
oDivn.style.display='none';
}
aLi[i].onclick=function(){
aImg.src=arr[i];
oDiv[this.index].style.dispaly='block'；
};
｝
Day 4—
利用 [i] 选择具体 div
var oDiv = document.getElementByTagName('div')[0];
innerHTML获取的类型都是 string
Day 5 –
NaN: not a number(运算或数据转换出错)。
函数传参：
<script>
fn1(100);
function fn1(a){
alert(a);
}
</script>
轮播图：
<div id=“box1”>
<img src=“img/d1.jpg”>
<a href=“#”> < </a>
<a href=“#”> > </a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
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<arr.length; i++){
var str = arr [i];
if (str=="圣诞"){
arr.splice(i,1);
i--;
}
console.log(arr);
}
输出： ["前端","热情","开心"];
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; j<arr.length-1; j++){
for (var i=0; i<arr.length-j-1; i++){
if (arr[i]>arr[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:
<div id="time">60</div>
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");
计时器的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大图滚动</title>
<style>
#wrap{
width:500px;
height: 200px;
border:1px solid red;
overflow: hidden;
margin:0 auto;
position: relative;
}
ul{
width:2500px;
position: absolute;
}
ul::after{
content: '';
display: block;
clear: both;
}
li{
width: 500px;
height: 200px;
float: left;
background-color: red;
list-style: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>第一张</li>
<li>第二张</li>
<li>第三张</li>
<li>第四张</li>
<li>第五张</li>
</ul>
</div>
</body>
<script src="getCss.js"></script>
<script>
var ul = document.getElementsByTagName("ul")[0];
var wrap = document.getElementById("wrap");
move();
function move(){
var left = getCss(ul,"left");
left = left.replace("px","");
var timer = setInterval(function (){
left --;
ul.style.left = left + "px";
},10);
}
</script>
</html>
网友评论