可爱多小姐
可爱多小姐

【Canvas 02】 百行代码Canvas酷炫倒计时

代码下载：Github
视频地址：慕课·canvas小球倒计时

倒计时

二、倒计时数字展示

2.1、静态数字展示

静态数字展示

如果想用一个一个的圆点来表示数字呢？
其实并不难，将每一个数字看成一个矩阵，比如数字1.

[
        //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]
        ],

我们可以把一个10*7矩阵看作一个led显示屏，如果想要显示某一个数字，只需要把对应的灯点亮。在这个矩阵中，0为空白，1则用一个小圆点表示。
下面附上数字0-9和冒号：的矩阵js:

digit.js

digit = [
        [
        //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, 0, 0],
        [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]
        ]
]
确定一个数字的位置
render a digit

为了数字展示的美观，我们需要使每个小球之间有一点距离，所以设半径为R,则每一个小方格的长度为2*（R+1）,所以第一个小球的圆心距离为，x+（R+1）,i和j都是从0开始取值，所以第（i，j）个圆的圆心位置如上图公式所示。

//定义常量
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;//半径

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }

显示静态数字代码的完整countdown1.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;//半径

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    render(context);
}

function render(cxt) {

    var hours = 12;
    var minutes = 36;
    var seconds = 59;
    
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);// 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);// 每个字水平位置7直径,7*2 = 14半径+1 = 15         
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);// 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);// 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);  
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);// 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);// 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

这段代码设置的巧妙之处在于小时、分钟、秒，取余之后的数字刚好等于该数字在digit[num]的位置.

var hours = 12;
var minutes = 36;
var seconds = 59;

countdown.html
后面只需要改变引入的js文件就可以看见我们不同阶段的演示效果

2.2、动态数字展示

倒计时

刷新网页，时间数值改变
倒计时

获取时间

//限制： 小时二位数 不超过4天
var endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

完整的countdown2.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小时二位数 不超过4天
var endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

window.onload = function() {
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        canvas.width = WINDOW_WIDTH
        canvas.height = WINDOW_HEIGHT

        curShowTimeSecond = getCurShowTimeSecond()
        render(context)
    }
function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

// 时间更新函数

function render(cxt) {
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), cxt);
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

2.3、数字自动倒计时

一个实现动画的基础函数

setInterval(
    function(){
        render();
        update();  
    },
  50            //单位ms，每50ms变化一次
);

更新函数

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        curShowTimeSecond = nextShowTimeSeconds
    }
}

完整的countdown3.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小时二位数 不超过4天
var endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

window.onload = function() {
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        canvas.width = WINDOW_WIDTH
        canvas.height = WINDOW_HEIGHT
 curShowTimeSecond = getCurShowTimeSecond();   //curShowTimeSecond：当前总共的毫秒数
    
    // 动画效果

        curShowTimeSecond = getCurShowTimeSecond()
        setInterval(
            function() {
                render(context);
                update();
            },
            50 //单位ms，每50ms变化一次
        );
    }
    
function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        curShowTimeSecond = nextShowTimeSeconds
    }
}

// 时间更新函数

function render(cxt) {
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), cxt);
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

2.4、酷炫动画倒计时

炫酷小球

小球运动

function updateBalls(){
    for(var i=0;i=WINDOW_HEIGHT+RADIUS){//触碰到边缘就让小球反向运动
            balls[i].y=WINDOW_HEIGHT+RADIUS
            balls[i].vy=-balls[i].vy*0.75
        }
    }
}

在变化的数字处增加小球

