js学习笔记之：时间（三）
今天来学习一个简单的时间应用：时间的倒影，如图所示：
主要知识点： 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学习笔记之：时间（三）的更多相关文章
- JS学习笔记：（三）JS执行机制
首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...
- 一点感悟：《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
随机推荐
- Qt入门（7）——窗口几何结构
QWidget提供了几个处理窗口几何结构的函数.这些函数中的几个操作纯客户区域(例如不包含窗口框架的窗口),其它一些包括窗口框架.它们之间的区别在某种意义上被完成覆盖明显地最普通的方法.包括窗口的框架 ...
- 2013年6月19日星期三java中函数地址值传递
今天代码审核时确认了一个问题,理解了java中string和stringbuffer赋值问题,看到一个帖子很好,摘录如下: 理解这两个例子需要分清实参和形参的区别,引用和对象的区别 第一个例子的内部执 ...
- JavaScript 调试常见报错以及修复方法
(看到一篇调试JS很有用的文章,收藏一下) JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助.有个查找错误含义,及修复措施的列表,是不是很有用? 以下是奇怪的 ...
- hdu 4619 二分图最大匹配 ——最大独立集
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4619 #include <cstdio> #include <cmath> # ...
- tomcat中debug启动和start启动的区别
debug启动tomcat:修改代码不加方法,不加参数,只是单纯的修改方法,不用重启tomcat(热部署). start启动tamcat:修改代码需要重启tomcat.
- 360. Sort Transformed Array
一元二次方程...仿佛回到了初中. 主要看a的情况来分情况讨论: =0,一次函数,根据b的正负单调递增递减就行了. <0,凸状..从nums[]左右两边开始往中间一边比较一边 从右往左 放: 0 ...
- 利用jks2pfx转换keystore格式的证书为pfs格式（含秘钥和证书的形式）
利用java语言写的openssl转换证书格式工具,使用方法如下所示: Java KeyStore文件转换为微软的.pfx文件和OpenSSL的PEM格式文件(.key + .crt)运行方式:JKS ...
- shell 二元操作符 =~
17:14 [logc@a005.client.hadoop.qingdao.youku]$ a=1 17:14 [logc@a005.client.hadoop.qingdao.youku]$ if ...
- mysql 添加定时任务
之前定时任务都是用quartz 或者spring的任务调度来做的,易于管理,但是要写代码加 配置,其实mysql 自带了job ,先创建一个存储过程
- C# Eval在aspx页面中的用法及作用
Eval( " ")和Bind( " ") 这两种一个单向绑定,一个双向绑定,bind是双向绑定,但需数据源支持 ASP.NET 2.0改善了模板中的数据绑定操 ...