html如何实现字数计数,html如何实现计数器以及时钟的功能代码

超、凢脫俗 2022-10-05 12:44 120阅读 0赞

本篇文章给大家带来的内容是关于html如何实现计数器以及时钟的功能代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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

varindex=0;

vari=0;

/\*\*

\*对时间进行预先处理，逢60进一

\*/

functioncounter()\{

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;

\}

returntime=minute+":"+second;

\}

/\*\*

\*将获得的时间插入到div的区域

\*/

functionshow()\{

vartime=counter();

document.getElementsByTagName("div")\[0\].innerHTML=time;

\}

/\*\*

\*每秒钟获得一次时间，实现计数功能

\*/

functionset()\{

setInterval("show()",1000);

\}

show();

set();

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

时钟功能的代码：

/\*\*

\*向Date类中添加获取当前时间的方法

\*/

Date.prototype.currentTime=function()\{

varyear=this.getFullYear();

varmonth=this.getMonth()+1;

varday=this.getDate();

varweek=this.getDay();

week="星期"+"日一二三四五六".charAt(week);

month=month<10?"0"+month:month;

day=day<10?"0"+day:day;

varhour=this.getHours();

varsecond=this.getSeconds();

varminute=this.getMinutes();

hour=hour<10?"0"+hour:hour;

second=second<10?"0"+second:second;

minute=minute<10?"0"+minute:minute;

returnyear+"-"+month+"-"+day+""+week+""+hour+":"+minute+":"+second;

\}

functionshowTime()\{

vartime=newDate().currentTime();

document.getElementById("show").innerHTML=time;

\}

functionsetTime()\{

showTime();

setInterval("showTime()",1000);

\}

window.οnlοad=function()\{

setTime();

\}

这样，时钟就完成了！

![ef9c7a286852aa611f094cd33bd79fef.png][]

![AYnvjU4cvkzNAAAAAElFTkSuQmCC][]

本文转载自中文网

[ef9c7a286852aa611f094cd33bd79fef.png]: /images/20221005/0db45726f158490bb6616b78a99f7615.png
[AYnvjU4cvkzNAAAAAElFTkSuQmCC]:

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML中如何实现垂直居中？

在HTML中，实现垂直居中的方式有多种，下面将介绍其中的几种常用方法。方法一：使用Flexbox布局 Flexbox是一种强大的CSS布局模型，它提供了一种简单而灵活的方

我会带着你远行/ 2024年02月26日 03:13/ 0 赞/ 107 阅读

相关【HTML5】逐步分析如何实现拖放功能

最近在写项目时遇到了元素拖拽的需求，因此我在翻阅了大量资料以及多次亲手尝试后，准备对这个功能做一篇完整的博客总结。 ![在这里插入图片描述][watermark_type_Z

悠悠/ 2022年12月11日 03:18/ 0 赞/ 281 阅读

相关 html如何实现文章分类功能,HTML文本自动分类技术的研究与工具的实现

摘要：随着Internet的迅速发展,网络信息不断膨胀。为了提供高效、准确的信息服务,我们需要对网络中繁杂的信息进行合理的组织与分类。本文的目标就是以HTML文本信息处理为

爱被打了一巴掌/ 2022年10月10日 09:45/ 0 赞/ 140 阅读

相关 html如何实现字数计数,html如何实现计数器以及时钟的功能代码

本篇文章给大家带来的内容是关于html如何实现计数器以及时钟的功能代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在许多的网页中，我们都会看到计数器以及

超、凢脫俗/ 2022年10月05日 12:44/ 0 赞/ 121 阅读

相关【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

使用CSS3纯代码来实现模拟时钟，及指针动画功能。在这里主要使用到css3一些基本元素： border-radius：圆角边框，画圆形；表盘 Transf

一时失言乱红尘/ 2022年08月08日 17:48/ 0 赞/ 217 阅读

相关 html页面如何实现中英文切换

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

迷南。/ 2022年04月18日 00:11/ 0 赞/ 1104 阅读

相关 HTML5如何实现视频直播功能

最近视频直播比较火，发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主，PC端则以 RTMP 为主实时性较好，接下来将围绕这两

淩亂°似流年/ 2022年02月23日 14:42/ 0 赞/ 677 阅读

相关 HTML5如何实现表单功能

了解更多h5技术，可参阅千锋教育编著的[《HTML5从入门到精通》][HTML5]附带教材视频、PPT以及项目源码。表单元素 ? 标签：用于创建一个表单，表单里面可以包

旧城等待，/ 2022年01月26日 09:39/ 0 赞/ 359 阅读

相关 HTML实现计算器功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl

小鱼儿/ 2021年09月16日 23:24/ 0 赞/ 589 阅读

相关 html如何实现暗黑模式

其实，我们只是需要使用到css中的 prefers-color-scheme 媒体查询。 no-preference 表示用户未制定操作系统主题。作为布尔值时，为 fa...

小灰灰/ 2020年05月14日 10:42/ 0 赞/ 848 阅读