前言

继续总结过程中学到的新知识，这是第4部分,也是最后一部分。
主要是实现 页面变速展示的 效果

一、创建button按钮

1 HTML结构

<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)      //当前指向元素buttonlet speed = $button.attr('data-speed')  //获取其属性值console.log(speed)$button.addClass('active')       //增加类.siblings('.active').removeClass('active') //去除兄弟元素类
......
})

2 实现点击变速按钮后，真的也改变展示速度

因为setInterval只会读取一次 延迟时间的值，所以不能实现改变展示速度；
这时候，我们可以用 SetTimeOut()来实现（通过递归）

var duration = 20function 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.scrollHeightif(n < code.length){setTimeout(run, duration)    //再次递归调用setTimeout}else{fn && fn.call()}}, duration)}

3 通过点击按钮，就改变 duration的值，就可以实现展示速度变化

$('.actions').on('click', 'button', function(e){let $button = $(e.currentTarget) // buttonlet speed = $button.attr('data-speed')console.log(speed)$button.addClass('active').siblings('.active').removeClass('active')switch (speed){case 'slow':duration = 100breakcase 'normal':duration = 50breakcase 'fast':duration = 10break}})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.scrollHeightif(n < code.length){setTimeout(run, duration)}else{fn && fn.call()}}, duration)}

四 Reference

  1 data开头的属性;
  2 box-shadow介绍;
  3 yarn官网;
  4 jQuery 中文文档;