炫酷的倒计时效果，祝福春节

最新推荐文章于 2024-04-21 15:35:07 发布
最新推荐文章于 2024-04-21 15:35:07 发布
阅读量343 收藏 6
点赞数 4
分类专栏： 不一样的烟火 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41619796/article/details/112968563
版权

前言：

      春节将至，小福利，炫酷的倒计时效果

效果图：

实现源码：

<!DOCTYPE html>


<html>

    <head>
        <meta charset="utf-8"/>
        <title>HTML5-炫丽的时钟效果Canvas绘图与动画  </title>

        <style type="text/css">
            .linux903,.linux902 {display:none!important;display:none}
        </style>

    </head>

    <body>
        <canvas id="canvas"></canvas>
    </body>

</html>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript">
    var WINDOW_WIDTH=1024;
    var WINDOW_HEIGHT=600;
    var MARGIN_TOP=60;
    var MARGIN_LEFT=30;
    //存放彩色小球
    var balls=[];
    const colors=["#33B5E5","#0099CC","#AA66CC","#669900","#FFBB33","#FF8800","#FF4444","CC0000"];

    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]

            ]//:

        ];
    var r=8;//圆半径

        window.onload=function(){

        var canvas=document.getElementById("canvas");

        var context=canvas.getContext("2d");

        canvas.width=WINDOW_WIDTH;

        canvas.height=WINDOW_HEIGHT;



        window.setInterval(function(){

           var curr=new Date();

           var curHours=curr.getHours();

           var curMinutes=curr.getMinutes();

           var curSeconds=curr.getSeconds();



           //当时间的秒数改变时添加彩色小球

           if(preSeconds!=curSeconds)

           {



            if(parseInt(curHours/10)!=parseInt(preHours/10)){

            addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));      

            }

              if(parseInt(curHours%10)!=parseInt(preHours%10)){

            addBall(MARGIN_LEFT+15*(r+1),MARGIN_TOP,parseInt(curHours%10));     

            }

             if(parseInt(curMinutes/10)!=parseInt(preMinutes/10)){

            addBall(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(curMinutes/10));       

            }

              if(parseInt(curMinutes%10)!=parseInt(preMinutes%10)){

            addBall(MARGIN_LEFT+54*(r+1),MARGIN_TOP,parseInt(curMinutes%10));       

            }



             if(parseInt(curSeconds/10)!=parseInt(preSeconds/10)){

            addBall(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(curSeconds/10));       

            }

              if(parseInt(curSeconds%10)!=parseInt(preSeconds%10)){

            addBall(MARGIN_LEFT+93*(r+1),MARGIN_TOP,parseInt(curSeconds%10));       

            }       

           }

           render(context); 



            },50);



        }



        //添加小球(数字num上的彩色小球，x，y:数字方块容器的左上角顶点坐标)

        function addBall(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 ball={

                         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,//结果为-4/4

                         vy:-5,

                         color:colors[Math.floor(Math.random()*colors.length)]

                         };

                         balls.push(ball);



                     }

                 }

             }

        }

      //----画彩色小球

      function renderBalls(context){

                //context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)

         for (var i=0;i<balls.length ;i++ )

         {

            context.beginPath();

            context.arc(balls[i].x,balls[i].y,r,0,2*Math.PI,false);

            context.fillStyle=balls[i].color;

            context.fill();

            context.closePath();

         }

      }



     //----更新彩色小球位置

      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+r>=WINDOW_HEIGHT){

         balls[i].y=WINDOW_HEIGHT-r;

         balls[i].vy=-balls[i].vy*0.6;

         }

         }

      }





        var preHours;

        var preMinutes;

        var preSeconds;



        //渲染整个画布

        function render(context)

        {

            context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)

            var now=new Date();

            var hours=now.getHours();

            var minutes=now.getMinutes();

            var seconds=now.getSeconds();

            preHours=hours;

            preMinutes=minutes;

            preSeconds=seconds;

            //---时

            renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);

            renderDigit(MARGIN_LEFT+15*(r+1),MARGIN_TOP,hours%10,context);

            renderDigit(MARGIN_LEFT+30*(r+1),MARGIN_TOP,10,context);

            //---分

            renderDigit(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(minutes/10),context);

            renderDigit(MARGIN_LEFT+54*(r+1),MARGIN_TOP,minutes%10,context);

            renderDigit(MARGIN_LEFT+69*(r+1),MARGIN_TOP,10,context);

            //---秒

            renderDigit(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(seconds/10),context);

            renderDigit(MARGIN_LEFT+93*(r+1),MARGIN_TOP,seconds%10,context);

            //---画小球

            renderBalls(context);

            //---改变小球路径

            UpdateBalls();



        }

        //渲染每个数字

        function renderDigit(x,y,num,context)

        {

        context.fillStyle="green";

        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){

                context.beginPath();

                context.arc(x+j*2*(r+1)+r+1,y+i*2*(r+1)+r+1,r,0,2*Math.PI,false);

                context.closePath();

                context.fill();

                }

            }

        }

        }
</script>

 

