江河地笑

html,js代码移植到vue项目上

对于我们这些学了一年左右的前端萌新来说，用好vue已经是很难得了，但是慢慢的我需要提高自己的技术，比如看了一些前端特效什么的，但是这些前端特效都是js,html的文件，我们无法直接利用这些文件，我们如何把这些移植到vue上，这是这篇文章所探讨的问题

简单案例

中级案例

简单案例

直接先上一个html,js的简单特效案例，一个小球自由落体并弹跳的特效

代码如下





    
    
    
    Document

可以看出代码并不复杂，里面的代码如何写的我不做解释，你可以去看其他博客，也可以私聊我

我需要把这html放到vue文件中并且能运行

先看结构，一个ball变量 3个方法，其中一个方法是主方法（window.onload方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法）

改成vue中的代码

基本很简单，就是把三个方法写在method里面，一个主方法放在mouted调用

中级案例

html,js实现时钟

原目录结构

代码如下

arr.js

var arr = [
    // 0
    [
        [0, 0, 1, 1, 1, 0, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 0, 1, 1, 0],
        [0, 0, 1, 1, 1, 0, 0]
    ],

    // 1
    [
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
    ],
    // 2
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 1, 1, 1, 1, 1],
    ],

    // 3
    [
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 1, 0, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],

    // 4
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 1, 1, 0],
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 1],
    ],
    // 5
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 6
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 7
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
    ],
    // 8
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 9
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
    ],

    // :
    [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],

    ]
]

index.html





    
    
    
    Document

index.js

const WINDOW_WIDTH = 1000;
const WINDOW_HEIGHT = 800;
const RADIUS = 6;
const MARGIN_LEFT = 80;
const MARGIN_TOP = 60;
var now = new Date()
var balls = []
const colors = ['#33BEE5', '#0099CC', '#9933CC', '#AA66CC', '#669900', '#FFBB33', '#FF8800', '#FF4444', 'pink', 'yellow']
window.onload = function () {
    var canvas = document.querySelector('canvas')
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT
    var context = canvas.getContext('2d')

    setInterval(() => {
        render(context);
        update()
    }, 40);
}

function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    renderArr(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
    renderArr(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);
    renderArr(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
    renderArr(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
    renderArr(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
    renderArr(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);


    for (var i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color;
        cxt.beginPath()


        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
    }

    ballsUpdate()
    console.log(balls.length);

}


function ballsUpdate() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].v_x;
        balls[i].y += balls[i].v_y;
        balls[i].v_y += balls[i].g;

        if (balls[i].y >= 800 - RADIUS) {
            balls[i].y = 800 - RADIUS
            balls[i].v_y = -balls[i].v_y * 0.4
        }
    }

    // 性能优化，销毁球
    var t = 0;
    for (let i in balls) {
        if ((balls[i].x + RADIUS) > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) {
            balls[t++] = balls[i];
        }
    }

    while (balls.length > Math.min(300, t)) {
        balls.pop();
    }
}






// 更新时间
function update() {
    // 现在的时间
    var cur_now = new Date()
    var cur_hours = cur_now.getHours();
    var cur_minutes = cur_now.getMinutes();
    var cur_seconds = cur_now.getSeconds();

    // 上一秒的时间
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // 时间不= 就把新时间给旧时间
    if (cur_now != now) {
        now = cur_now;
    }

    // 旧时间和新时间 哪里不一样就改哪里
    if (parseInt(cur_hours / 10) != parseInt(hours / 10)) {
        addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(cur_hours / 10))
    }
    if (parseInt(cur_hours % 10) != parseInt(hours % 10)) {
        addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_hours % 10))
    }
    if (parseInt(cur_minutes / 10) != parseInt(minutes / 10)) {
        addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes / 10))
    }
    if (parseInt(cur_minutes % 10) != parseInt(minutes % 10)) {
        addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes % 10))
    }
    if (parseInt(cur_seconds % 10) != parseInt(seconds % 10)) {
        addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds % 10))
    }
    if (parseInt(cur_seconds / 10) != parseInt(seconds / 10)) {
        addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds / 10))
    }


}



