Tencent SNG Task

README.md

Tencent SNG Task

README

三个任务

文件说明

• index.html - 主 HTML 文件
• index.js - 编译前主入口 JavaScript 文件
• bullet.js - 弹幕类文件
• dialog.js - 对话框类
• default.css - 默认样式文件
• bundle.js - 利用 webpack 对 index.js 打包后的可执行文件（index.html 中引入的文件已经替换为该文件）

使用说明

点击「开始动画／重制动画」按钮查看 DIV 红块滑动效果（由快至慢 5s 结束）；点击「打开提示／关闭提示」按钮查看使用说明；点击「开始弹幕／结束弹幕」查看弹幕效果，可通过 select 标签选定弹幕播放形式为固定显示或者滚动播放。

bullet.js

/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:24:10 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 20:57:12
 */

const getRandomColor = function () {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

/**
 * 弹幕信息实例类
 */
class Message {
    constructor(props) {
        this.color = getRandomColor();
        this.speed = props.speed || 1;
        this.txt = props.txt;
        this.dynamic = props.dynamic
            ? true
            : false;
        this.top = Math.floor(Math.random() * (props.cHeight - 14));
        this.left = props.cWidth;
    }

    move() {
        this.left -= this.speed;
    }
}

/**
 * 弹幕画布类
 */
class Bullet {
    constructor(props) {
        const {id, width, height, num} = props;

        this.container = {
            id: id || 'bulletCanvas',
            width: width || 400,
            height: height || 400,
            num: num || 100
        };
        this.dynamic = true;
        this.msgs = [];
        this.txtList = [
            'test1',
            'test2',
            'test3',
            'test4'
        ];

        this.generateDataset();
    }

    generateDataset() {
        let callback = function() {
            const txtLen = this.txtList.length,
                dynamic = this.dynamic,
                left = this.container.left,
                txt = this.txtList[ Math.floor( Math.random()*txtLen-0.0000001 ) ],
                speed = this.dynamic ? 1 + Math.floor(Math.random()*3) : 12;

            this.msgs.push(new Message({
                speed,
                txt,
                dynamic,
                cWidth: this.container.width,
                cHeight: this.container.height
            }));
        }

        this.intervalIns = setInterval(callback.bind(this), Math.floor( 1000 / this.container.num ));
    }

    initDisplay(loop = true) {
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        this.startAniFrame = requestAnimationFrame(this.renderFrame.bind(this));
    }

    changeMoveState() {
        this.dynamic = !this.dynamic;
    }

    renderFrame(timestamp) {
        if (!this.start) {
            this.start = timestamp;
        }

        let progress = timestamp - this.start;

        console.log('Timestamp Progress: ', progress);
        if (progress > 40) {
            this.start = timestamp;
            this.renderBullet();
        }

        // requestAnimationFrame(this.renderFrame.bind(this));
        this.startAniFrame = requestAnimationFrame(this.renderFrame.bind(this));
    }

    renderBullet() {
        let canvas = document.getElementById(this.container.id),
            ctx = canvas.getContext("2d"),
            msgs = this.msgs,
            msgLen = msgs.length;

        ctx.clearRect(0, 0, this.container.width, this.container.height);
        ctx.save();

        // 遍历所有实例
        for (let i = 0; i < msgLen; i++) {
            let msgIns = msgs[i];
            // 弹幕实例不为空
            if (msgIns) {
                // 是否释放弹幕实例
                if (msgIns.left < -200) {
                    msgIns = null;
                } else {
                    msgIns.move();
                    let left = msgIns.dynamic ? msgIns.left : this.container.width / 2,
                        top = msgIns.top;
                    
                    ctx.fillStyle = msgIns.color;
                    ctx.fillText(msgIns.txt, left, top)
                    ctx.restore();
                }
            }
        }
    }

    clearBullet() {
        let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

        cancelAnimationFrame(this.startAniFrame);

        let canvas = document.getElementById(this.container.id),
            ctx = canvas.getContext("2d");
            
        ctx.clearRect(0, 0, this.container.width, this.container.height);
        ctx.save();
    }

}

export default Bullet;

bundle.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__bullet__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dialog__ = __webpack_require__(2);
/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:25:47 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 20:47:57
 */






let btn = document.getElementById('aniBtn'),
    box = document.getElementById('box'),
    bullet = document.getElementById('openBullet'),
    canvas = document.getElementById('bulletCanvas'),
    dialogBtn = document.getElementById('showTips');

let bulletIns,
    dialogIns;

/**
 * 对话框
 */
dialogIns = new __WEBPACK_IMPORTED_MODULE_1__dialog__["a" /* default */]({
    id: 'dialog',
    'titleId': 'dialog-title',
    'infoId': 'dialog-info',
    'btnId': 'dialog-btn'
});
dialogIns.bindEvents(dialogIns.toggleDisplay.bind(dialogIns), dialogIns.toggleDisplay.bind(dialogIns));
dialogBtn.addEventListener('click', e => {
    console.log('Click Dialog Btn');
    dialogIns.toggleDisplay();
});

/**
 * 事件绑定
 */
btn.addEventListener('click', e => {
    e.target.innerText = e.target.innerText === '开始动画' ? '重置动画' : '开始动画';
    box.classList.toggle('move');
});

bullet.addEventListener('click', e => {
    if (e.target.innerText === '开始弹幕') {
        e.target.innerText = '结束弹幕';
        
        if (!bulletIns) {
            bulletIns = new __WEBPACK_IMPORTED_MODULE_0__bullet__["a" /* default */]('bulletCanvas', canvas.width, canvas.height, 100);
            bulletIns.initDisplay();
        }
    } else {
        e.target.innerText = '开始弹幕';

        bulletIns.clearBullet();
        bulletIns = null;
    }
});

/**
 * 切换弹幕显示方式：固定位置还是滚动
 */
document.getElementById('moveApproach').onchange = e => {
    if (bulletIns) {
        bulletIns.changeMoveState();
    } else {
        e.preventDefault();
    }
};



/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:24:10 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 20:57:12
 */

const getRandomColor = function () {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

/**
 * 弹幕信息实例类
 */
class Message {
    constructor(props) {
        this.color = getRandomColor();
        this.speed = props.speed || 1;
        this.txt = props.txt;
        this.dynamic = props.dynamic
            ? true
            : false;
        this.top = Math.floor(Math.random() * (props.cHeight - 14));
        this.left = props.cWidth;
    }

    move() {
        this.left -= this.speed;
    }
}

/**
 * 弹幕画布类
 */
class Bullet {
    constructor(props) {
        const {id, width, height, num} = props;

        this.container = {
            id: id || 'bulletCanvas',
            width: width || 400,
            height: height || 400,
            num: num || 100
        };
        this.dynamic = true;
        this.msgs = [];
        this.txtList = [
            'test1',
            'test2',
            'test3',
            'test4'
        ];

        this.generateDataset();
    }

    generateDataset() {
        let callback = function() {
            const txtLen = this.txtList.length,
                dynamic = this.dynamic,
                left = this.container.left,
                txt = this.txtList[ Math.floor( Math.random()*txtLen-0.0000001 ) ],
                speed = this.dynamic ? 1 + Math.floor(Math.random()*3) : 12;

            this.msgs.push(new Message({
                speed,
                txt,
                dynamic,
                cWidth: this.container.width,
                cHeight: this.container.height
            }));
        }

        this.intervalIns = setInterval(callback.bind(this), Math.floor( 1000 / this.container.num ));
    }

    initDisplay(loop = true) {
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        this.startAniFrame = requestAnimationFrame(this.renderFrame.bind(this));
    }

    changeMoveState() {
        this.dynamic = !this.dynamic;
    }

    renderFrame(timestamp) {
        if (!this.start) {
            this.start = timestamp;
        }

        let progress = timestamp - this.start;

        console.log('Timestamp Progress: ', progress);
        if (progress > 40) {
            this.start = timestamp;
            this.renderBullet();
        }

        // requestAnimationFrame(this.renderFrame.bind(this));
        this.startAniFrame = requestAnimationFrame(this.renderFrame.bind(this));
    }

    renderBullet() {
        let canvas = document.getElementById(this.container.id),
            ctx = canvas.getContext("2d"),
            msgs = this.msgs,
            msgLen = msgs.length;

        ctx.clearRect(0, 0, this.container.width, this.container.height);
        ctx.save();

        // 遍历所有实例
        for (let i = 0; i < msgLen; i++) {
            let msgIns = msgs[i];
            // 弹幕实例不为空
            if (msgIns) {
                // 是否释放弹幕实例
                if (msgIns.left < -200) {
                    msgIns = null;
                } else {
                    msgIns.move();
                    let left = msgIns.dynamic ? msgIns.left : this.container.width / 2,
                        top = msgIns.top;
                    
                    ctx.fillStyle = msgIns.color;
                    ctx.fillText(msgIns.txt, left, top)
                    ctx.restore();
                }
            }
        }
    }

    clearBullet() {
        let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

        cancelAnimationFrame(this.startAniFrame);

        let canvas = document.getElementById(this.container.id),
            ctx = canvas.getContext("2d");
            
        ctx.clearRect(0, 0, this.container.width, this.container.height);
        ctx.save();
    }

}

/* harmony default export */ __webpack_exports__["a"] = (Bullet);


/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:31:29 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 20:46:23
 */

class Dialog {
    constructor(props) {
        this.id = props.id || 'dialog';
        this.titleId = props.titleId || 'dialog-title';
        this.infoId = props.infoId || 'dialog-info';
        this.btnId = props.btnId || 'dialog-btn';
    }

    toggleDisplay() {
        const display = document.getElementById(this.id).style.display;
        console.log('Dialog State: ', display);
        switch (display) {
            case 'block':
            document.getElementById(this.id).style.display = 'none';
            break;
            default:
            document.getElementById(this.id).style.display = 'block';
            break;
        }
    }

    setTitle(title) {
        document.getElementById(this.titleId).innerHTML = `<span>${title}</span>`;
    }

    setInfo(info) {
        document.getElementById(this.infoId).innerHTML = info.toString();
    }

    bindEvents(cancalFn, confirmFn) {
        let btns = document.getElementsByClassName('dialogBtnGroup');
        btns[0].addEventListener('click', cancalFn);
        btns[1].addEventListener('click', confirmFn);
    }
}

/* harmony default export */ __webpack_exports__["a"] = (Dialog);


/***/ })
/******/ ]);

