用webpack模块化搭建炫酷数字特效

最新推荐文章于 2022-09-20 18:56:28 发布

啥时候能干全栈

最新推荐文章于 2022-09-20 18:56:28 发布

阅读量149

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_42177478/article/details/104807607

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

2020-3-11

效果：鼠标点击中心素数会随机飘落，上方数字增加，素数带有随机颜色；
在这里插入图片描述

准备工作
在package.json中进行配置；（run devnpm 实时webpack, 结束ctrl+c）

 "scripts": {
    "dev": "webpack --mode=development --watch",
    "bulid": "webpack --mode=production"

目录结构
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            min-height: 100%;
            background: #172f38;
            color: #d7dbdd;
            margin: 0;
            padding: 20px;
            cursor: pointer;
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .container span {
            float: left;
            min-width: 2em;
            margin-right: 10px;
        }

        .center {
            position: fixed;
            left: 50%;
            top: 50%;
            font-size: 8em;
            color: rgba(255, 255, 255, .7);
            transform: translate(-50%, -50%);
            /* 针对opactiy，变化函数使用ease-in，延迟0.3s变化，变化时在0.7s完成
               针对其他css属性，变化函数使用ease-in，变化总时间1s
             */
            transition: all 1s ease-in, opacity 0.7s ease-in 0.3s;
        }
    </style>
</head>

<body>
    <div id="divContainer" class="container">
    </div>
    <div id="divCenter" class="center">
    </div>

    <script src="main.js"></script>
</body>

</html>

appenNumber.js

import radColor from "../util/radColor"
import { getRandom } from "../util/radColor"
import $ from "jquery";

var divContainer = $("#divContainer");
var divCenter = $("#divCenter");

export default function (n, isPrime) {
    var span = $("<span>").text(n);
    if (isPrime) {
        var color = radColor();
        span.css("color", color);
        createCenterPrimeNumber(n, color)
    }
    divContainer.append(span);
    //产生中间的数字
    createCenterNumber(n);
}

function createCenterNumber(n) {
    divCenter.text(n)
}

/**
 * 在中间产生一个素数
 * @param {*} n 
 */
function createCenterPrimeNumber(n, color) {
    var div = $("<div>").addClass("center").css("color", color).text(n);
    $("body").append(div);
    //加入了div后，强行让页面重新渲染
    getComputedStyle(div[0]).left; //只要读取某个元素的位置或尺寸信息，则会导致浏览器重新渲染 reflow
    div.css("transform", `translate(${getRandom(-200, 200)}px, ${getRandom(-200, 200)}px)`).css("opacity", 0)

}

event.js

import NumberTimer from "../util/number"
import appendNumber from "./appendNumber"
var n = new NumberTimer(100);
n.onNumberCreated = function (n, isPrime) {
    appendNumber(n, isPrime);
}

//该模块用于注册事件
var isStart = false; //默认没有开始

window.onclick = function () {
    if (isStart) {
        n.stop();
        isStart = false;
    }
    else {
        n.start();
        isStart = true;
    }
}

isPrame.js

/**
 * 判断n是否是素数
 * 素数：仅能被1和自身整除
 * 6    2，5
 * @param {*} n 
 */
export default function (n) {
    if (n < 2) {
        return false;
    }
    for (let i = 2; i <= n - 1; i++) {
        if (n % i === 0) {
            //发现，2到n-1之间，有一个数能整除n
            return false;
        }
    }
    return true;
}

number.js

import isPrime from "./isPrime"

export default class NumberTimer {

    constructor(duration = 500) {
        this.duration = duration;
        this.number = 1; //当前的数字
        this.onNumberCreated = null; //当一个数字产生的时候，要调用的回调函数
        this.timerId = null;
    }

    start() {
        if (this.timerId) {
            return;
        }
        this.timerId = setInterval(() => {
            this.onNumberCreated && this.onNumberCreated(this.number, isPrime(this.number))
            this.number++;
        }, this.duration)
    }

    stop() {
        clearInterval(this.timerId);
        this.timerId = null;
    }
}

radColor.js

var colors = ["#f26395", "#62efab", "#ef7658", "#ffe868", "#80e3f7", "#d781f9"];
export function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
/**
 * 返回一个随机的颜色
 */
export default function () {
    var index = getRandom(0, colors.length);
    return colors[index];
}

index.js

import "./page/event"

啥时候能干全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用webpack模块化搭建炫酷数字特效

2020-3-11效果：鼠标点击中心素数会随机飘落，上方数字增加，素数带有随机颜色；准备工作在package.json中进行配置；（run devnpm 实时webpack, 结束ctrl+c） "scripts": { "dev": "webpack --mode=development --watch", "bulid": "webpack --mode=produc...
复制链接

扫一扫

专栏目录