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学 ...
随机推荐
- HDU 1523 Decoding Morse Sequences
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1523 此题大意为 给你一串摩尔斯密码 再给你一个字典(下面单词本) 用下面的单词组合成给你的摩尔斯密 ...
- C#怎么得到主机名,IP,MAC
一:基础知识 a: Dns 类 提供简单的域名解析功能. Dns 类是一个静态类,它从 Internet 域名系统 (DNS) 检索关于特定主机的信息. 在 IPHostEntry 类的实例中返回来自 ...
- ASIHttpRequest或者SDWebImage给UIImageView加载图片的逻辑是什么样子的
非常非常喜欢SDWebImage,就算后来AF也做了图片缓存,我也还是一直使用.图片缓存真的是一件令人头疼的事,但是SDWebImage封装了一切,你所需要的只是简单的set一个URL:1.设置一个展 ...
- Java调用R（三）_系统命令调用
java通过配置的系统命令Rscript直接调用R脚本. 优点:R脚本和Java代码完全分离 缺点:R中变量不能控制 1. Java本地能够成功调用. public void CallR() { Ru ...
- Intellij 快捷键大全
Intellij IDEA的快捷键非常好用,能大大提高我们的开发速度.这里列举了一些常用的快捷键. 快速查找: Ctrl+N 查找类 Ctrl+R 替换当前窗口的文本 Ctrl+F 当前代码中查 ...
- spring注解方式实现定时器，并且cron表达式中不识别L的方法
1.Spring的配置: <beans xmlns:task="http://www.springframework.org/schema/task" xsi:schemaL ...
- 关于STM32 RTC的使用
直接上代码,很爽. 1.RTC的首次初始化问题 使能时钟:RCC_APB1PeriphClockCmd(RCC_APB1Periph_PWR | RCC_APB1Periph_BKP, ENABLE) ...
- 分享一个linux和linux的文件传输【scp无密码传输】
很多时候,本地测试服务器想把文件传到线上服务器的时候,很多人都是通过登陆线上服务器ssh 传输,这样挺危险的,很多弊端....所以我找了下方法,发现scp挺好用的! 模拟环境: 192.168.147 ...
- 在Ubuntu上下载、编译和安装Android最新源码
看完了前面说的几本书之后,对Linux Kernel和Android有一定的认识了,是不是心里蠢蠢欲动,想小试牛刀自己编译一把Android源码了呢?一直习惯使用Windows系统,而Android源 ...
- InnoDB主要数据结构及调用流程
InnoDB主要数据结构及调用流程 InnoDB是MySQL中常用的数据引擎.本文将从源码级别对InnoDB重点数据结构和调用流程进行分析. 主要数据结构(buf0buf.h) Buf_pool Bu ...