default.css

/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:30:15 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 21:01:55
 */

#container {
    width: 90vw;
    height: 90vh;
    margin: 5vh 5vw;
    border: 1px solid #000;
    position: absolute;
}

#box {
    position: absolute;
    left: 0;
    top: 50%;
    width: 50px;
    height: 50px;
    background: #f00;
}

#box.move {
    transition-duration: 5s;
    transition-timing-function: ease-out;
    left: 90%;
    top: 50%;
}

button {
    background-color: #c5c5c5;
    border: none;
    font-size: 1.2rem;
}

select {
    background-color: #c5c5c5;
    font-size: 1.2rem;
}

#dialog {
    position: absolute;
    z-index: 2;
    width: 320px;
    /* height: 80px; */
    background-color: #fff;
    display: none;
    border: 1px solid #8AC007;
    border-radius: 4px;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dialog-title {
    width: 100%;
}
.dialog-title>span {
    text-align: center;
    font-size: 24px;
    line-height: 40px;
    font-weight: bold;
    width: 100%;
    display: inline-block;
}

.dialog-info {
    padding: 12px;
    font-size: 14px;
    line-height: 18px;
}

.dialog-btn {
   display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
   flex-direction: row;
   justify-content: center;
}
.dialog-btn>div {
    background-color: #fff;
    font-size: 1rem;
    padding: 6px;
    border-top: 1px solid #000;
    align-items: stretch;
    flex-grow: 1;
    text-align: center;
}
.dialog-btn>div:last-child {
    border-left: 1px solid #000;
    background-color: #8AC007;
    color: #fff;
}

#bulletCanvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

dialog.js

/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:31:29 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 20:46:23
 */

class Dialog {
    constructor(props) {
        this.id = props.id || 'dialog';
        this.titleId = props.titleId || 'dialog-title';
        this.infoId = props.infoId || 'dialog-info';
        this.btnId = props.btnId || 'dialog-btn';
    }

    toggleDisplay() {
        const display = document.getElementById(this.id).style.display;
        console.log('Dialog State: ', display);
        switch (display) {
            case 'block':
            document.getElementById(this.id).style.display = 'none';
            break;
            default:
            document.getElementById(this.id).style.display = 'block';
            break;
        }
    }

    setTitle(title) {
        document.getElementById(this.titleId).innerHTML = `<span>${title}</span>`;
    }

    setInfo(info) {
        document.getElementById(this.infoId).innerHTML = info.toString();
    }

    bindEvents(cancalFn, confirmFn) {
        let btns = document.getElementsByClassName('dialogBtnGroup');
        btns[0].addEventListener('click', cancalFn);
        btns[1].addEventListener('click', confirmFn);
    }
}

export default Dialog;

index.html

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

<head>
    <title>渐变动画</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./default.css">
</head>

<body>
    <div id="container">
        <button id="showTips">打开提示</button>
        <button id="aniBtn">开始动画</button>  
        <button id="openBullet">开始弹幕</button>
        <select id="moveApproach">
                <option value="dynamic">动态</option>
                <option value="static">静止</option>
            </select>

        <div id="box"></div>

        <canvas id="bulletCanvas" width="400" height="400">
            您的浏览器不支持canvas！
        </canvas>

    </div>

    <div id="dialog">
        <div class="dialog-title"><span>使用说明</span></div>
        <div class="dialog-info">点击「开始动画／重制动画」按钮查看 DIV 红块滑动效果（由快至慢 5s 结束）；点击「打开提示／关闭提示」按钮查看使用说明；点击「开始弹幕／结束弹幕」查看弹幕效果，可通过 select 标签选定弹幕播放形式为固定显示或者滚动播放。</div>
        <div class="dialog-btn">
            <div class="dialogBtnGroup">取消</div>
            <div class="dialogBtnGroup">确定</div>
        </div>
    </div>

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

