1、获取到系统时间

2、获取到当地时间字符串

3、开启延时器，每一秒刷新一次时间

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="keywords" content="关键字列表" />

    <meta name="description" content="网页描述" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

        #box{

            width:300px;

            height:200px;

            text-align:center;

            line-height:200px;

            background-color:#4d90fe;

            margin:0 auto;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script type="text/javascript">

        //肯定需要有一个延时器

        //如何将str这个变量的值写入到div中

        // JS想要操作HTML代码  document.getElementById()

        //get  Element   By   Id()  //通过标签的指定的ID属性值来获取HTML元素

        function f1(){

            //创建时间日期对象

            var myDate = new Date();

            var str = myDate.toLocaleString();

            //console.log(document.getElementById("box"));

            //JS有一个非常可爱的属性 叫 innerHTML 它主要的作用就是用来 往双边标签中书写内容

            document.getElementById("box").innerHTML = str;

            setTimeout(f1,1000);

        }

        f1();

    </script>

</body>

</html>

效果图预览：

用setTimeout实现动态时钟的效果的更多相关文章

  1. CSS3_过渡_2D 变换_瓶体旋转_动态时钟

    1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡, 在鼠标点击,鼠标滑过或对属性改变中触发,并圆滑的改变 CSS 的属性值 简写属性: #box { width: 300 ...

  2. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  3. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. js+css3动态时钟-------Day66

    昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在 ...

  5. JavaScript+svg绘制的一个动态时钟

    结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...

  6. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  7. HTML5动态时钟

    实现效果 源码可以去github下载 地址:https://github.com/feifeiliu/jsBlock 参考:慕课网动态时钟

  8. .NET实时2D渲染入门·动态时钟

    .NET实时2D渲染入门·动态时钟 从小以来"坦克大战"."魂斗罗"等游戏总令我魂牵梦绕.这些游戏的基础就是2D实时渲染,以前没意识,直到后来找到了Direct ...

  9. linux动态时钟探索

    在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...

随机推荐

  1. VisualSVN Server提供程序无法执行所尝试的操作 0x80041024

    VisualSVN安装后没有提供VisualSVN Server Manager的快捷方式,如下图: 可以在安装目录的bin文件夹下找到VisualSVN Server.msc,添加快捷方式.建议Vi ...

  2. 配置Linux本地源镜像

    今天看到同事做了一个公司本地的apache镜像源,感觉好叼的样子.然后就自己上网找些资料,尝试自己搭建一套出来.然后就有了这篇博文... 声明:本文中充满了浓浓的技术嫉妒的心理,阅读需谨慎. 本文以 ...

  3. C#(winform)的label自动换行

    Label 是没有自动换行属性的,不像Textbox有WordWrap属性 尽管没有自动换行的属性,但也能够自动换行, 首先 AutoSize改成false; 然后调整 Label的大小,长和宽 (也 ...

  4. R语言查找变量ls函数

    要知道目前在工作区中的可用变量,可以使用 ls()函数列出所有变量. 另外,ls() 函数可以使用模式来匹配变量名称. print(ls()) 当上面的代码执行时,它产生以下结果: [1] " ...

  5. <机器学习实战>读书笔记--k邻近算法KNN

    k邻近算法的伪代码: 对未知类别属性的数据集中的每个点一次执行以下操作: (1)计算已知类别数据集中的点与当前点之间的距离: (2)按照距离递增次序排列 (3)选取与当前点距离最小的k个点 (4)确定 ...

  6. rails 中 create, new, build, save 的用法以及误区汇总 （转）

    自己很初级,初级的不能再初级,所以初次接触rails的时候,对于里面的create,new,build等方法不是很了解,用的很混乱,导致经常出现不必要的bug,很苦恼,决定,总结一下,结合网上已有资源 ...

  7. JAVA是否允许返回值类型不同的重载overload或覆盖override

    在看<Thinking in java>的时候,看到子类的方法和父类的方法名字相同,但是返回值类型不同,然后就开始怀疑这属于覆盖吗,到网上找到了答案,分析见接下来的网址: http://g ...

  8. 关于UI回调Invoker的实现（二）

    上篇我说到,光有一个IOperation*的指针,是无法记录这么多事件的.由于无法确定要把回调绑定到哪个事件上,因此,我们需要引入一个中间的传递机制. 没有看到前面的请先查阅上一篇 关于UI回调Inv ...

  9. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  10. js中常用的算法排序

    在工作中都会经常用到的一些基础算法,可以很快解决问题.这些都是在工作中总结的,希望可以帮助到大家. 一.数组乱序 arr.sort(function randomsort(a, b) { return ...