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

程序员文章站 2022-04-24 08:09:38

...

本篇文章给大家带来的内容是关于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如何实现计数器以及时钟的功能代码

html5以及jQuery实现本地图片上传前的预览代码实例讲解

vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知

HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

在知乎复制的文本为什么会自带一些版权声明，这个功能如何实现？实现代码教程

html5 拖拽及用 js 实现拖拽功能的示例代码

小弟我的php代码和html代码在一个页面，用$.ajax给自身传值小弟我想实现修改的功能

如何用 php代码实现 ios 等多台设备的推送信息功能？

html - Jquery PHP 如何实现SF中Markdown图片显示的功能？

HTML5声音录制/播放功能的实现代码

MySql计数器，如网站点击数，如何实现高性能高并发的计数器功能