</html>

index.js

/*
 * @Author: Joe Jiang 
 * @Date:   2017-08-17 19:25:47 
 * @Last Modified by: Joe Jiang
 * @Last Modified time: 2017-08-17 20:47:57
 */

'use strict'

import Bullet from './bullet';
import Dialog from './dialog';

let btn = document.getElementById('aniBtn'),
    box = document.getElementById('box'),
    bullet = document.getElementById('openBullet'),
    canvas = document.getElementById('bulletCanvas'),
    dialogBtn = document.getElementById('showTips');

let bulletIns,
    dialogIns;

/**
 * 对话框
 */
dialogIns = new Dialog({
    id: 'dialog',
    'titleId': 'dialog-title',
    'infoId': 'dialog-info',
    'btnId': 'dialog-btn'
});
dialogIns.bindEvents(dialogIns.toggleDisplay.bind(dialogIns), dialogIns.toggleDisplay.bind(dialogIns));
dialogBtn.addEventListener('click', e => {
    console.log('Click Dialog Btn');
    dialogIns.toggleDisplay();
});

/**
 * 事件绑定
 */
btn.addEventListener('click', e => {
    e.target.innerText = e.target.innerText === '开始动画' ? '重置动画' : '开始动画';
    box.classList.toggle('move');
});

bullet.addEventListener('click', e => {
    if (e.target.innerText === '开始弹幕') {
        e.target.innerText = '结束弹幕';
        
        if (!bulletIns) {
            bulletIns = new Bullet('bulletCanvas', canvas.width, canvas.height, 100);
            bulletIns.initDisplay();
        }
    } else {
        e.target.innerText = '开始弹幕';

        bulletIns.clearBullet();
        bulletIns = null;
    }
});

/**
 * 切换弹幕显示方式：固定位置还是滚动
 */
document.getElementById('moveApproach').onchange = e => {
    if (bulletIns) {
        bulletIns.changeMoveState();
    } else {
        e.preventDefault();
    }
};