浩星
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
炫酷倒计时引导页源码.zip
04-25
这是一个关于创建炫酷倒计时引导页的源码包，主要特点是自适应各种设备屏幕，同时包含倒计时动画和背景音乐功能。源码中包含了实现这些特性的关键元素和逻辑，下面将详细讲解其中涉及的技术点。 1. **自适应布局**...
精品源码 / 倒计时 / 炫酷 / canvas特效
01-09
本资源中的“炫酷canvas倒计时特效”就是利用Canvas API实现的一种创新计时展示方式。 1. **Canvas基本概念**： Canvas是一个二维绘图环境，开发者可以使用JavaScript调用其提供的方法来绘制图形，如线条、形状、...
2024年跨年倒计时代码祝福！
qq_50951790的博客
12-11 1万+
如果想每年都使用它，那么只需要修改这里即可。如有冒犯，请联系我删除。
精心整理的10套最美Web前端新年特效---提前祝大家新年快乐（文末送书）
java李阳勇的博客
01-24 1万+
亲爱的小伙伴们，2022年春节就快到了！~ 在这里祝各位程序员朋友2022年身体健康,代码没有bug,不用996、远离ICU。 今天给大家精心整理了10套最美前端新年特效！提前祝大家新年快乐呀！！！！ 话不多说、直接看效果：文末免费获取
你专属的程序员春节“大礼包”
HelloGitHub 的博客
02-11 977
我做梦的时候，都梦到自己是个顶级黑客拯救世界。虽然我知道只是个梦，但我这颗拯救和改变世界的心躁动地无处安放。那么就在游戏和影视作品中过把瘾吧！你春节放了几天？接下来 HelloGitHub...
简单且有创意的python作品,python创意项目设计方案
2401_84503581的博客
04-21 1932
草莓熊，英文名Lotso，迪士尼公司和皮克斯动画工作室公司于2010年合作推出的动画片《玩具总动员3》（Toy Story3）的反派角色。（草莓熊简介配图来源于网络《玩具总动员3》，版权属《玩具总动员3》，此处仅作介绍人物绘图前形象介绍用途）​​草莓熊本来拥有一个幸福的家庭：爱他的主人小女孩黛西，粉红色如梦如幻的世界python工程师考什么证书。黛西很爱陪伴她的玩具，尤其是草莓熊，他最受宠爱。黛西和草莓熊整天形影不离，他们是世界上最亲密的孩子和玩具。​。
精心整理的10套最美Web前端新年特效--提前祝大家新年快乐
BYGFJ的博客
01-25 3066
亲爱的小伙伴们，2022年春节就快到了！~ 在这里祝各位程序员朋友2022年身体健康,代码没有bug,不用996、远离ICU。 今天给大家精心整理了10套最美前端新年特效！提前祝大家新年快乐呀！！！！ 2022炫酷新年快乐html网页特效: 一款效果超级炫酷的2022新年快乐html网页特效，霓虹的城市夜景和绚烂的烟花很是特别，页面还有交互效果，点击鼠标就会呈现烟花绽放的特效，唯美不过如此。 2022烟花背景新年快乐html网页特效： 2022已经正式来临，距离中国人的农历...
直方图均衡化（调节图像亮度、对比度）
逆境清醒的博客
04-18 8596
一、前言 二、直方图均衡化概念 三、直方图均衡化实例（1）、灰度图像的均衡处理实例 ①、卡通人物灰度图像均衡处理②、卡通猫头鹰灰度图像均衡处理③、弹琴猫灰度图像均衡处理（2）、彩色图像的均衡处理实例 四、总结
Python中Print()函数的用法___实例详解(全，例多）
热门推荐
逆境清醒的博客
06-22 19万+
print()函数语法，print()打印输出文本，print()中空格的使用方法，Print() 换行，print()区隔符 sep，print()制表符 \t，print()输出数学表达式，print()打印输出反斜杠 \，print()变量的输出，print()数据的格式化输出，print()中文输入问题，print()写入文件，print()在终端输出彩色字体，print()配合函数输出，Print()小例子(打印字符、九九乘法表、实心菱形、空心菱形、空心三角形、实心三角形、侧三角形).......
Python 3D可视化（一）
逆境清醒的博客
04-08 4681
Python 3D可视化的方法很多 ，其中PyVista是其中一种不错的模块。PyVista通过NumPy和直接数组访问与VTK进行接口。这个包提供了一个python化的良好的接口，展示了强大的可视化后端，以方便对空间引用的数据集进行快速原型化、分析和可视化集成。该模块可用于演示文稿和研究论文的科学绘图，以及其他依赖网格的Python模块的支持模块。本文介绍了12种python 3D 基础实例（附完整源代码）。36python练习题目录35语音识别实战（python代码）(一）34​。
Python代码大全，海量代码任你下载
Python代码大全
09-05 1万+
注：所有源代码均实测运行过。所有源代码均已上传CSDN，请有需要的朋友自行下载。
精品源码 / 炫酷特效 / 倒计时秒表
12-24
今天我们将深入探讨一个特定的前端特效——炫酷倒计时秒表。这个特效不仅提升了用户体验，还增加了视觉吸引力，使得网站或应用更加生动有趣。 "炫酷特效 / 倒计时秒表"这个标题暗示了我们正在讨论一个专门用于显示...
canvas彩色倒计时效果
05-08
canvas彩色倒计时效果 依据canvas画布效果 实现的时间倒计时 可自己设定需要的画布大小 倒计时时钟位置 需要的倒计时时间 在秒数的切换时 会动态的更新彩色效果 适合放置到个人小站或者一些炫酷的页面中使用
js炫酷倒计时引导页面源码
05-04
首页设置弹窗倒计时，你可以把背景设置的更炫酷一点，这样可以吸引用户点击，并设置10秒后弹窗自动消失（或者设置一个关闭按钮等）。 倒计时的实现可以有很多种方式，在这里也就先介绍这一种，以后有时间将会继续...
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
07-28
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
tour-project【程序员VIP专用】.zip
最新发布
07-28
【项目简介】 HTML5+CSS实现雪花旅行社
android 炫酷倒计时
05-26
你可以使用 Android 中的 CountDownTimer 类来创建一个炫酷的倒计时器。以下是一个简单的示例： 首先，在XML布局文件中添加一个TextView来显示倒计时： ```xml android:id="@+id/countdown_timer" android:...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值