前言

繼續總結過程中學到的新知識，這是第4部分,也是最後一部分。
主要是實現 頁面變速展示的 效果

一、創建button按鈕

1 HTNL結構

<div class="action">
    <button data-speed="slow">慢速</button>   <!-- 自定義屬性 -->
    <button data-speed="normal" class="active">中速</button>
    <button data-speed="fast">快速</button>
</div>
 

2 設置按鈕的一般樣式

.actions{
  position: absolute;
  top: 0;
  right: 0;
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
}

.actions>button{
  margin: 10px;
  padding: 8px 10px;
  background: #ddd;
  border: none;     /*去除默認按鈕的 邊框樣式*/
}

3 設置被選中按鈕的樣式

.actions>button.active{
  box-shadow: 1px 1px 1px rgba(0,0,0,0.8);    /* box-shadow樣式*/
}

/* .actions>button:focus{
  outline: none;}        去除默認按鈕的 選中邊框顏色
*/ 
 

二、引入jquery

1 安裝初始化yarn，用yarn引入jquery依賴

?yarn官網

2 創建.gitignore文件來忽略 node_mldules

?用git status -sb 命令行 查看是否忽略成功

3 強制引入node_mldules裏的 單個jquery文件

?用 git add -f node_modules/jquery/dist/jquery.min.js 命令行 強制添加

4 在index.html裏 引入jquery

三、用jquery監聽綁定按鈕並設置速度

1 設置動態改變active的所屬

$(‘.actions‘).on(‘click‘, ‘button‘, function(e){
    let $button = $(e.currentTarget)      //當前指向元素button
    let speed = $button.attr(‘data-speed‘)  //獲取其屬性值
    console.log(speed)
    $button.addClass(‘active‘)       //增加類
      .siblings(‘.active‘).removeClass(‘active‘) //去除兄弟元素類
......
})
 

2 實現點擊變速按鈕後，真的也改變展示速度

因為setInterval只會讀取一次 延遲時間的值，所以不能實現改變展示速度；
這時候，我們可以用 SetTimeOut()來實現（通過遞歸）

var duration = 20
  function writeCode(prefix,code,fn){
    let container = document.querySelector(‘#code‘)
    let styleTag = document.querySelector(‘#styleTag‘)
    let n = 0
                                // let id = setInterval(() => {
    setTimeout(function run(){
      n+=1;
      container.innerHTML = code.substring(0,n)
      styleTag.innerHTML = code.substring(0,n)
      container.scrollTop = container.scrollHeight
      if(n < code.length){
        setTimeout(run, duration)    //再次遞歸調用setTimeout
      }else{
        fn && fn.call()
      }
    }, duration)
  }

3 通過點擊按鈕，就改變 duration的值，就可以實現展示速度變化

$(‘.actions‘).on(‘click‘, ‘button‘, function(e){
    let $button = $(e.currentTarget) // button
    let speed = $button.attr(‘data-speed‘)
    console.log(speed)
    $button.addClass(‘active‘)
      .siblings(‘.active‘).removeClass(‘active‘)
    switch (speed){
      case ‘slow‘:
        duration = 100
        break
      case ‘normal‘:
        duration = 50
        break
      case ‘fast‘:
        duration = 10
        break
    }
  })
  
  function writeCode(prefix,code,fn){
    let container = document.querySelector(‘#code‘)
    let styleTag = document.querySelector(‘#styleTag‘)
    let n = 0
    // let id = setInterval(() => {
    setTimeout(function run(){
      n+=1;
      container.innerHTML = code.substring(0,n)
      styleTag.innerHTML = code.substring(0,n)
      container.scrollTop = container.scrollHeight
      if(n < code.length){
        setTimeout(run, duration)
      }else{
        fn && fn.call()
      }
    }, duration)
  }

四 Reference

??1 data開頭的屬性;
??2 box-shadow介紹;
??3 yarn官網;
??4 jQuery 中文文檔;

畫一個皮卡丘項目小結（4）