                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

为什么我的显示是00：00：00啊，帮忙看一下

var WINDOW_WIDTH=1024;

var WINDOW_HEIGHT=768;

var RADIUS=8;//定义小球的半径

var MARGIN_TOP=60;

var MARGIN_LEFT=30;

const endTime=new Date(2014,6,11,18,47,52);

var curShowTimeSeconds=0;

//加载页面

window.onload=function(){

var canvas=document.getElementById("canvas");//获得画布

var context=canvas.getContext("2d");//获得上下文环境

canvas.width=WINDOW_WIDTH;

canvas.height=WINDOW_HEIGHT;

curShowTimeSeconds=getCurrentShowTimeSeconds();//获得当前时间

render(context);//绘制当前的canvas画布

}

function getCurrentShowTimeSeconds(){

var curTime=new Date();//得到当前的时间

var ret=endTime.getTime()-curTime.getTime();

ret=Math.round(ret/1000);

return ret >=0 ? ret : 0;

}

function render(cxt){

var hours=parseInt(curShowTimeSeconds/3600);

var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);//得到的是毫秒数

var seconds=curShowTimeSeconds%60;

renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);//绘制第一个数字

renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);//绘制第二个数字

renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//冒号

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);//冒号

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="rgb(0,102,153)";

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();

}

}

成长前端初学者

2016-10-16

源自：炫丽的倒计时效果Canvas绘图与动画基础 3-3

关注问题我要回答

2466

操作

收起

6 回答

小昊子
2017-09-30

改成这样：

const endTime = new Date(2017,9,1,9,0);
var curShowTimeSeconds = 0;//存储自1970年0时0分0秒到现在的毫米数，初始化为0；
var windowWidth = 1024;
var windowHieght = 768;
var R = 8;
var marginTop = 60;
var marginLeft = 30;
// var c = document.getElementById("clock");
// var context = c.getContext('2d');
//window.onload = function () {
var canvas = document.getElementById("clock");
var ctx = canvas.getContext('2d');
canvas.width = windowWidth;
canvas.height = windowHieght;
curShowTimeSeconds = getCurrentShowTimeSeconds();
render(ctx);
//};
function render(cxt) {

    var hours = parseInt(curShowTimeSeconds / 3600);//总秒数除以3600秒，强制类型转换
    var minutes = parseInt((curShowTimeSeconds - hours *3600)/60);//总时间减去小时的秒数，除以60秒，强制类型转换
    var seconds = curShowTimeSeconds % 60;//总时间除以60为分钟数，其的余数为秒数

    //console.log("ds");
    renderDigit(marginLeft,marginTop,parseInt(hours/10),cxt);
    renderDigit(15*(R+1)+marginLeft,marginTop,parseInt(hours%10),cxt);
    renderDigit(30*(R+1)+marginLeft,marginTop,10,cxt);
    //hours
    renderDigit(39*(R+1)+marginLeft,marginTop,parseInt(minutes/10),cxt);
    renderDigit(54*(R+1)+marginLeft,marginTop,parseInt(minutes%10),cxt);
    renderDigit(69*(R+1)+marginLeft,marginTop,10,cxt);
    //minutes
    renderDigit(78*(R+1)+marginLeft,marginTop,parseInt(seconds/10),cxt);
    renderDigit(93*(R+1)+marginLeft,marginTop,parseInt(seconds%10),cxt);
    //seconds
}

function renderDigit(x,y,num,ctx) {
    ctx.fillStyle = "rgb(0,102,153)";
    console.log(digit[num].length);
    for (var i = 0;i<digit[num].length;i++){//遍历所有数字的点阵
        //console.log(digit[num][i]);
        for (var j = 0;j<digit[num][i].length;j++){//遍历所有点阵中的点
            if (digit[num][i][j] === 1){
                ctx.beginPath();
                ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
                // 圆的margin为2，每个圆在一个格子中，圆的半径为R
                // 格子边长为2*(R+1);i为y坐标，j为x坐标；第(i,j)个圆的圆心位置：(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1))
                ctx.closePath();
                ctx.fill();
            }
        }
    }
}
function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round(ret/1000);
    return ret >=0 ? ret:0;
}

0 回复有任何疑惑可以回复我~

慕丝4243277
2017-03-28

遇到一样的问题，怎么解决的，亲们

0 回复有任何疑惑可以回复我~

爱学习的Hero
2017-03-22

时间没有替换，不要照着老师的时间写

const endTime=new Date(2014,6,11,18,47,52);

换成const endTime=new Date(2017,2,22,18,47,52);

1 回复有任何疑惑可以回复我~

唐唐唐
2017-02-28

请问是怎么解决的 const endTime = new Date("2017/1/27,18:47:52");

我的页面显示还是为00:00:00

0 回复有任何疑惑可以回复我~

李飞飞0914
2016-11-15

是怎么解决的呢

0 回复有任何疑惑可以回复我~

成长前端初学者提问者
2016-10-16

已解决

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

炫丽的倒计时效果Canvas绘图与动画基础

参与学习 96746 人
解答问题 1000 个

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

本课相似问答

3 回答为什么一直显示的是00:00:00

2 回答为什么一直显示00：00：00

7 回答我的页面不知为什么显示时间还是为00:00:00，请帮忙看看

2 回答帮我看看代码，显示一直是00:00:00，当前日期是：2016/1/19

2 回答为什么倒计时是 00:00:00

搜索更多本课相关问答

为什么我的显示是00：00：00啊，帮忙看一下

我要回答关注问题

意见反馈帮助中心 APP下载