数字时钟的实现

最新推荐文章于 2024-03-15 10:55:53 发布
最新推荐文章于 2024-03-15 10:55:53 发布
阅读量553 收藏 1
点赞数
分类专栏： 小模块设计 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26297581/article/details/51519471
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数码时钟的实现</title>
</head>
<style>
body{background: blue;color: white;font-size: 30px;}
#div1{width: 300px;height: 36px;border: 1px solid #fff;}
#div1 img{width: 25px; height: 36px;position: relative;}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById("div1");
var aImg=document.getElementsByTagName('img');
var oDate = new Date();
var prevStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + toZero(oDate.getSeconds());
//alert(prevStr);
var nextStr='';
var arr=[];
var timer=null;
for(var i=0;i<aImg.length;i++){
//设定图片的数字。.charAt()方法返回指定索引位置的char值。str.charAt(0)检索str中的第一个字符
aImg[i].src=prevStr.charAt(i)+'.png';
}
setInterval(toChang,1000);
function toChang(){
var oDate = new Date();
    nextStr = toZero(oDate.getHours()) + toZero(oDate.getMinutes()) + toZero(oDate.getSeconds());

  toCom(prevStr,nextStr);

  prevStr = nextStr;
};
function toCom(str1,str2){
arr=[];//这里每次都要清空
for(var i=0;i<str1.length;i++){
if(str1.charAt(i)!=str2.charAt(i)){
arr.push(i);
}
}
startMove();

}
//图像翻转
function startMove(){

var iSpeed = -4;//高度36，运动9次就完成了

timer = setInterval(function(){

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

if(aImg[arr[i]].offsetHeight == 0){
iSpeed = 4;
aImg[arr[i]].src = nextStr.charAt(arr[i]) + '.png';
}

aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
//设置top是为了从中间翻转
aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight/2 - 18 + 'px';

if(aImg[arr[i]].offsetHeight == 36){
clearInterval(timer);
}

}

},10);

}