// 绘制时间
function renderArr(x, y, num, cxt) {
    cxt.fillStyle = 'skyblue'
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                cxt.beginPath();
                cxt.arc(x + j * 2 * (RADIUS + 1), y + i * 2 * (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
                cxt.closePath()
                cxt.fill()
            }
        }
    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                var one_ball = {
                    x: x + j * 2 * (RADIUS + 1),
                    y: y + i * 2 * (RADIUS + 1),
                    g: 1.5 * Math.random(),
                    v_x: i % 2 == 1 ? -4 : 4,
                    v_y: Math.ceil(Math.random() * 10),
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(one_ball)
            }
        }
    }
}

开始转换，把这些代码移植到vue中，arr.js,index.js放的位置，Test.vue是引用展示页面

arr.js就加了导出

export const arr = [
    // 0
    [
        [0, 0, 1, 1, 1, 0, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 0, 1, 1, 0],
        [0, 0, 1, 1, 1, 0, 0]
    ],

    // 1
    [
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
    ],
    // 2
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 1, 1, 1, 1, 1],
    ],

    // 3
    [
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 1, 0, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],

    // 4
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 1, 1, 0],
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 1],
    ],
    // 5
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 6
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 7
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
    ],
    // 8
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 9
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
    ],

    // :
    [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],

    ]
]

index.js 引入arr.js，导出init 并把docment的语句删了，传入参数，再在Test.vue中调用init并传入this.$refs.canvas这参数

import {arr} from './arr.js'
const WINDOW_WIDTH = 1000;
const WINDOW_HEIGHT = 800;
const RADIUS = 6;
const MARGIN_LEFT = 80;
const MARGIN_TOP = 60;
var now = new Date()
var balls = []
const colors = ['#33BEE5', '#0099CC', '#9933CC', '#AA66CC', '#669900', '#FFBB33', '#FF8800', '#FF4444', 'pink', 'yellow']
export function init(canvas) {
//删除换到vue文件中，这里不能直接this.$refs.canvas
//    var canvas = document.querySelector('canvas')


    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT
    var context = canvas.getContext('2d')

    setInterval(() => {
        render(context);
        update()
    }, 40);
}

function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    renderArr(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
    renderArr(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);
    renderArr(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
    renderArr(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
    renderArr(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
    renderArr(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);


    for (var i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color;
        cxt.beginPath()


        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
    }

    ballsUpdate()
    console.log(balls.length);

}


function ballsUpdate() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].v_x;
        balls[i].y += balls[i].v_y;
        balls[i].v_y += balls[i].g;

        if (balls[i].y >= 800 - RADIUS) {
            balls[i].y = 800 - RADIUS
            balls[i].v_y = -balls[i].v_y * 0.4
        }
    }

    // 性能优化，销毁球
    var t = 0;
    for (let i in balls) {
        if ((balls[i].x + RADIUS) > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) {
            balls[t++] = balls[i];
        }
    }

    while (balls.length > Math.min(300, t)) {
        balls.pop();
    }
}






// 更新时间
function update() {
    // 现在的时间
    var cur_now = new Date()
    var cur_hours = cur_now.getHours();
    var cur_minutes = cur_now.getMinutes();
    var cur_seconds = cur_now.getSeconds();

    // 上一秒的时间
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // 时间不= 就把新时间给旧时间
    if (cur_now != now) {
        now = cur_now;
    }

    // 旧时间和新时间 哪里不一样就改哪里
    if (parseInt(cur_hours / 10) != parseInt(hours / 10)) {
        addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(cur_hours / 10))
    }
    if (parseInt(cur_hours % 10) != parseInt(hours % 10)) {
        addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_hours % 10))
    }
    if (parseInt(cur_minutes / 10) != parseInt(minutes / 10)) {
        addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes / 10))
    }
    if (parseInt(cur_minutes % 10) != parseInt(minutes % 10)) {
        addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes % 10))
    }
    if (parseInt(cur_seconds % 10) != parseInt(seconds % 10)) {
        addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds % 10))
    }
    if (parseInt(cur_seconds / 10) != parseInt(seconds / 10)) {
        addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds / 10))
    }


}



