炫酷的数字产生特效

一、思维导图

整体功能概述：（显示主体功能然后再阐述具体的添加事件之后的效果）
1.生成1-n的数字（主体部分的数字和中心位置的数字需要同步），然后根据是否是素数添加随机的颜色
2.中间位置的数字如果是素数的话，还需要有淡出的效果
3.主要的一个事件：点击屏幕开始，再次点击之后结束（但是在上次位置暂停）

二、具体代码实现（保姆级别）

2.1 首先在一个目标目录下面进行npm init

生成package.json文件。

2.2 对于生成的package.json文件进行 配置

2.3 安装开发环境依赖webpack和webpack-cli

2.4 创建入口文件

即在目标目录下创建src文件夹，然后写入一个入口文件

2.5 利用webpack自动生成对应的dist文件夹下面的在任何位置都可以运行的js

2.6 在dist目录下生成我们最终想要的文件index.html并且引入main.js

——————————————————-

开发准备结束之后，开始每个功能块的开发

3.1 判断一个数是否是素数（isPrime.js）

/**
 * 判断n是否是素数
 * 这个模块仅仅导出一个函数
 * 传入：一个参数
 * 返回值：布尔值，true或者是false
 * !每次写完代码或者是一个模块之后都应该进行测试
 */
export default function (n) {
    if (n <= 1) {
        return false;
    }
    for (let i = 2; i <= n - 1; i++) {
        if (n % i == 0) {
            return false;
        }
    }
    return true;
}

3.2 生成一个随机的颜色（radColor.js）—这里生成的是rgb（）

// 怎么产生一种随机的颜色呢？
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
export default function(){
    return `rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`;
};

3.3 抽象类—数字（number.js）

// 该模块返回一个类，该类的实例可以产生数字，也可以终止产生数字
import isPrime from '../util/isPrime';
export default class {
    constructor(duration = 500) {
        this.duration = duration;
        this.number = 1; //默认值从1开始，并且通过this不断保存
        this.onCreateNumber = null;
        this.timer = null; //保存计时器的上次位置
    }
    start() {
        // 产生数字的过程就是不断调用计时器函数的过程
        if (this.timer) { //如果已经在产生数字，避免重复产生数字
            return;
        }
        this.timer = setInterval(() => {
            this.number++;
            // 产生一个数字过后，在回调函数中判断该数字是否是素数，明显是一个异步操作（即在产生了数字之后才可以判断）
            this.onCreateNumber && this.onCreateNumber(this.number, isPrime(this.number));
        }, this.duration)
    }
    stop() {
        clearInterval(this.timer);
        this.timer = null;
    }
}

分析：这个模块的目的是导出一个抽象类，在实例化的时候，可以传入一个参数duration时间间隔，这个时间间隔控制了每次产生数字的时间差；
该类具有两个方法，第一个方法是开始，实例调用该方法的时候，不断的产生随机数（但要首先给onCreatNumber赋值，默认值即可）。第二个方法即是结束。
测试代码：

import numberTimer from './util/number';
const n = new numberTimer();
n.onCreateNumber = function (n, isPrime) {
    console.log(n, isPrime);
}
n.start();
setTimeout(() => {
    n.stop();
}, 2000);

三、回顾总结

四、利用github的服务器在线演示demo效果

4.1 回顾git的基本使用

1. 在相对应的项目目录下面git bash here
2. git init 初始化
3. git add . 将所有的工作目录放在暂存区（别忘了写.gitignore）
4. git commit 进行提交
5. git status 查看提交的状态
6. 当 oneline 或 format 与另一个 log 选项 —graph 结合使用时尤其有用。 这个选项添加了一些 ASCII 字符串来形象地展示你的分支、合并历史：git log —pretty=format:”%h %s” —graph
7. 创建新的分支：git branch dev
8. 查看当前分支：git branch
9. 切换分支：git checkout dev

   4.3 从零开始上传到自己的github respsitory

   GitHub在线地址演示： Your site is published at https://bamboo-run.github.io/test111/