function toZero(num){
if(num<10){
return "0"+num;
}
else{
return ''+num;
}
};

};
</script>
<body>
<div id='div1'>
<img src="0.png">
<img src="0.png">:
<img src="0.png">
<img src="0.png">:
<img src="0.png">
<img src="0.png">
</div>
</body>
</html>
小允子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数字时钟系统
淑清专栏
03-27 2467
摘  要单片机在多功能数字钟中的应用已是非常普遍的，人们对数字钟的功能及工作顺序都非常熟悉。但是却很少知道它的内部结构以及工作原理。由单片机作为数字钟的核心控制器，可以通过它的时钟信号进行实现计时功能，将其时间数据经单片机输出，利用显示器显示出来。通过键盘可以进行校时、定时等功能。输出设备显示器可以用液晶显示技术和数码管来显示技术。     本系统利用单片机实现具有计时、校时等功能的数字时钟，
程序模拟数字时钟
芒果summer小仙女
04-15 1394
一个电子公司要生产数字时钟，需开发一个程序模拟数字时钟。时钟以秒为单位更新时间。当第一次启动时钟的时候，要提示用户设定当前的时间值。用户要键入一个1-12的数字代表小时，两个不大于59的数字分别代表分和秒值。无效的时分秒将分别被设定为12、00、00。为了加速程序的开发，公司做了一个简单的模拟程序，显示12:00:00—11:59:59范围内的时间值。但没有表明是AM还是PM。 #...
数字钟程序，C语言程序
07-08
基于KEIL的c程序，AT89s52的程序
数字时钟
qq_45229168的博客
11-25 611
数字时钟，满足时，分，秒计数 LIBRARY IEEE; USE IEEE.STD_LOGIC_1164.ALL; USE IEEE.STD_LOGIC_UNSIGNED.ALL; ENTITY shuzideng IS PORT(clk:IN STD_LOGIC; a:OUT std_logic_vector(7 downto 0); b:out std_logic_vector(5 downto 0); nreset1:in std_LOGIC; nreset2:
数字逻辑大作业----数字时钟
qq_60737285的博客
12-30 6829
结合日常生活实际，设计制作一个可以显示时、分、秒的数字钟。24小时为一个计数周期。要求首先设计总体方案；然后设计各单元电路，画出电路原理图，并利用Multisim软件仿真调试单元电路；最后进行系统联调与测试。
数字逻辑-数字钟——沐雨先生
最新发布
Movrain的博客
03-15 1644
数字逻辑-数字钟
FPGA多功能数字钟的设计实现
m0_52507038的博客
01-30 4659
在FPGA中设计实现一个多功能数字钟，具备以下功能：1.准确计时。能显示时分秒，小时的计时为24进制，分和秒的计时为 60 进制。2.准点报时。当“时-分-秒” 为“ XX-59-55、 XX-59-56、 XX-59-57、 XX-59-58、XX-59-59” 时， 蜂鸣器发“ 嘀”；当“时-分-秒” 为“ XX-00-00” 时，扬声器发“ 嗒”。3.校时功能。能够对数字钟的时分秒进行精确的调节。
基于FPGA的数字时钟实现
03-06
总的来说，基于FPGA的数字时钟实现是一个综合性的项目，涵盖了数字逻辑设计、硬件接口编程、时序分析等多个方面。通过这个项目，不仅可以提升对FPGA的理解，也能掌握Verilog编程技巧，同时加深了对数字系统设计流程...
基于verilog的数字时钟实现，
05-06
基于verilog的数字时钟实现，关于闹钟与时钟使用顺序:设置闹钟前 1.打开setAL 2.打开Adj_Min,Adj_Hour 设置完毕后: 1.关闭Adj_Min,Adj_Hour 2.关闭setAL设置时钟时 1.setAL关闭状态 2.2.打开Adj_Min,Adj_Hour，约束...
基于C语言的数字时钟实现定时和显示时间功能
08-03
在本文中，我们将深入探讨如何使用C语言来实现一个数字时钟，该时钟具备定时和显示当前时间的功能。C语言是一种基础且强大的编程语言，适用于编写系统级和嵌入式程序，包括创建实时应用程序，如数字时钟。 首先，...
数字时钟.zip
06-23
现代繁忙的工作与生活中，时间与我们每一个人都有非常密切的关系，每个人都受到时间的影响。为了更好的利用我们自己的时间，我们必须对时间有一个度量，因此产生了钟表。钟表的发展是非常迅速的，从刚开始的机械式钟表到现在普遍用到的数字式钟表，即使现在钟表千奇百怪，但是它们都只是完成一种功能——计时功能，只是工作原理不同而已，在人们的使用过程中，逐渐发现了钟表的功能太单一，没有更大程度上的满足人们的需求。因此在这里，人类不断研究，不断创新纪录。发展到现在人们广泛使用的电子万年历。广泛用于个人家庭,车站, 码头办公室等公共场所,成为人们日常生活中不可少的必需品,万年历给人们生产生活带来了极大的方便，而且大大地扩展了钟表原先的报时功能。诸如定时自动报警、按时自动打铃、时间程序自动控制、定时广播、自动起闭路灯、定时开关烘箱、通断动力设备、甚至各种定时电气的自动启用等，所有这些，都是以数字化为基础的
【VS2010 C# 代码】数字时钟（简单线程应用）
09-23
Microsoft Visual Studio 2010做的C#数字时钟（简单线程、跨线程调用windows窗体控件应用）实例，主要代码： ThreadStart timeThreadStart = new ThreadStart(f_setTime); m_timeThread = new Thread(timeThreadStart); m_timeThread.Start();
基于verilog的数字时钟实现-源码
10-01
总的来说，基于Verilog的数字时钟实现是一个综合性的项目，涵盖了数字逻辑设计的基础知识，包括时钟处理、计数逻辑、状态机设计和接口驱动等。通过实践这样的项目，不仅能够提升对Verilog语言的理解，还能增强硬件...
数字时钟_python_数字时钟_
09-30
在这里，我们主要关注的是“数字时钟.py”文件，它应该包含了上述数字时钟实现的代码。 总的来说，通过学习和实践创建Python数字时钟，你可以掌握GUI编程的基本原理，了解如何使用`tkinter`和`datetime`库，以及...
数电课设数字钟设计（基于quartus）
photon_123的博客
04-02 1万+
数字钟是一种利用数字电路技术实现时、分、秒计时的钟表。与机械钟相比具有更高的准确性和直观性，具有更长的使用寿命，已得到广泛的使用。数字钟的综合性较强，将数字钟作为数电实验大作业的选题不仅可以加深对数电相关理论知识如计数器、组合逻辑电路及时序逻辑电路的理解，还可以有效锻炼工程实践能力。该数字钟以时间显示为基础，在此基础上添加校时及秒表功能，利用Quartus软件设计电路，使用远程平台下载验证。一、方案设计。
【数字电子技术课程设计】多功能数字电子钟的设计
热门推荐
weixin_44450575的博客
07-21 4万+
数字钟是一种用数字电路技术实现时、分、秒计时的装置，与机械式时钟相比具有更高的准确性和直观性，且无机械装置，具有更长的使用寿命，因此得到了广泛的使用。 数字钟从原理上讲是一种典型的数字电路，其中包括了组合逻辑电路和时序电路。目前，数字钟的功能越来越强，并且有多种专门的大规模集成电路可供选择。数字钟适用于自动打铃、自动广播，也适用于节电、节水及自动控制多路电器设备。它是由数子钟电路、定时电路、放大执行电路、电源电路组成。为了简化电路结构，数字钟电路与定时电路之间的连接采用直接译码技术。......
数字电子时钟
粟米茶
05-07 3万+
数字时钟是一种用数字电路技术实现时、分、秒的计时装置，与机械式时钟相比具有更高的准确性和直观性，且无机械装置，具有更长的使用寿命，因此得到广泛的使用。 数字钟从原理上讲的是一种典型的数字电路，其中包括了组合逻辑电路和时序电路。目前，数字时钟的功能越来越强，并且有多种专门的大规模集成电路可供选择。本课程设计通过...
数字电子钟的设计与实现（纯数字电路，Proteus仿真）
嵌入式小学生的博客
01-19 2万+
数字电子时钟设计与实现设计要求设计实现系统概述单元电路设计555 定时器计数电路显示电路 设计要求 1．采用12小时的计时方式。 2．四位数码管显示时、分，小时和分钟间的小数点以1Hz的频率闪烁表示秒。 3．具有快速校时和校分的功能。 设计实现 系统概述 首先，思考时钟的工作方式，六十秒进一位，六十分进一位，十二个小时归零。因为是要通过产生秒脉冲，显示时与分，所以第一应该思考如何产生秒脉冲。可以通过555 定时器外接RC元件构成多谐振荡电路产生秒脉冲。在秒脉冲下，如何通过计数器，实现进位，60s进1min,
基于fpga的数字时钟开发
qq_62946734的博客
12-12 455
【代码】基于fpga的数字时钟开发。
单片机课程设计：数字时钟实现
在这个单片机课程设计中，学生被要求实现一个数字时钟的功能。设计的核心部分是通过单片机控制LED数码管显示时间，并且可能包含简单的按键交互来设置或调整时间。 代码片段展示了如何更新数码管显示的时间。其中，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值