indexhtml的代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=f, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         html {
    10.             min-height: 100%;
    11.             background: #172f38;
    12.             color: #d7dbdd;
    13.             margin: 0;
    14.             padding: 20px;
    15.             cursor: pointer;
    16.             box-sizing: border-box;
    17.         }
    19.         body {
    20.             margin: 0;
    21.         }
    23.         .container span {
    24.             float: left;
    25.             min-width: 2em;
    26.             margin-right: 10px;
    27.         }
    29.         .center {
    30.             position: fixed;
    31.             left: 50%;
    32.             top: 50%;
    33.             font-size: 8em;
    34.             color: rgba(255, 255, 255, .7);
    35.             transform: translate(-50%, -50%);
    36.             /* 针对opactiy，变化函数使用ease-in，延迟0.3s变化，变化时在0.7s完成
    37.             针对其他css属性，变化函数使用ease-in，变化总时间1s
    38.              */
    39.             transition: all 1s ease-in, opacity 0.7s ease-in 0.3s;
    40.             transform: translate();
    41.         }
    42.     </style>
    43. </head>
    45. <body>
    46.     <div id="divContainer" class="container">
    47.     </div>
    48.     <div id="divCenter" class="center">
    49.     </div>
    50.       <!--此处引入的是经过webpack一系列操作后的生产环境js代码 -->
    51.     <script src="./main.js"></script>
    52. </body>
    54. </html>

    没有经过webpack 一系列操作的js源码
    工程目录如下 此时安装的依赖包为 jQuery, webpack, webpack-cli
    image.png
    index.js 里的代码

    1. // 事件
    2. import './page/event'

    event.js 代码如下

    1. // 生成数字
    2. import createNumber from '../util/createNumber'
    3. // 添加数字
    4. import appendNumber from './appendNumber'
    6. let num =  new createNumber(600);
    7. let isClick = false;
    8. /**
    9.  * 是否开始生成
    10.  * @param {*} e 
    11.  */
    12. window.onclick = function(e){
    13.     if(!isClick){
    14.         num.start()
    15.         num.callback = appendNumber;
    16.         isClick = true;
    17.     }else{
    18.         num.stop()
    19.         isClick = false;
    20.     }

    createNumber.js 代码如下

    1. // 判断是否为素数
    2. import IsPrimeNumber from './IsPrimeNumber'
    3. /**
    4.  * 生成数字
    5.  */
    6. export default class createNumber {
    7.     constructor(duration = 500 ){
    8.         this.timer = null;
    9.         this.duration = duration;
    10.         this.num = 0;
    11.         this.callback = null;
    12.     }
    13.     // 开始生成数字
    14.     start(){
    15.         if(this.timer){
    16.             return;
    17.         }
    18.         this.timer =  setInterval(() => {
    19.             // 使用回调函数实现对其数字的操作
    20.             this.callback && this.callback(this.num,IsPrimeNumber(this.num))
    21.             this.num++;
    22.         }, this.duration);
    23.     }
    24.     // 暂停生成数字
    25.     stop(){
    26.         clearInterval(this.timer)
    27.         this.timer = null;
    28.     }
    29. }

    IsPrimeNumber.js 代码如下

    1. /**
    2.  *判断是否为素数
    3.  * @param {*} num  需要被判断的数字
    4.  * @returns 当为素数时返回false 
    5.  */
    6. export default function (num) {
    7.     if (num < 2) {
    8.         return false;
    9.     }
    10.     let max = num - 1;
    11.     for (let i = 2; i <= max; i++) {
    12.         if (num % i === 0) {
    13.             return true;
    14.         }
    15.     }
    16.     return false

    appendNumber.js 的代码如下

    1. // 随机rgb格式颜色值
    2. import renderColor from '../util/renderColor'
    3. // 素数动画
    4. import primeNumerMove from '../util/primeNumerMove'
    5. // 引入jQuery
    6. import $ from 'jquery'
    7. const divContainer = $('#divContainer');
    8. const divCenter = $('#divCenter');
    9. /**
    10.  * 添加元素
    11.  * @param {Number} num  需要王元素里添加的数字
    12.  * @param {boolean} isTrue  是否是素数
    13.  */
    14. export default function(num , isTrue){
    15.     divCenter.text(num)
    16.     let span = $('<span>').text(num);
    17.     if(!isTrue){
    18.         let color =  renderColor()
    19.         span.css("color", color)
    20.         primeNumerMove(num,color)
    21.     }
    22.     divContainer.append(span)
    23. }

    renderColor.js 代码如下

    1. //  随机数字
    2. import renderNumber from './renderNumber';
    3. /**
    4.  * @returns 返回一个随机的rgb格式的颜色值
    5.  */
    6. export default function  (){
    7.     let r = renderNumber(255,0);
    8.     let g = renderNumber(255,0);
    9.     let b = renderNumber(255,0);
    10.     return `rgb(${r},${g},${b})`
    12. }

    renderNumber 代码如下

    1. /**
    2.  * 返回俩数字之间的随机数
    3.  * @param {Number} max  最大值
    4.  * @param {Number} min  最小值
    5.  * @returns  返回一个数字
    6.  */
    7. export default function  (max, min){
    8.     return Math.floor( Math.random() * (max - min ) + min)
    9. }

    primeNumerMove 的代码如下

    1. // 随机数字
    2. import renderNumber from './renderNumber'
    3. // 引入jQuery
    4. import $ from "jquery"
    5. /**
    6.  * 素数的动画
    7.  * @param {Number} num  素数
    8.  * @param {String} color  素数的颜色值
    9.  */
    10. export default function(num,color){
    11.     let x = renderNumber(360,-360)
    12.     let y = renderNumber(360,-360)
    13.     let div = $('<div>').addClass('center').text(num).css("color",color)
    14.     $('body').append(div)
    15.     getComputedStyle(div[0]).width;
    16.     div.css({
    17.         'transform':`translate(${x}px,${y}px)`,
    18.         "opacity": 0,
    19.     });
    20. }

    总结：
    jQuery的创建元素 $('<div>') 不是 $('div')
    createNumber.js 中的 如何使用模块化控制数字的样式与动画呢，此时使用的使用回调函数的形式来实现