// 绘制时间
function renderArr(x, y, num, cxt) {
    cxt.fillStyle = 'skyblue'
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                cxt.beginPath();
                cxt.arc(x + j * 2 * (RADIUS + 1), y + i * 2 * (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
                cxt.closePath()
                cxt.fill()
            }
        }
    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                var one_ball = {
                    x: x + j * 2 * (RADIUS + 1),
                    y: y + i * 2 * (RADIUS + 1),
                    g: 1.5 * Math.random(),
                    v_x: i % 2 == 1 ? -4 : 4,
                    v_y: Math.ceil(Math.random() * 10),
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(one_ball)
            }
        }
    }
}

Test.vue

大功告成！！！

Vue.js组件开发-实现全屏背景图片滑动切换特效 LCG元前端 vue.js 前端 javascript
使用Vue实现全屏背景图片滑动切换特效的详细步骤、代码、注释和使用说明。步骤创建Vue项目：使用VueCLI创建一个新的Vue项目。准备图片资源：准备好要用于背景切换的图片，并将它们放在项目的合适目录下。编写HTML结构：创建一个包含图片容器和导航按钮的HTML结构。编写CSS样式：设置全屏背景和图片切换动画效果。编写Vue组件逻辑：实现图片切换的逻辑。详细代码1.创建Vue项目首先，确保已经安装
NPM 使用介绍 lly202406 开发语言
NPM使用介绍引言NPM（NodePackageManager）是Node.js生态系统中的一个核心工具，用于管理JavaScript项目的依赖包。无论是开发一个小型脚本还是构建大型应用程序，NPM都能极大地提高开发效率。本文将详细介绍NPM的使用方法，包括安装、配置、依赖管理、包发布等，帮助您快速上手NPM。安装NPM在开始使用NPM之前，您需要确保已经安装了Node.js。NPM与Node.j
【华为机试真题JavaScript】尼科彻斯定理 forest_long 华为机试真题-JS 动态规划 javascript python java 华为
目录题目描述输入描述输出描述参考示例参考代码机试介绍写在最后题目描述验证尼科彻斯定理，即：任何一个整数m的立方都可以写成m个连续奇数之和。例如：1^3=12^3=3+53^3=7+9+114^3=13+15+17+19输入一个正整数m（m≤100），将m的立方写成m个连续奇数之和的形式输出。数据范围：1≤m≤100进阶：时间复杂度：O(m)，空间复杂度：O(1)输入描述输入一个int整数输出描述输
语言模型与向量模型：深入解析与实例剖析 ♢.＊语言模型人工智能自然语言处理
亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、Java与Python的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！在自然语言处理领域，语言模型和向量模型
kotlin扩展函数！啃下这些Framework技术笔记，醍醐灌顶！_kotlin framework features 2401_89694162 笔记
前言选了开发这一行，就意味着想混得好就要持续学习，你的技术和薪资、位置直接挂钩，进步对于程序员的重要性就不赘述了，接下来作为过来人，为广大同行分享一些学习干货，希望可以帮到大家什么是HTTPS?HTTPS(基于安全套接字层的超文本传输协议或者是HTTPoverSSL)是一个Netscape开发的Web协议。你也可以说：HTTPS=HTTP+SSLHTTPS在HTTP应用层的基础上使用安全套接字层作
Python 调用常见大模型 API 全解析 ♢.＊ python 开发语言语言模型 nlp
亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、JAVA、PYTHON与SAP的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！调用通义千问接口获取APIKe
【课程设计推荐】基于JSP的论文格式化系统后台模块的设计与实现想念@思恋课程设计 jsp java 课程设计 java jsp
关注【墨岚创客】，回复【毕设】，赠送免费毕设资源，具体联系方式见文末摘要论文的格式修改是一件很麻烦的事情，一篇论文在定稿以前为了让格式达到标准，需要修改很多次，浪费了大量时间。本系统的设计初衷就是为了解决论文书写格式的规范化，方便学者论文格式的自动生成。本系统是基于Java平台的Web应用程序。采用JSP作为后台开发语言，HTML和JavaScript作为前台开发语言，MYSQL5.0作为后台数据
Vue2之 v-if VS v-show 问老大前端 javascript 开发语言 vue.js
Vue2中的v-if和v-show都是用来实现条件性渲染的指令，用于控制元素显示与隐藏的指令，但它们在实现机制和使用场景上有所不同：一、实现机制：1.1、v-if当条件表达式为真时，Vue.js会根据条件动态地创建或销毁对应的DOM元素。当条件为假时，Vue.js会销毁对应的DOM元素，并且从DOM中移除。每次条件改变时，Vue.js都会重新进行DOM的创建或销毁，这可能会导致性能开销较高，尤其是
javascript使用字符串作为参数报错的问题 jumptigerfu 前端问题&解决方案 elementui 前端 flask javascript python
原因:因为直接字符串作为参数需要加单引号,不然就判定为为定义的参数functionoption(value,row,index){varhtm="";htm+='导入'returnhtm;}解决方案:onclick里面加入转义字符\'functionoption(value,row,index){varhtm="";htm+='导入'returnhtm;}完美解决
Vue 响应式渲染 - 模板语法 JSON_L 前端 #Vue vue.js 前端 javascript
Vue渐进式JavaScript框架基于Vue2的学习笔记-Vue响应式渲染-模板语法目录模板语法渲染变量（状态）绑定事件简写事件修改属性样式修改绑定图片路径动态显示和隐藏总结模板语法渲染变量（状态）在页面中直接渲染变量。示例如下：Title{{myname}}newVue({el:"#box",//elementdata:{myname:'我的名字是张三'}})绑定事件增加按钮，并对按钮绑定点击
全面解析：HTML页面的加载全过程(六）--浏览器渲染之分层 - Layer huazi99于老师 html 前端
分层原因在生成布局树之后，渲染进程会将一些复杂的3D动画、滚动条、高z-index的元素生成图层，并生成图层树交给GPU加速渲染。页面设计复杂，并且交互效果多。如不分层，用户的一个简单交互将导致整个页面的重新渲染，效率低下。分层好处‌通过分层，浏览器可以将复杂的页面元素分离成不同的图层，每个图层可以独立地进行渲染和更新，从而减少重排和重绘的次数。例如，当用户滚动页面时，只有可视区域的内容会被重新绘
Python中使用SQLite 昂热校长
开发十年，就只剩下这套Java开发体系了>>>SQLite：SQLite是一种数据库，Python中集成了SQLite3，所以在Python中使用SQLite，可以直接导入SQLite包，不需要做额外的配置。更多的SQLite简介和相关知识可以查看专门的教程：http://www.runoob.com/sqlite/sqlite-tutorial.htmlPython中使用SQLite:可以直接像
深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据我的青春不太冷服务器前端运维
深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据一、服务器如何响应前端请求前端与后端的交互主要通过HTTP协议实现。以下是详细步骤：1.前端发起HTTP请求GET请求：用于从服务器获取数据。POST请求：用于向服务器提交数据。例如，使用JavaScript的fetchAPI发送POST请求：fetch('https://example.com/api/data',{method:'PO
JavaScript逆向高阶指南：突破基础，掌握核心逆向技术不做超级小白 web逆向知识碎片 web前端 javascript 开发语言 ecmascript
JavaScript逆向高阶指南：突破基础，掌握核心逆向技术JavaScript逆向工程是Web开发者和安全分析师的核心竞争力。无论是解析混淆代码、分析压缩脚本，还是逆向Web应用架构，掌握高阶逆向技术都将助您深入理解复杂JavaScript逻辑。本文将通过实战案例，带您探索JavaScript逆向的深层技术原理。1.JavaScript反混淆实战现代Web应用常采用多重混淆技术保护代码，以下为高
小白一命速通JS中的window&global对象不做超级小白 web前端 javascript 开发语言 ecmascript
笔者注意到JS中的window对象与global对象经常被混淆，尽管它们在相当一部分使用情况下可以等同，但是本质上仍然存在很多不同，下面是对于两者的详细拆解1.window对象定义：window对象表示浏览器环境中的全局上下文。作用域：它是浏览器中运行的任何JavaScript代码的顶级对象。关键特性：包含所有通过var声明的全局变量和函数（在非模块脚本中）。表示浏览器的窗口或框架，代码运行在其中
区块链学习资料 sunchenzl 区块链学习资料
本文列举了关于区块链和数字加密技术的文章和资源，分为以下几个部分：构建区块和基础；基础（和历史）；关键概念——包括特定课题（例如区块链治理）；隐私和安全；扩展；共识算法、加密货币经济和投资；资金筹集和通证分布；去中心化交易所；稳定货币；加密货币经济原生产品（数字加密收藏品、管理市场、游戏）。最后，文章还提供了开发者教程、实践教程和人物事迹，以及其他资源，例如时事新闻和课程。干货满满哦！1、构建区块
OpenAI 函数调用功能入门 AI火箭 chatgpt openai
Javascript版Langchain入门作者：AI小火箭的HB我是AI小火箭的HB，我探索和写作人工智能和语言交叉点的所有事物，范围从LLM，聊天机器人，语音机器人，开发框架，以数据为中心的潜在空间等。介绍LangChain是一个开源Python库，用于构建由大型语言模型（LLM）支持的应用程序。它提供了一个框架，将LLM与其他数据源（如互联网或个人文件）连接起来，允许开发人员将多个命令链接在
第23节课：前端调试技巧—掌握浏览器开发者工具与性能优化学问小小谢 HTML学习前端性能优化交互 html5 安全学习
目录浏览器开发者工具常见的浏览器开发者工具浏览器开发者工具的基本使用打开开发者工具开发者工具的面板使用开发者工具进行调试Elements面板检查和编辑HTML检查和编辑CSSConsole面板输出日志和调试信息执行JavaScript代码Network面板监控网络请求分析请求和响应Performance面板记录和分析性能优化性能Application面板检查和管理资源调试存储性能优化与调试性能优化
第20节课： jQuery基础—简化JavaScript编程的强大工具学问小小谢 HTML学习 javascript jquery 前端 html 学习交互搜索引擎
目录jQuery简介为什么使用jQuery？jQuery选择器基本选择器属性选择器伪类选择器事件处理事件绑定常见事件类型事件触发动画效果基本动画自定义动画实践：使用jQuery增强网页交互示例：创建一个带有动画效果的按钮示例：创建一个交互式的导航菜单结语在Web开发中，JavaScript是实现网页交互和动态效果的核心语言。然而，原生JavaScript的语法有时显得繁琐，为了提高开发效率，jQu
第2节课：文本内容与格式化——HTML中的文本处理技巧学问小小谢 HTML学习 html 前端学习
目录文本内容与格式化：段落和标题：构建文本基础段落``标题``到``格式化：强调和样式加粗``斜体``下划线``列表：组织内容无序列表``有序列表``定义列表``实践：创建一个内容丰富的网页结语文本内容与格式化：在网页设计中，文本是传达信息的核心元素。HTML提供了多种方式来创建和格式化文本，使其既美观又易于阅读。在本节课中，我们将深入学习HTML中文本内容的创建和格式化，包括段落、标题、加粗、斜
第5节课：HTML5 新标签——构建更智能的网页结构学问小小谢 HTML学习 html5 前端学习
目录语义化标记的重要性新标签详解````````````实践：使用HTML5新标签构建网页结语随着HTML5的推出，网页开发者们获得了一套新的强大工具——语义标签。这些标签不仅帮助我们更好地组织内容，还使得网页更易于搜索引擎优化（SEO）和辅助技术访问。本节课将深入探讨HTML5中的新语义标签，包括、、、、和，并强调使用这些标签进行语义化标记的重要性。语义化标记的重要性在HTML5之前，我们通常使
代替Winform、Win32控件的一些界面框架Electron,QT等专注VB编程开发20年前端 c++ui 界面框架
以下是一些可以代替Winform、Win32控件，在VC++、VBA等EXE程序上用来做控件元素、表格数据绑定、窗口显示的WEBUI框架和工具：1.Electron特点：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。它允许开发者使用Web技术来创建桌面应用，具有良好的跨平台兼容性。适用场景：适用于需要快速开发跨平台桌面应用的场景，尤其是对UI灵活性和
1.“use strict“ 严格模式 - JS 个人意志想 #Little Points in JS 笔记开发语言 js 学习
JS严格模式JS严格模式是指令在JavaScript1.8.5（ECMAScript5、ES5）开始引入的；是一种旨在消除歧义、语法规范、维护安全的模式；通过语句"usestrict"进行声明。声明与作用域在文件头部声明，整个文件代码都要遵循严格模式；在函数内部开头声明，函数体遵循严格模式；函数的严格模式是最佳选择，没必要整个文件都严格，或者可以一个文件就写一个函数。限制不允许使用未声明的变量（对
JavaScript笔记（5）严格模式 way_hj JavaScript学习笔记 javascript 严格模式 use strict
1.启用严格模式的指令："usestrict"或'usestrict'，即单引号或双引号均可，也许use将来会成为关键字。2."usestrict";以分号结尾，在不支持严格模式的浏览器中（如IE9及以下）被当作一般语句。3.必须作为全局或函数的首条语句才起到严格模式指令的作用，否则即是一条普通语句。usestrict;//严格模式指令必须在首行，如果之前有语句，它将被当作一个普通字符串，而不是启
22、JavaScript学习笔记——ES5严格模式 lvh98 javascript 学习前端
ES5严格模式当前使用的ES语法是基于ES3.0的方法加上ES5.0的新增方法。默认情况下，ES3.0和ES5.0冲突的部分，会沿用ES3.0的方法；而在ES5.0严格模式下，冲突部分会使用ES5.0的方法。1.“usestrict”不再兼容ES3.0的一些不规则语法。使用全新的ES5.0规范。1.1ES5.0严格模式的启动要选择使用严格模式，需要使用严格模式编译指示（pragma），即一个不赋值
用SpringBoot+mysql+html实现ATM 系统总结与扩展 SAFE20242034 #一 SpringBoot spring boot mysql html
这里写目录标题ATM系统总结与扩展项目概述主要功能模块1.用户注册2.用户登录3.账户查询4.存款与取款5.转账6.修改密码7.销户系统改进建议功能扩展技术优化完整代码实现数据库表设计后端代码（SpringBoot示例）1.Account实体类2.AccountRepository接口3.AccountController类前端代码（HTML+JavaScript示例）实际开发与部署步骤**1.开
《JS教程》笔记：一、JavaScript编程语言——2.3现代模式use strict（严格模式、旧模式） Dontla javascript javascript 笔记开发语言
现代JavaScript教程中文版现代JavaScript教程文章目录现代模式，"usestrict""usestrict"确保\"usestrict\"出现在最顶部没有办法取消`usestrict`浏览器控制台默认不启动`usestrict`是否应该显式声明"usestrict"？（非必须，有办法自动启用）现代模式，“usestrict”长久以来，JavaScript不断向前发展且并未带来任何兼
前端el-table导出pdf 努力奋进的前端小菜鸟 javascript 前端 vue.js
1、首先来看下效果图2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件npm i html2Canvas JsPDF其中，html2Canvas负责把html转为图片，JsPDF负责把图片转为pdf文件3、点击按钮触发打印事件//点击按钮触发打印事件button@click='htmlToPdf(节点ID',文件名')'>print//传入打印节点，文件名,
vue3+elementPlus之后台管理系统（从0到1）(day1-项目主体搭建) 沐暖沐 vue.js 前端 javascript
vue3官方文档：https://cn.vuejs.org/guide/introduction.html1、项目创建确保电脑已安装node查看命令：node-v进入项目目录，创建项目npminitvue@latestNeedtoinstallthefollowingpackages:[email protected]?(y)yVue.js-TheProgressiveJav
vue项目html页面生成PDF预览、下载及生成页面水印我是槑槑 Vue html5 vue.js javascript canvas
html2canvas官方文档jspdf官方文档目录概述原理过程中遇到的问题生成的PDF截图代码示例加水印版代码示例现存问题概述因为生成的PDF内还有富文本，后端不好生成PDF，故由前端完成。原理html2canva生成截图，jsPDF利用图片生成PDF。过程中遇到的问题1、生成大于30多页时，容易造成生成页面黑屏问题。原因：canvas生成图片时，对内容高度有一定的限制，超过这个高度，canva
Spring中@Value注解，需要注意的地方无量 spring bean @Value xml
Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac
mongoDB 分片开窍的石头 mongodb
mongoDB的分片。要mongos查询数据时候先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。第一步启动两台以上的mongo服务 &nb
OVER(PARTITION BY)函数用法 0624chenhong oracle
这篇写得很好，引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍开窗函数 &nb
Android开发中，ADB server didn't ACK 解决方法一炮送你回车库 Android开发
首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。 &nb
canvas中的像素绘制问题换个号韩国红果果 JavaScript canvas
pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
编码乱码问题灵静志远 java jvm jsp 编码
1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte
java 求几个月后的日期 darkranger calendar getinstance
Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M
数据库设计的三大范式（通俗易懂） aijuans 数据库复习
关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库. 目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。
想学工作流怎么入手 atongyeye jbpm
工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。系统学习工作流，很重要的一本书《JBPM工作流开发指南》。本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。 1 首先要
Context和SQLiteOpenHelper创建数据库百合不是茶 android Context创建数据库
一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper 一:SQLiteOpenHelper创建数据库: 1,SQLi
浅谈group by和distinct bijian1013 oracle 数据库 group by distinct
group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta
vi opertion 征客丶 mac opration vi
进入 command mode （命令行模式）按 esc 键再按 shift + 冒号注：以下命令中带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行数字
【Spark十四】深入Spark RDD第三部分RDD基本API bit1129 spark
对于K/V类型的RDD,如下操作是什么含义？ val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect reduceByKey在这里的操作，是把
java类加载机制 BlueSkator java 虚拟机
java类加载机制 1.java类加载器的树状结构引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。虚拟机区分一个Cla
动态添加文本框 BreakingBad 文本框
<script> var num=1; function AddInput() { var str=""; str+="<input
读《研磨设计模式》-代码笔记-单例模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题 */ class LazySingleton
iOS应用打包发布常见问题 chenhbc ios iOS发布 iOS上传 iOS打包
这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。 1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc
工作流复杂拓扑结构处理新思路 comsci 设计模式工作算法企业应用 OO
我们走的设计路线和国外的产品不太一样，不一样在哪里呢？国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很
oracle 11g新特性Flashback data archive daizj oracle
1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。
多叉树:2-3-4树 dieslrae 树
平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征: 1、有一个数据项的节点总是有2个子节点(称为2-节点) 2、有两个数据项的节点总是有3个子节点(称为3-节
C语言学习七动态分配 malloc的使用 dcj3sjt126com c language malloc
/* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写本程序没有实际含义，只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节静态分配 int * p
Objective-C编码规范[译] dcj3sjt126com 代码规范
原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范译者 : Sam Lau
0.性能优化-目录 frank1234 性能优化
从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。主要内容包括：一、性能测试指标吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略生产环境相同基准测试预热等 htt
Java父类取得子类传递的泛型参数Class类型 happyqing java 泛型父类子类 Class
import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =
跟我学SpringMVC目录汇总贴、PDF下载、源码下载 jinnianshilongnian springMVC
----广告-------------------------------------------------------------- 网站核心商详页开发掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架；掌握数据库技术，表设计和索引优化，分库分表/读写分离；了解缓存技术，熟练使用如Redis/Memcached等主流技术；了解Ngin
the HTTP rewrite module requires the PCRE library 流浪鱼 rewrite
./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s
第12章 Ajax（中） onestopweb Ajax
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
Optimize query with Query Stripping in Web Intelligence blueoxygen BO
http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936
Java开发者写SQL时常犯的10个错误 tomcat_oracle java sql
1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个：　　他们对PreparedStatements不了解　　他们认为使用PreparedStatements太慢了　　他们认为写Prepar
世纪互联与结盟有感阿尔萨斯
10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟

html,js代码移植到vue项目上

中级案例

你可能感兴趣的:(干货满满,vue.js,javascript,html)