function addBalls(x,y,num){
    for(var i=0;i

完整的countdown4.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小时二位数 不超过4天
const endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

var balls=[];
const colors=["#FFFF00","#FF69B4",'#FF4500','#EE82EE','#B3EE3A','#BFEFFF','#A020F0','#8470FF','#7A67EE','#00FFFF','#EE7AE9']//设置颜色


window.onload = function() {
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        canvas.width = WINDOW_WIDTH
        canvas.height = WINDOW_HEIGHT
 curShowTimeSecond = getCurShowTimeSecond();   //curShowTimeSecond：当前总共的毫秒数
    
    // 动画效果

        curShowTimeSecond = getCurShowTimeSecond()
        setInterval(
            function() {
                render(context);
                update();//负责数据改变
            },
            50 //单位ms，每50ms变化一次
        );
    }
    
function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        if(parseInt(curHours/10)!=parseInt(nextHours/10)){
            addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10))
        }
        if(parseInt(curHours%10)!=parseInt(nextHours%10)){
            addBalls(MARGIN_LEFT+ 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10))
        }
        if(parseInt(curMinute/10)!=parseInt(nextMinute/10)){
            addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute/ 10))
        }
        if(parseInt(curMinute%10)!=parseInt(nextMinute%10)){
            addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute % 10))
        }
        if(parseInt(curSecond/10)!=parseInt(nextSecond/10)){
            addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSecond / 10))
        }
        if(parseInt(curSecond%10)!=parseInt(nextSecond%10)){
            addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSecond % 10))
        }
        curShowTimeSecond = nextShowTimeSeconds
    }
    
    updateBalls()
}
function updateBalls(){
    for(var i=0;i=WINDOW_HEIGHT+RADIUS){
            balls[i].y=WINDOW_HEIGHT+RADIUS
            balls[i].vy=-balls[i].vy*0.75
        }
    }
}
function addBalls(x,y,num){
    for(var i=0;i

2.5、倒计时优化

我们不断的addballs,这会导致内存开销越来越大，所以我们可以设置将已经跳出屏幕的小球清除。

//让弹出屏幕的小球消失，以免内存过大
   var cnt = 0
   for (var i = 0; i < balls.length; i++)
       if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH)
           balls[cnt++] = balls[i]
   while (balls.length > cnt) {
       balls.pop()

   }

设置距离当前一小时计时

var endTime = new Date(); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
endTime.setTime(endTime.getTime() + 3600 * 1000) //距离 1小时倒计时
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

完整代码：countdown5.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

限制： 小时二位数 不超过4天
var endTime = new Date(); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
endTime.setTime(endTime.getTime() + 3600 * 1000) //距离 1小时倒计时
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

var balls = [];
const colors = ["#FFFF00", "#FF69B4", '#FF4500', '#EE82EE', '#B3EE3A', '#BFEFFF', '#A020F0', '#8470FF', '#7A67EE', '#00FFFF', '#EE7AE9'] //设置颜色

window.onload = function() {
    var canvas = document.getElementById("canvas")
    var context = canvas.getContext("2d")
    canvas.width = WINDOW_WIDTH
    canvas.height = WINDOW_HEIGHT
    curShowTimeSecond = getCurShowTimeSecond(); //curShowTimeSecond：当前总共的毫秒数

    // 动画效果

    curShowTimeSecond = getCurShowTimeSecond()
    setInterval(
        function() {
            render(context);
            update(); //负责数据改变
        },
        50 //单位ms，每50ms变化一次
    );
}

function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
            addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10))
        }
        if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
            addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10))
        }
        if (parseInt(curMinute / 10) != parseInt(nextMinute / 10)) {
            addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute / 10))
        }
        if (parseInt(curMinute % 10) != parseInt(nextMinute % 10)) {
            addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute % 10))
        }
        if (parseInt(curSecond / 10) != parseInt(nextSecond / 10)) {
            addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSecond / 10))
        }
        if (parseInt(curSecond % 10) != parseInt(nextSecond % 10)) {
            addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSecond % 10))
        }
        curShowTimeSecond = nextShowTimeSeconds
    }

    updateBalls()
}

