今天来学习一个简单的时间应用：时间的倒影，如图所示：

 

主要知识点： 1  获取系统的时间值；2 建立一个div的倒影

div的倒影主要利用css来控制，函数值为：filter:flipv()

步骤一（建立HTML和css样式）：

<body onload="init()">
         <div id="time1"  class="time" style="width:8; height:8; top:9; left:35;"></div>
         <div id="time2"  class="time" style="filter:flipv() alpha(opcity=30); font-style:italic";></div>
      </body>

<style>
          .time{font-family:"Comic Sans MS"; font-size:20pt; font-weight:bold; color:#OF808F; color:#F00;}
       </style>

步骤二（编写js代码）：

function init(){
         if(document.all){    
         var oTime1 = document.getElementById("time1");
         var oTime2 = document.getElementById("time2");
         oTime2.style.left = oTime1.style.posLeft;
         oTime2.style.top = oTime2.style.posTop + oTime1.offsetHeight-5;
         settimes();
        }
     }

function settimes(){
        //获取时间值
       var time = new Date();
       hours = time.getHours();
       mins = time.getMinutes();
       secs = time.getSeconds();

if(hours <10){hours = "0" + hours;}
      if(mins <10){mins = "0" + mins;}
      if(secs <10){secs = "0" + secs;}
   
     var oTime1 = document.getElementById("time1");
     var oTime2 = document.getElementById("time2");
      //将时间值插入div
     oTime1.innerHTML = hours+":" + mins + ":" + secs;
     oTime2.innerHTML = hours+":" + mins + ":" + secs;
      circletimer = setInterval('settimes()',1000); //获取方法本身，让时钟不停在走
    }

有关时间的值的获取，想必大家都会，这里值得一说的是，使用了间隔型定时器 setInterval，来触发调用自己：settimes()，以保证时间不停在走，这是一个定时器很常用的写法，就是回调自己这个本身的函数，来获取到循环执行某段代码；

js学习笔记之：时间（三）的更多相关文章

  1. JS学习笔记：（三）JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

  2. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  3. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  10. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. 动态规划（斜率优化）：[CEOI2004]锯木厂选址

    锯木场选址(CEOI2004) 从山顶上到山底下沿着一条直线种植了n棵老树.当地的政府决定把他们砍下来.为了不浪费任何一棵木材,树被砍倒后要运送到锯木厂. 木材只能按照一个方向运输:朝山下运.山脚下有 ...

  2. win7使用USB转串口连接mini2440方法

    不想嚼别人吃剩的馍.我只说我自己是怎么痛苦的连上的. 环境设备: window7笔记本,没有串口,装有XP和Ubuntu2个虚拟机(不是必须的,我只是说明一下我的环境) 友善之臂mini2440(含U ...

  3. guid转int

    如果你想生成一个数字序列,你将会获得一个19位长的序列. 下面的方法会把GUID转换为Int64的数字序列.  private static long GenerateIntID()  {       ...

  4. linux下安装python linux下一些常用的命令

    注意 ubuntukylin-14.04.2-desktop-amd64 自带python2.7.6 这个说的比较详细 http://wenku.baidu.com/link?url=gaeFcQrc ...

  5. 使用HttpWebRequest进行请求时发生错误：基础连接已关闭，发送时发生错误处理

    原文地址:http://blog.csdn.net/hawksoft/article/details/21776009 最近调试原来的微信模拟登陆时发生了“基础连接已关闭,发送时发生错误”的错误提示, ...

  6. G - Shuffle'm Up

    题目大意: 是一个洗牌游戏,首先给出两堆牌,s1,s2,先从s1上面拿一张牌再从s2上面拿一张牌依次往下可以洗好牌,然后把洗好的牌再分成两堆继续洗,直到这堆牌的顺序与给的顺序相同可以停止,当然如果洗不 ...

  7. 对Spring的一些理解

    最近在复习一些关于框架的概念性问题,主要是为了最近的面试,怕被问到这些概念性的问题.不过在真正做开发的时候还是要好好理解这些框架的基本原理,以及它们的工作流程.这样,我们才能更好的使用这些框架.下面就 ...

  8. 计数dp-hdu-4054-Number String

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4055 题目大意: 给一个只含‘I','D','?'三种字符的字符串,I表示当前数字大于前面的数字,D ...

  9. C# 读取XML文件示例

    有关XML文件编写规范,请参考:http://www.w3school.com.cn/xml/index.aspXML内容如下(文件名为:Information.xml):浏览器显示: <?xm ...

  10. Delpoyment assembly

    遇见异常: java.lang.ClassNotFoundException: 原因:没有对tomcat进行依赖说明 解决: properties - Delpoyment assembly 将tom ...