在JavaScript中，有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新，通过代码来创造一个实实在在的时间表。

　　代码例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

         <meta charset="UTF-8">

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

         <meta name="Genarator" content="sublime"/>

     <title>时间的实现</title>

     <style type="text/css">

        #timetxt{

              width:100px;

              height:40px;

              background-color:#EABC46;

              font-size:20px;

              line-height:40px;

              margin:auto auto;

              text-align:center;

        }

     </style>

     <script type="text/javascript">

        function startTime(){

           var today=new Date(); //定义时间

           var h=today.getHours();  //小时

           var m=today.getMinutes();  //分钟

           var s=today.getSeconds();  //秒

           //调用函数

            h=checkTime(h);

            m=checkTime(m);

            s=checkTime(s);

           document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //时间显示的格式

           t=setTimeout(function(){

             startTime();

           },500);//500，是延时显示的意思,即500毫秒更新一次

        }

        //当分钟和秒是一位时候，需要在前面加0（才更符合要求）

        function checkTime(i){

          if(i<10){

            i="0"+i;

          }

          return i;

        }

        </script>

 </head>

     <body onload="startTime()">

        <div id="timetxt"></div>

     </body>

 </html>

JavaScript时钟效果的更多相关文章

  1. 原生javascript实现网页显示日期时钟效果

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. 转 CSS3+js实现多彩炫酷旋转圆环时钟效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. JS实现时钟效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 学习CSS之用CSS实现时钟效果

    一.机械时钟 1.最终效果 用 CSS 绘制的机械时钟效果如下: HTML 中代码结构为: <body>     <div class="clock">   ...

  7. Flash AS实现时钟效果（全脚本实现）

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  8. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  9. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

随机推荐

  1. 转「服务器运维」如何解决服务器I/O过高的问题

    问题缘起: 当我习惯性地用top查看任务运行状态时,发现我运行的100个任务,只有3个在运行,其他都在摸鱼状态.同时发现我的任务进程都是"D"状态(未截图),而不是R(运行)状态. ...

  2. 003——angular 组件 以及组件里面的模板

    创建组件: ng g component components/news 一.创建 angualr 组件................................................ ...

  3. 使用 Ninja 代替 make

    使用 Ninja 代替 make 摘自:https://www.jianshu.com/p/d118615c1943 22017.01.14 11:41:44字数 1408阅读 26336 前言 在传 ...

  4. [整理]Python程序员面试前需要看的博客(持续整理)

    基本素养 如何聪明的提问 面试方法 从面试官角度来告诉大家,哪些人能面试成功 如何在面试中介绍自己的项目经验 计算机系统 [面试] 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清 ...

  5. WITH ROLLUP、WITH CUBE、GROUPING语句的应用

    作者:Bobby0322 CUBE 和 ROLLUP 之间的区别在于:CUBE 运算符生成的结果集是多维数据集.多维数据集是事实数据的扩展,事实数据即记录个别事件的数据.扩展建立在用户打算分析的列上. ...

  6. spring 使用@AspectJ注解开发Spring AOP

    选择切点 Spring是方法级别的AOP框架,而我们主要也是以某个类的某个方法作为切点,用动态代理的理论来说,就是要拦截哪个方法织入对应AOP通知. 代码清单:打印角色接口 package com.s ...

  7. 基于Java API for WebSocket (JSR-356)的标准websocket客户端

    maven依赖 springboot <dependency> <groupId>org.springframework.boot</groupId> <ar ...

  8. Jrebel激活方法(转)

    本次服务长期稳定提供给各位同学使用哦!服务器地址:https://jrebel.qekang.com/{GUID}在线GUID地址:在线生成GUID如果失效刷新GUID替换就可以!打开jrebel 激 ...

  9. 《第一本Docker书》学习笔记——第4章 使用Docker镜像和仓库

    4.2 列出镜像 使用docker images命令: sudo docker images 本地镜像都保存在Docker宿主机的/var/lib/docker目录下. 也可以在/var/lib/do ...

  10. 【Leetcode_easy】893. Groups of Special-Equivalent Strings

    problem 893. Groups of Special-Equivalent Strings 题意: 感觉参考代码也是有点问题的... 参考 1. Leetcode_easy_893. Grou ...