标签：click   移动   按钮   any   lang   ram   不同的   settime   http   

生成一只皮卡丘

在这篇文章中，学习到了通过 JavaScript 代码，利用定时器每次同时在 HTML 和 CSS 中输入固定的字符达到实时代码预览的效果，其中用到了 prism.js 库给代码添加高亮，用了 marked.js 库把 markdown 转换成 HTML ，并在页面中展示出来。

今天，用了同样的方法，在页面中画一只皮卡丘。

代码链接：GitHub

预览链接：Git Pages

附上 移动端预览：

这里就不赘述整个过程了，但是会把我认为项目中所使用到的主要的知识点(功能)归纳一下：

知识点总结

CSS

• 伪元素的使用

主要用于创建图案，可以设置 position:absolute 调整位置。

• flex

主要用于布局

• translate

当父元素设置 position:relative ，当前元素设置 position:absolute时，用 left:50% 或者 right:50% 调整元素居中位置，还要加上 transform:translateX(-50%)移动当前元素本身宽度的 50% 或者 设置负间距来使元素达到真正的垂直居中。

• border-radius

用于设置元素的圆角，也可以充当椭圆形来来完成一些部位。

• rotate

旋转元素。

• z-index 和 overflow

用于隐藏某些元素。

JS

• 调速功能

给项目添加了调节速度的功能，有三个档次，分别是慢速、中速、高速：

在页面上添加三个按钮，给每个按钮设置不同的 data 属性，然后监听他们的点击事件，点击后改变样式，通过 switch 判断被点击按钮的 data 属性，改变定时器设置的时间变量 duration ，从而实现变速。

$(‘.buttonList‘).on(‘click‘,‘button‘,function(e){
    let $button = $(e.currentTarget)
    let speed = $button.attr(‘data-speed‘)
    $button.addClass(‘active‘)
        .siblings(‘.active‘).removeClass(‘active‘)
    switch(speed){
        case ‘slow‘:
            duration = 80
            break
        case ‘normal‘:
            duration = 50
            break
        case ‘fast‘:
            duration = 10
            break
    }
})

• 用 setTimeout 改写 setInterval

也是通过 JavaScript 代码，利用定时器每次同时在 HTML 和 CSS 中输入固定的字符达到实时代码预览，但是，我们的定时器由之前的 setInterval 替换成 setTimeout。

使用 setInterval ，一旦用户点击调速按钮，setInterval 中设置的 duration 只变化一次，之后还是会切换回默认的 duration。

使用 setTimeout ，用户点击调速按钮后，setTimeout 在使用按钮设定的 duration 后，他可以再次调用 setTimeout ，再次沿用这个 duration ，函数也会按照按钮设置的 duration 一直运行下去，直到任务完成。

具体是怎么实现的呢：

let n = 0
let timer = setTimeout(function run(){
    n = n+1
    domCode.innerHTML = Prism.highlight(prefix + code.substring(0,n), Prism.languages.css)
    domCode.scrollTop = domCode.scrollHeight
    styleTag.innerHTML = prefix + code.substring(0,n)
    if(n 

注意： setTimeout 的回调函数要命名，方便再次调用。

真的总结

好了，其实这个皮卡丘沿用思路和会动的简历差不多，只不过皮卡丘需要使用更多的 CSS，也顺势改动了一点点JS，知道了一点小套路(setTimeout 改 setInterval，老师不说我还真的不知道怎么解决)，总的来说，还需要多磨砺学习。

[JavaScript]生成一只皮卡丘

标签：click   移动   按钮   any   lang   ram   不同的   settime   http   

原文地址：https://www.cnblogs.com/No-harm/p/9720984.html