江河地笑
江河地笑

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

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

目录​​​​​​​​​​​​​​

简单案例

中级案例

简单案例

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

html,js代码移植到vue项目上_第1张图片

代码如下





    
    
    
    Document

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

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

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

改成vue中的代码 

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

中级案例

html,js实现时钟

html,js代码移植到vue项目上_第2张图片

原目录结构

html,js代码移植到vue项目上_第3张图片

代码如下

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是引用展示页面

html,js代码移植到vue项目上_第4张图片html,js代码移植到vue项目上_第5张图片

 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,javascript,html)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 2018-07-20 韻梅
    念亲爱的好感谢亲爱的每天照顾我们！因为有你我们心里踏实！念儿子的好儿子感谢你昨晚为我们煎手抓饼，让我们感到你满满的爱与幸福:你煎的与外边买的没有区别，也是脆脆的金黄黄的！我也不担心你的温饱问题，因为你能自己做简单的点心啊！儿子已经长大了，妈妈可要享福了咯！儿子加油！只要你敢想敢行动定能会成功的！
  • 母亲节如何做小红书营销 美橙传媒
    小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • 收获的日子 YCH花朵儿
    今天是个收获的日子，是个信心满满的日子，是个我下决心需要改变的日子，因为今天我加入了:正能量满满的锦明老师的亲子大家庭，以后的日子我们晨昏相伴共同进步，我会跟着群主认真学习，感悟，分享，让自己和孩子一起成长！
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 幸福需要发现的眼睛 Thinking_f826
    早上去上班，快到单位门口远远地发现同事和媳妇手牵手一起走来，看到他们满满的幸福要溢出的样子，好生羡慕。我发现身边总有一些感觉很幸福的朋友，一点点事情，有时在我看来就是故意的大惊小怪，特别是那夸张的语气和表情，真令人受不了。比如说——我认为一个不咋好笑的事情，她们能笑上好久；我觉得生活好苦好累，而她们却能从一点点事情，哪怕是一顿饭中寻找到乐趣；我理解的平淡，她们认为很无趣；我理解的喧嚣和夸张，她们认
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 干货|自我介绍这三个坑，99%的概率你踩过！ 夏麦生命的魔术师
    自我介绍——每个人都需要的一张名片。图片源自网络从2018年到现在，在做演讲俱乐部的2年时间里，我在演讲活动现场听过1000+人的自我介绍，自我介绍做得超棒的人真不多！最近，我花了近几个月时间，仔细研究了500+人线上场景的自我介绍，发现优秀的自我介绍也不多！为什么做一张优秀的自我介绍就这么难呢？这个问题，在我帮几十个人打造了自我介绍的过程一直困扰着我。经过了几个月的时间思考与实践，终于发现三个—
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • 小学科学课堂管理规培有感 31c6a3d23d4e
    今天进行了这学期的第一次新教师规培，又是干货满满的一次学习，两位有经验的老教师分享了自己很多年来有关科学教学的经验。苏老师的语言风趣幽默，通过他的课堂管理规则，懂得了语言的艺术。艳姐分享的培养小助手，对我的帮助很多，小组长，（做记录、整理材料、管理卫生）。既培养了学生，又减轻老师的工作量，还有评价表，学起来学起来！
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • Spring中@Value注解，需要注意的地方 无量 springbean@Valuexml
    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中的像素绘制问题 换个号韩国红果果 JavaScriptcanvas
    pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
  • 编码乱码问题 灵静志远 javajvmjsp编码
    1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte
  • java 求几个月后的日期 darkranger calendargetinstance
    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创建数据库 百合不是茶 androidContext创建数据库
           一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper     一:SQLiteOpenHelper创建数据库:   1,SQLi
  • 浅谈group by和distinct bijian1013 oracle数据库group bydistinct
            group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。         譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta
  • vi opertion 征客丶 macoprationvi
    进入 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 iosiOS发布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 clanguagemalloc
    /* 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 javasql
    1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个： 　　他们对PreparedStatements不了解 　　他们认为使用PreparedStatements太慢了 　　他们认为写Prepar
  • 世纪互联与结盟有感 阿尔萨斯
    10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。 全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他