时钟倒计时

最新推荐文章于 2023-11-14 17:19:12 发布
最新推荐文章于 2023-11-14 17:19:12 发布
阅读量402 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52159489
版权

<!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/1999/xhtml">


<head>

<title> new document </title>

<meta name="generator" content="editplus" />

<meta name="author" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

</head>

<style type="text/css">

html,

body {

height: 100%

}

</style>


<body>

<canvas id="canvas" style="height:100%">

  当前浏览器不支持Canvas

  </canvas>


<script type="text/javascript">

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 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 r = 8; //圆半径

window.onload = function() {

WINDOW_WIDTH = document.body.clientWidth;

WINDOW_HEIGHT = document.body.clientHeight;

MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);

r = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;

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)) * 9, //结果为-10/10

vy: -10,

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

var count = 0;

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.7;

}


if(balls[i].x + r > 0 && balls[i].x - r < WINDOW_WIDTH) {

balls[count++] = balls[i];

}


}

//移除溢出的小球

while(balls.length > count) {

balls.pop();

}

}


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


console.log(balls.length);


}

//渲染每个数字

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>

</body>


</html>

Vivian_shuang
关注
专栏目录
时钟及新年倒计时
crystalheting的博客
12-16 1783
时钟及新年倒计时 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟及新年倒计时</title> <style type="text/css"> #bp{ background-image:url("...
倒计时
waithw的博客
06-02 242
点击start，倒计时开始。 界面交互编写： xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and
时钟计时和倒计时
yang_sheng_21的博客
03-22 315
`using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class TimeTest : MonoBehaviour { public Text timeCountAddText; public Text timeCountDownTex...
js时钟倒计时
weixin_33842304的博客
04-25 326
JS倒计时Date 代码如下： 1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 #box { 8 border: 1px solid cyan; 9 background-color: #000; 10 height: 50px; 11 width: 5...
flash时钟倒计时
04-29
flash时钟用于做倒计时，可以更改时间，
js倒计时时钟
xuehu837769474的博客
08-16 438
<!doctype html> <html> <head> <meta charset="utf-8"> <title>倒计时js代码</title> <style> * { margin: 0; padding: 0; ...
时钟倒计时效果ppt模板.rar
09-07
在制作具有时钟倒计时效果的PPT模板时，我们常常会利用各种技术来创建出引人注目的视觉体验，以吸引观众的注意力并强调重要事件的临近。"时钟倒计时效果ppt模板"通常包含一系列精心设计的幻灯片，这些幻灯片在演示...
JavaScript电子时钟倒计时
10-23
JavaScript电子时钟倒计时的实现涉及到JavaScript的基础语法及时间处理功能。以下为实现一个倒计时电子时钟所涵盖的知识点： 1. JavaScript中的时间处理函数： JavaScript提供了多种处理时间的内置方法，如获取当前...
JavaScript实现秒杀时钟倒计时
10-16
JavaScript实现秒杀时钟倒计时的核心知识点主要包括以下方面： 1. 倒计时的基本原理： 倒计时功能是通过JavaScript中的定时器函数`setInterval()`实现的，该函数可以按照指定的时间间隔重复执行一个函数。在这个...
24小时计时器
12-20
图片 数字电子电路用74LS160设计24小时计时器，采用六个四位数码管。
DELPHI时钟倒计时源码
05-01
DELPHI时钟倒计时源码是一种在DELPHI编程环境中实现的程序，用于创建一个可以设置初始时间并进行倒计时的功能。这个源码是开发者为了帮助其他程序员理解和学习如何在DELPHI中实现计时器功能而提供的。在DELPHI中，倒...
j s时钟和倒计时
qq_31871145的博客
04-11 310
Date()类：方法：{va r date=new Date()date.get(FullYear()/Monther/Date/Hours/Minutes/Secondsid.innerHtml='当前时间为------'}setInterval(方法名,1000)；时间会动起来倒计时：    定义一个固定的时间：var  futer=new Date(2019,12,2,23,0,0)    ...
js 倒计时
rose_LHJ的博客
07-29 567
使用js写倒计时功能
js的倒计时时钟代码
fox123871的专栏
08-10 1275
之间--> function setcountdown(theyear,themonth,theday){ yr=theyear;mo=themonth;da=theday } setcountdown(2008,7,12) var occasion="2008
时钟倒计时html,JavaScript实现秒杀时钟倒计时
weixin_36121284的博客
06-21 418
本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码，供大家参考，具体内容如下功能介绍：1.时/分/秒倒计时直至为零所有代码倒计时*{margin:0;padding:0;}span{display: inline-block;width: 60px;height: 60px;border-radius: 50%;background: black;color: white;fon...
html在状态栏中显示时间,html网页时间显示代码和倒计时代码大全
weixin_39862697的博客
05-30 1805
language=JavaScript>var enabled = 0; today = newDate();var day; var date;if(today.getDay()==0) day= "星期日"if(today.getDay()==1) day= "星期一"if(today.getDay()==2) day= "星期二"if(today.getDay()==3) day= "星期三...
js倒计时代码最简单的,js中倒计时器怎么实现
最新发布
神经网络爱好者
11-14 329
大家好，小编来为大家解答以下问题，js倒计时三种简单实现方式，js倒计时代码最简单的，现在让我们一起来看看吧！1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。
Android实现计时与倒计时的几种方法
轻轻草原
10-25 345
方法一 Timer与TimerTask（Java实现） public class timerTask extends Activity{ private int recLen = 11; private TextView txtView; Timer timer = new Timer(); public void onCreate(Bundle savedInstanceState...
c语言时钟倒计时
06-01
下面是一个简单的 C 语言时钟倒计时的示例代码： ```c #include <stdio.h> #include <stdlib.h> #include <windows.h> int main() { int hour, minute, second; printf("请输入倒计时的小时数："); scanf("%d", &hour); printf("请输入倒计时的分钟数："); scanf("%d", &minute); printf("请输入倒计时的秒数："); scanf("%d", &second); int totalSeconds = hour * 3600 + minute * 60 + second; while (totalSeconds > 0) { system("cls"); // 清屏 printf("倒计时：%02d:%02d:%02d\n", totalSeconds / 3600, totalSeconds % 3600 / 60, totalSeconds % 60); Sleep(1000); // 等待1秒 totalSeconds--; } printf("时间到！\n"); return 0; } ``` 这个程序会先要求用户输入倒计时的小时数、分钟数和秒数，然后计算出总的秒数，再每秒钟更新一次倒计时的显示，直到倒计时结束。注意，这个程序使用了 Windows.h 头文件中的 Sleep 函数来实现等待一秒钟的功能，如果你在其他操作系统上运行这个程序可能需要换成相应的函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值