前端學(xué)習(xí)日記

Day 01—

實現(xiàn)開關(guān)功能用布爾值通過 if 語句判斷俐东。

var onOff=true;
if(onOff==true){
document.getElementById('a').style.display=‘ block';
onOff=false;
}else{
document.getElementById('a').style.display=‘ none';
onOff=true;
}

對于一組標(biāo)簽的單個屬性設(shè)置栈源，前面加 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=‘a(chǎn)ction’;
                };
};

預(yù)覽圖：

圖片發(fā)自簡書App

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+'圣誕節(jié)快樂'；
};

Day 3—

做點選顯示時，給<li>自定義索引屬性聊倔，for循環(huán)控制單個顯示晦毙，清空顯示樣式生巡。

例：

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(運算或數(shù)據(jù)轉(zhuǎn)換出錯)见妒。

函數(shù)傳參：

<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（）函數(shù)對數(shù)組函數(shù)內(nèi)容進(jìn)行增加或刪除孤荣。
1.替換：

var arr = ["前端","圣誕","熱情","開心"];
arr.splice(1,2,"春節(jié)");
console.log(arr);

輸出： ["前端","春節(jié)","熱情","開心"];

2.添加：

var arr = ["前端","圣誕","熱情","開心"];
arr.splice(1,0,"春節(jié)");
console.log(arr);

輸出： ["前端","春節(jié)","圣誕","熱情","開心"];

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.字符串、數(shù)組的拼接：

var arr1=["前端","圣誕","熱情","開心"];
var arr2=["后端","春節(jié)","冷漠","失落"];

var arr = arr1.concat(arr2);
console.log(arr);

輸出：["前端","圣誕","熱情","開心","后端","春節(jié)","冷漠","失落"];

5.將數(shù)組函數(shù)轉(zhuǎn)換成字符串函數(shù)：

var arr = ["大家","春節(jié)","快樂"];
var str = arr.join("");
console.log(str);

輸出：大家春節(jié)快樂

注：join函數(shù)里寫間隔符（默認(rèn)以须揣，間隔）盐股，不寫則無間隔符。

6.數(shù)組排序：
(1)數(shù)字排序：

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);

重要３芸ā疯汁！冒泡排序（將最大值一次放在數(shù)組最后）：

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

日期函數(shù):
(1) 獲取系統(tǒng)當(dāng)前時間(根據(jù)格林尼治時間劃分)

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() 函數(shù)可重復(fù)執(zhí)行
setTimeout() 函數(shù)只執(zhí)行一次
注:創(chuàng)建計時器,時間間隔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

獲取計算后樣式(可獲得行間內(nèi)聯(lián)樣式):

var style = getComputedStyle(標(biāo)簽名);
var xxx = style.xxx;  //屬性

另(IE):

var abc = 標(biāo)簽名.currentStyle.屬性名;

獲得計算后樣式函數(shù)例子:

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>