用HTML实现计数器功能

在许多的网页中，我们都会看到计数器以及时钟，那么我们怎么自己实现着种功能呢？

先说计数器，计数器的逻辑功能很简单，就是秒针每秒加一，逢60进一就可以。代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div></div><script>var index = 0;var i=0;/*** 对时间进行预先处理，逢60进一*/function counter(){second = index;minute=i;index++;if(second==60){second=0;i++;index=0;}if(second<10){second = "0"+second;}if(minute<10){minute="0"+minute;}return time = minute +":"+second;}/*** 将获得的时间插入到div的区域*/function show(){var time = counter();document.getElementsByTagName("div")[0].innerHTML=time;}/*** 每秒钟获得一次时间，实现计数功能*/function set(){setInterval("show()",1000);}show();set();</script></body>
</html>

这样，一个简单的计数器就完成了。

时钟功能的代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>/*** 向Date类中添加获取当前时间的方法*/Date.prototype.currentTime = function(){var year = this.getFullYear();var month = this.getMonth()+1;var day = this.getDate();var week = this.getDay();week = "星期"+"日一二三四五六".charAt(week);month = month<10 ? "0"+month : month;day = day < 10 ? "0"+day : day;var hour = this.getHours();var second = this.getSeconds();var minute = this.getMinutes();hour = hour<10 ? "0"+hour : hour;second = second < 10 ? "0"+second : second;minute = minute < 10 ? "0"+minute : minute;return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;}function showTime(){var time = new Date().currentTime();document.getElementById("show").innerHTML = time;}function setTime(){showTime();setInterval("showTime()",1000);}window.onload = function(){setTime();}</script></head><body><span id="show"></span></body>
</html>

这样，时钟就完成了！

用HTML实现计数器功能相关推荐

mysql点击计数器_MySql计数器，如网站点击数，如何实现高性能高并发的计数器功能...
MySql计数器,如网站点击数,如何实现高性能高并发的计数器功能 Clicks: 5338 Date: 2014-03-29 23:30:42 Power By 李轩Lane TagMysql计数器高 ...
实现74LVC161的计数器功能
VerilogHDL程序设计与仿真作业8: --实现74LVC161的计数器功能文章目录 VerilogHDL程序设计与仿真作业8: --实现74LVC161的计数器功能一.实验目的二.实现74 ...
PLC实验：定时器/计数器功能实验
实验项目名称:定时器/计数器功能实验一.实验控制要求 1.延时启动程序按下按钮 I0.0,指示灯 Q0.0 延时 6 秒后启动,按下停止按钮 I0.1,指示灯立即熄灭. 2.闪烁程序按下启动按钮 ...
php如何设置计数器,PHP语言之php实现计数器功能
本文主要向大家介绍了PHP语言之php实现计数器功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. '' /** * * 计数器(v1.1.0) * * Version : 1.1 ...
Android studio实现计数器功能
Android studio实现计数器功能我们使用原生计时器CountDownTimer 1.首先自己建立一个布局TextView------(countdown我自己定义的名字)可以显示文字 2. ...
redis mysql 原子计数器_使用redis的increment()方法实现计数器功能案例
一直知道redis可以用来实现计数器功能,但是之前没有实际使用过,昨天碰到一个需求:用户扫码当天达到20次即提示:当日扫码次数达到上限! 当时就想到使用redis的递增方法increment()来实现 ...
基本指令的编程练习-PLC认识实验-定时器/计数器功能实验
微信公众号:创享日记发送关键词:plc1 免费获取完整无水印实验报告 [PLC认识实验] 一.实验目的 1.了解PLC软硬件结构及系统组成; 2.掌握PLC外围直流控制及负载线路的接法及上位计算机与 ...
使用Verilog实现FPGA计数器功能
本人地大14级师兄,如果有学弟学妹搜到这个评论一个呗! 一.设计要求编写VerilogHDL程序,实现如下功能: 利用开发板上的数码显示译码器设计一个十进制计数器,要求该计数器具有以下功能: 1.计 ...
单片机计数器实验代码c语言,单片机计数器功能实验程序
一.实验要求 8031内部定时计数器,按计数器模式和方式1工作,对P3.4(T0)引脚进行计数.使用8031的T1作定时器,50ms中断一次,看T0内每0.50ms来了多少脉冲,将其数值按二进制数在7 ...

用HTML实现计数器功能

用HTML实现计数器功能相关推荐

最新文章

热门文章