function updateBalls() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx
        balls[i].y += balls[i].vy
        balls[i].vy += balls[i].g

        if (balls[i].y >= WINDOW_HEIGHT + RADIUS) {
            balls[i].y = WINDOW_HEIGHT + RADIUS
            balls[i].vy = -balls[i].vy * 0.75
        }
    }
    //让弹出屏幕的小球消失，以免内存过大
    var cnt = 0
    for (var i = 0; i < balls.length; i++)
        if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH)
            balls[cnt++] = balls[i]
    while (balls.length > cnt) {
        balls.pop()

    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                var aBall = {
                    x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
                    y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
                    g: 1.5 + Math.random(), //加速度
                    vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //使初始速度随机化，小球变化更加灵活
                    vy: -6, //小球初始y速度
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(aBall)
            }
        }
    }

}
// 时间更新函数

function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 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, true)
        cxt.closePath()
        cxt.fill()
    }
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

你可能感兴趣的:(【Canvas 02】 百行代码Canvas酷炫倒计时)

  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • 2021-08-26 影幽
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么 测评君高省
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
  • 本周第二次约练 2cfbdfe28a51
    中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • 今日联对0306 诗图佳得
    自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.1、试对肖老师联：烟销皓月临江浒，夜笼寒沙梦晚舟。耀哥求正2、试对萧老师联:烟销浩月临江浒，雾散乾坤解汉城。秀霞习作请各位老师校正3、自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.4、试对肖老师垫场联：烟销皓月临江浒，雾锁寒林缈葉丛。小智求正[抱拳]5、试对肖老师联：烟销皓月临江浒；风卷乱云入峰巅。一一五品6
  • 2022-07-08 保利学府里李楚怡1307022
    ——保利碧桂园学府里——童梦奇趣【科学实验室】「7.9-7.10」✏玩出大智慧约99-144㎡二期全新升级力作
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • 每日一题——第八十二题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：将一个控制台输入的字符串中的所有元音字母复制到另一字符串中#include#include#include#include#defineMAX_INPUT1024boolisVowel(charp);intmain(){charinput[MAX_INPUT];charoutput[MAX_INPUT];printf("请输入一串字符串：\n");fgets(input,sizeof(inp
  • 每日一题——第八十三题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：将输入的整形数字输出,输出1990，输出"1990"#include#defineMAX_INPUT1024intmain(){intarrr_num[MAX_INPUT];intnum,i=0;printf("请输入一个数字：");scanf_s("%d",&num);while(num!=0){arrr_num[i++]=num%10;num/=10;}printf("\"");for(
  • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
    Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
  • 将cmd中命令输出保存为txt文本文件 落难Coder Windowscmdwindow
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 2020.11.19 隆非凡
    日精进，今日体验：在维修过程中遇到的问题，把源头找到，在进行下一步开始。不要停留在一个点上，合理调整心态，把当下事做好。
  • 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言
    目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
  • 2018/02/12 Tracy_zhang
    人生并不在于获取，更在于放得下。放下一粒种子，收获一棵大树;放下一处烦恼，收获一个惊喜;放下一种偏见，收获一种幸福;放下一种执著，收获一种自在。放下既是一种理性抉择，也是一种豁达美。只要看得开放得下，何愁没有快乐的春莺在啼鸣，何愁没有快乐的泉溪在歌唱，何愁没有快乐的鲜花绽放!
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 2023-04-17|篮球女孩 长一木
    1小学抑或初中阶段，在课外书了解到她的故事。“篮球女孩”。当时佩服她的顽强，也对生命多了一丝敬畏。今天刚好在公众号看到，长大后的“篮球女孩”。佩服之余又满是心疼。网络侵删祝那素未蒙面的女孩，未来一切顺遂。
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 使用Faiss进行高效相似度搜索 llzwxh888 faisspython
    在现代AI应用中，快速和高效的相似度搜索是至关重要的。Faiss（FacebookAISimilaritySearch）是一个专门用于快速相似度搜索和聚类的库，特别适用于高维向量。本文将介绍如何使用Faiss来进行相似度搜索，并结合Python代码演示其基本用法。什么是Faiss？Faiss是一个由FacebookAIResearch团队开发的开源库，主要用于高维向量的相似性搜索和聚类。Faiss
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • GitHub上克隆项目 bigbig猩猩 github
    从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
  • 春季养肝正当时 dxn悟
    重温快乐2023年2月4日立春。春天来了，春暖花开，小鸟欢唱，那在这样的季节我们如何养肝呢？自然界的春季对应中医五行的木，人体五脏肝属木，“木曰曲直”，是以树干曲曲直直地向上、向外伸长舒展的生发姿态，来形容具有生长、升发、条达、舒畅等特征的食物及现象。根据中医天人相应的理念，肝五行属木，喜条达，主疏泄，与春天相应，所以春天最适合养肝。养肝首先要少生气，因为肝喜条达恶抑郁。人体五志肝为怒，生气发怒最
  • springmvc 下 freemarker页面枚举的遍历输出 杨白白 enumfreemarker
    spring mvc freemarker 中遍历枚举 1枚举类型有一个本地方法叫values（），这个方法可以直接返回枚举数组。所以可以利用这个遍历。 enum public enum BooleanEnum { TRUE(Boolean.TRUE, "是"), FALSE(Boolean.FALSE, "否");
  • 实习简要总结 byalias 工作
    来白虹不知不觉中已经一个多月了，因为项目还在需求分析及项目架构阶段，自己在这段 时间都是在学习相关技术知识，现在对这段时间的工作及学习情况做一个总结： （1）工作技能方面 大体分为两个阶段，Java Web 基础阶段和Java EE阶段 1）Java Web阶段 在这个阶段，自己主要着重学习了 JSP, Servlet, JDBC, MySQL，这些知识的核心点都过 了一遍，也
  • Quartz——DateIntervalTrigger触发器 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208559 一.概述 simpleTrigger 内部实现机制是通过计算间隔时间来计算下次的执行时间，这就导致他有不适合调度的定时任务。例如我们想每天的 1：00AM 执行任务，如果使用 SimpleTrigger，间隔时间就是一天。注意这里就会有一个问题，即当有 misfired 的任务并且恢复执行时，该执行时间
  • Unix快捷键 18289753290 unixUnix；快捷键;
    复制，删除，粘贴： dd:删除光标所在的行                             &nbs
  • 获取Android设备屏幕的相关参数 酷的飞上天空 android
    包含屏幕的分辨率  以及 屏幕宽度的最大dp 高度最大dp   TextView text = (TextView)findViewById(R.id.text); DisplayMetrics dm = new DisplayMetrics(); text.append("getResources().ge
  • 要做物联网？先保护好你的数据 蓝儿唯美 数据
    根据Beecham Research的说法，那些在行业中希望利用物联网的关键领域需要提供更好的安全性。 在Beecham的物联网安全威胁图谱上，展示了那些可能产生内外部攻击并且需要通过快速发展的物联网行业加以解决的关键领域。 Beecham Research的技术主管Jon Howes说：“之所以我们目前还没有看到与物联网相关的严重安全事件，是因为目前还没有在大型客户和企业应用中进行部署，也就
  • Java取模（求余）运算 随便小屋 java
            整数之间的取模求余运算很好求，但几乎没有遇到过对负数进行取模求余，直接看下面代码： /** * * @author Logic * */ public class Test { public static void main(String[] args) { // TODO A
  • SQL注入介绍 aijuans sql注入
    二、SQL注入范例 这里我们根据用户登录页面 <form action="" > 用户名：<input type="text" name="username"><br/> 密 码：<input type="password" name="passwor
  • 优雅代码风格 aoyouzi 代码
    总结了几点关于优雅代码风格的描述： 代码简单：不隐藏设计者的意图，抽象干净利落，控制语句直截了当。 接口清晰：类型接口表现力直白，字面表达含义，API 相互呼应以增强可测试性。 依赖项少：依赖关系越少越好，依赖少证明内聚程度高，低耦合利于自动测试，便于重构。 没有重复：重复代码意味着某些概念或想法没有在代码中良好的体现，及时重构消除重复。 战术分层：代码分层清晰，隔离明确，
  • 布尔数组 百合不是茶 java布尔数组
      androi中提到了布尔数组;   布尔数组默认的是false,  并且只会打印false或者是true   布尔数组的例子;  根据字符数组创建布尔数组 char[] c = {'p','u','b','l','i','c'}; //根据字符数组的长度创建布尔数组的个数 boolean[] b = new bool
  • web.xml之welcome-file-list、error-page bijian1013 javaweb.xmlservleterror-page
    welcome-file-list 1.定义： <welcome-file-list> <welcome-file>login.jsp</welcome> </welcome-file-list>  2.作用：用来指定WEB应用首页名称。   error-page1.定义： <error-page&g
  • richfaces 4 fileUpload组件删除上传的文件 sunjing clearRichfaces 4fileupload
     页面代码               <h:form id="fileForm">            <rich:
  • 技术文章备忘 bit1129 技术文章
    Zookeeper http://wenku.baidu.com/view/bab171ffaef8941ea76e05b8.html http://wenku.baidu.com/link?url=8thAIwFTnPh2KL2b0p1V7XSgmF9ZEFgw4V_MkIpA9j8BX2rDQMPgK5l3wcs9oBTxeekOnm5P3BK8c6K2DWynq9nfUCkRlTt9uV
  • org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案 白糖_ Hibernate
    文章摘自：http://blog.csdn.net/yangwawa19870921/article/details/7553181   在编写HQL时，可能会出现这种代码： select a.name,b.age from TableA a left join TableB b on a.id=b.id  如果这是HQL，那么这段代码就是错误的，因为HQL不支持
  • sqlserver按照字段内容进行排序 bozch 按照内容排序
    在做项目的时候，遇到了这样的一个需求：           从数据库中取出的数据集，首先要将某个数据或者多个数据按照地段内容放到前面显示，例如:从学生表中取出姓李的放到数据集的前面；          select * fro
  • 编程珠玑-第一章-位图排序 bylijinnan java编程珠玑
    import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; import java.util.Random; public class BitMapSearch {
  • Java关于==和equals chenbowen00 java
    关于==和equals概念其实很简单，一个是比较内存地址是否相同，一个比较的是值内容是否相同。虽然理解上不难，但是有时存在一些理解误区，如下情况： 1、 String a = "aaa"; a=="aaa"; ==> true 2、 new String("aaa")==new String("aaa
  • [IT与资本]软件行业需对外界投资热情保持警惕 comsci it
          我还是那个看法,软件行业需要增强内生动力,尽量依靠自有资金和营业收入来进行经营,避免在资本市场上经受各种不同类型的风险,为企业自主研发核心技术和产品提供稳定,温和的外部环境...       如果我们在自己尚未掌握核心技术之前,企图依靠上市来筹集资金,然后使劲往某个领域砸钱,然
  • oracle 数据块结构 daizj oracle块数据块块结构行目录
    oracle 数据块是数据库存储的最小单位，一般为操作系统块的N倍。其结构为： 块头－－〉空行－－〉数据，其实际为纵行结构。 块的标准大小由初始化参数DB_BLOCK_SIZE指定。具有标准大小的块称为标准块（Standard Block）。块的大小和标准块的大小不同的块叫非标准块（Nonstandard Block）。同一数据库中，Oracle9i及以上版本支持同一数据库中同时使用标
  • github上一些觉得对自己工作有用的项目收集 dengkane github
    github上一些觉得对自己工作有用的项目收集 技能类 markdown语法中文说明 回到顶部 全文检索 elasticsearch bigdesk elasticsearch管理插件 回到顶部 nosql mapdb 支持亿级别map, list, 支持事务. 可考虑做为缓存使用 C
  • 初二上学期难记单词二 dcj3sjt126com englishword
    dangerous 危险的 panda 熊猫 lion 狮子 elephant 象 monkey 猴子 tiger 老虎 deer 鹿 snake 蛇 rabbit 兔子 duck 鸭 horse 马 forest 森林 fall 跌倒；落下 climb 爬；攀登 finish 完成；结束 cinema 电影院；电影 seafood 海鲜；海产食品 bank 银行
  • 8、mysql外键(FOREIGN KEY)的简单使用 dcj3sjt126com mysql
    一、基本概念 1、MySQL中“键”和“索引”的定义相同，所以外键和主键一样也是索引的一种。不同的是MySQL会自动为所有表的主键进行索引，但是外键字段必须由用户进行明确的索引。用于外键关系的字段必须在所有的参照表中进行明确地索引，InnoDB不能自动地创建索引。 2、外键可以是一对一的，一个表的记录只能与另一个表的一条记录连接，或者是一对多的，一个表的记录与另一个表的多条记录连接。 3、如
  • java循环标签 Foreach shuizhaosi888 标签java循环foreach
    1. 简单的for循环 public static void main(String[] args) { for (int i = 1, y = i + 10; i < 5 && y < 12; i++, y = i * 2) { System.err.println("i=" + i + " y="
  • Spring Security（05）——异常信息本地化 234390216 exceptionSpring Security异常信息本地化
    异常信息本地化          Spring Security支持将展现给终端用户看的异常信息本地化，这些信息包括认证失败、访问被拒绝等。而对于展现给开发者看的异常信息和日志信息（如配置错误）则是不能够进行本地化的，它们是以英文硬编码在Spring Security的代码中的。在Spring-Security-core-x
  • DUBBO架构服务端告警Failed to send message Response javamingtingzhao 架构DUBBO
     废话不多说，警告日志如下，不知道有哪位遇到过，此异常在服务端抛出(服务器启动第一次运行会有这个警告)，后续运行没问题，找了好久真心不知道哪里错了。    WARN 2015-07-18 22:31:15,272 com.alibaba.dubbo.remoting.transport.dispatcher.ChannelEventRunnable.run(84)
  • JS中Date对象中几个用法 leeqq JavaScriptDate最后一天
    近来工作中遇到这样的两个需求 1. 给个Date对象，找出该时间所在月的第一天和最后一天 2. 给个Date对象，找出该时间所在周的第一天和最后一天   需求1中的找月第一天很简单，我记得api中有setDate方法可以使用 使用setDate方法前，先看看getDate var date = new Date(); console.log(date); // Sat J
  • MFC中使用ado技术操作数据库 你不认识的休道人 sqlmfc
    1.在stdafx.h中导入ado动态链接库 #import"C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("EOF","end")2.在CTestApp文件的InitInstance()函数中domodal之前写::CoIniti
  • Android Studio加速 rensanning android studio
    Android Studio慢、吃内存！启动时后会立即通过Gradle来sync & build工程。 （1）设置Android Studio a) 禁用插件 File -> Settings...  Plugins 去掉一些没有用的插件。 比如：Git Integration、GitHub、Google Cloud Testing、Google Cloud
  • 各数据库的批量Update操作 tomcat_oracle javaoraclesqlmysqlsqlite
    MyBatis的update元素的用法与insert元素基本相同，因此本篇不打算重复了。本篇仅记录批量update操作的 sql语句，懂得SQL语句，那么MyBatis部分的操作就简单了。 　　注意：下列批量更新语句都是作为一个事务整体执行，要不全部成功，要不全部回滚。 MSSQL的SQL语句 　WITH R AS（ 　　SELECT 'John' as name, 18 as
  • html禁止清除input文本输入缓存 xp9802 input
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他