为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 看波波的课程,做的倒计时,小时从两位扩充到四位,修改为...

看波波的课程,做的倒计时,小时从两位扩充到四位,修改为想要的截止日期即可

标签：
Html5 JavaScript 
<!DOCTYPE html>
<html style="height: 100%;">
    <head>
        <meta charset="UTF-8">
        <title>炫酷倒计时制作</title>
    </head>
    <body style="height: 100%;">
        <canvas id="canvas" style="height: 100%;display: block;margin:0 auto;background: lightblue;"></canvas>
    </body>
    <!--<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/数组.js" type="text/javascript" charset="utf-8"></script>-->
    <!--<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/自己做倒计时.js" type="text/javascript" charset="utf-8"></script>-->
    <script type="text/javascript">
var w=1024;
var h=768;
var r=8;//小球半径
var t=60;//上边距
var l=30;//左边距
//注意 月数比较特殊 0相当于1月 6相当于7月
const endTime=new Date(2016,11,26,0,0,01);//倒计时截止时间
var curShowTimeSeconds=0;//设置距离截止秒数

var balls=[];//收集小球
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload=function  () {
    w=document.body.clientWidth;
    h=document.body.clientHeight;
    console.log(w);
    l=Math.round(w/10);
    r=Math.round(w*4/5/138)-1;
    t=Math.round(h/5);
    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');
    canvas.width=w;
    canvas.height=h;
    //函数
    curShowTimeSeconds= getC();
//  render(context);
    setInterval(function  () {
        render(context);
        //函数
        update();
    },50);
}
function getC () {
    //获取当前的时间
    var curTime=new Date();
    //获取截止事件减去当前时间的毫秒数
    var ret=endTime.getTime()-curTime.getTime();
    ret=Math.round(ret/1000);
//  console.log(ret);
    return ret>=0?ret:0;
}
function update () {
    var nextShowTimeSeconds=getC();//获取时间下一个时间
    var nextHours=parseInt(nextShowTimeSeconds/3600);
//  console.log(nextHours);
    var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
    var nextSecounds=nextShowTimeSeconds%60;

    var curHours=parseInt(curShowTimeSeconds/3600);
    var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
    var curSecounds=curShowTimeSeconds%60;
    if (nextSecounds!=curSecounds) {
        if (parseInt(curHours/10)!=parseInt(nextHours/10)) {
            // 函数 负责加小球
            addBalls(l+30,t,parseInt(curHours/10));
        }
        if (parseInt(curHours%10)!=parseInt(nextHours%10)) {
            // 函数 负责加小球
            addBalls(l+45*(r+1),t,parseInt(curHours/10));
        }
        if (parseInt(curMinutes/10)!=parseInt(nextMinutes/10)) {
            // 函数 负责加小球
            addBalls(l+69*(r+1),t,parseInt(curMinutes/10));
        }
        if (parseInt(curMinutes%10)!=parseInt(nextMinutes%10)) {
            // 函数 负责加小球
            addBalls(l+84*(r+1),t,parseInt(curMinutes/10));
        }
        if (parseInt(curSecounds/10)!=parseInt(nextSecounds/10)) {
            // 函数 负责加小球
            addBalls(l+108*(r+1),t,parseInt(curSecounds/10));
        }
        if (parseInt(curSecounds%10)!=parseInt(nextSecounds%10)) {
            // 函数 负责加小球
            addBalls(l+123*(r+1),t,parseInt(curSecounds/10));
        }
        curShowTimeSeconds=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>=h-r) {
            balls[i].y>=h-r;
            balls[i].vy=-balls[i].vy*0.75;
        }
    }
    //删除已经出画布的小球 优化性能
    var cnt=0;//记录有多少小球还保留在画布中
    for(var i=0;i<balls.length;i++){
        if (balls[i].x+r>0&&balls[i].x-r<w) {
             balls[cnt++]=balls[i];
        }
    }
     while(balls.length>Math.min(360,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++) {
            //判断是否是1 是 则画小球
            if (digit[num][i][j]==1) {
                var aBall={
                    x:x+j*2*(r+1)+(r+1),
                    y:y+i*2*(r+1)+(r+1),
                    g:1.5+Math.random(),
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
                    vy:-5,
                    color:colors[Math.floor(Math.random()*colors.length)]
                }
                balls.push(aBall);
            }
        }
    }
}
//设置函数
function render (cxt) {
    //获取当前事件
//  var now=new Date();
//  var hours=now.getMinutes();
//  var minutes=now.getMinutes();
//  var secounds=now.getSeconds();
//获取当前事件 距离 结束事件的小时 分钟 秒
    cxt.clearRect(0,0,w,h);//清除

    var hours=parseInt(curShowTimeSeconds/3600);
    var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
    var secounds=curShowTimeSeconds%60;

    renderDigit(l,t,parseInt(hours/1000),cxt);
    renderDigit(l+15*(r+1),t,parseInt(hours/100%10),cxt);
    renderDigit(l+30*(r+1),t,parseInt(hours/10%10),cxt);
    renderDigit(l+45*(r+1),t,parseInt(hours%10),cxt);
    renderDigit(l+60*(r+1),t,10,cxt);
    renderDigit(l+69*(r+1),t,parseInt(minutes/10),cxt);
    renderDigit(l+84*(r+1),t,parseInt(minutes%10),cxt);
    renderDigit(l+99*(r+1),t,10,cxt);
    renderDigit(l+108*(r+1),t,parseInt(secounds/10),cxt);
    renderDigit(l+123*(r+1),t,parseInt(secounds%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,r,0,2*Math.PI,false);
        cxt.closePath();
        cxt.fill();
    }
}
//绘制数字的函数
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++) {
            //判断是否是1 是 则画小球
            if (digit[num][i][j]==1) {
                cxt.beginPath();
                cxt.arc(x+j*2*(r+1)+(r+1),y+i*2*(r+1)+(r+1),r,0,2*Math.PI,false);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}
//数组 
var digit =
    [
        [
            [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]
        ],//0
        [
            [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]
        ],//1
        [
            [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]
        ],//2
        [
            [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]
        ],//3
        [
            [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]
        ],//4
        [
            [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]
        ],//5
        [
            [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]
        ],//6
        [
            [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]
        ],//7
        [
            [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]
        ],//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,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]
        ],//9
        [
            [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]
        ]//:
    ];
    </script>
</html>
点击查看更多内容
发表于 2016.07.13 17:32， 共 3149 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
2人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

痕迹3230776

学生
手记
篇
粉丝
10
获赞与收藏
408

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消