获取当前时间 和 10s倒计时案例
1.获取当前的时间,时间没分每秒都在走,(把握现在,将来会是美好的!)
<title>获取当前时间</title>
<script type="text/javascript">
onload = function () {//地址对象 函数
setInterval(disptime, 1000);//setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达试
}
function disptime() {
var today = new Date();//获得当前时间
var hh = today.getHours();//获得小时,然后判断小时在哪个时间段
var sj = null;
if (hh <= 12) {
sj = "早上好";
} else if (hh > 12 && hh<= 18) { sj = "下午好";
} else if (hh> 18) {
sj = "晚上好";
}
var doc = document.getElementById('myid');//getElementById()方法返回对拥有指点id的第一个对象的引用 一般用于访问DIV 图片 表单元素 网页标签等,但要求访问对象的id是唯一的
//设置div的内容为当前时间
doc.innerHTML = sj + "<br/>今天日期:" + today.getFullYear() + "年" + (today.getMonth()) + "月" + today.getDate() + "日" + "<br/>现在时间:" + today.getHours() + "时" + today.getMinutes() + "分" + today.getSeconds() + "秒";
}
</script>
</head>
<body >
<div id="myid"></div>
</body>
实现效果截图:
2.10s倒计时效果,按开始按钮,时间变短,按停止按钮,时间暂停,时间为0时,可以跳转到其他页面
<title>10s倒计时效果</title>
<script type="text/javascript">
//1.1 取出div中的变量值
window.onload = function () {
var t1;
//1.4 给开始按钮注册事件
//锁定开始按钮对象
var btnStart = document.getElementById("btnStart");
//结束按钮对象
var btnStop = document.getElementById("btnStop");
btnStop.onclick = function () {
clearInterval(t1);
};
btnStart.onclick = function () {
//1.5
t1 = setInterval(step, 1000);
};
}; function step() {
//1.2 锁定div对象
var dom = document.getElementById("msg");
//1.3 innerText,innerHTML value
var num = dom.innerText;
//1.6 对num进行--操作
if (num > 0) {
num--;
}
//1.7 将运算过的num重新赋值给div的innerText
dom.innerText = num;
} </script>
</head>
<body>
<input type="button" id="btnStart" value="开始" />
<input type="button" id="btnStop" value="停止" /><br />
<div id="msg">10</div> </body>
获取当前时间 和 10s倒计时案例的更多相关文章
- js 获取 当前时间 时间差 时间戳 倒计时
开发web一段时间后发现经常使用时间进行一些操作,比较多的就是获取当前时间.对时间进行比较.时间倒计时.时间戳这些部分,每次去用经常忘总是需要去查询,还是自己总结一下比较靠谱. 获取时间戳的方法: 第 ...
- js 倒计时功能,获取当前时间的年月日,时分秒
一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...
- Java 获取当前时间及实现时间倒计时功能
引言 在一些项目中或是一些特殊的业务场景中,需要用到显示系统的当前时间,以及一些固定的时间倒计时,时间到后做一些什么事情的业务 .接下来咱们就具体看看代码是怎么实现的: <%@ page lan ...
- javascript小技巧:同步服务器时间、同步倒计时
之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个 ...
- JS实现Ajax---例:获取服务器时间
Ajax在本质上是一个浏览器端的技术 XMLHttpRequest XMLHttpRequest对象 XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同. 简而言之:它可以异步 ...
- 浅析libuv源码-获取精确时间
在Timer模块中有提到,libuv控制着延迟事件的触发,那么必须想办法精确控制时间. 如果是JS,获取当前时间可以直接通过Date.now()得到一个时间戳,然后将两段时间戳相减得到时间差.一般情况 ...
- Unity通过NTP获取网络时间
最初通过qq时间服务器获得时间,经常出现有网络也获取失败的情况. 后面寻找解决办法,查找资料终于发现通过ntp时间服务器获取网络时间的方法. 首先游戏开始获得初始化网络时间,通常只获取一次,其他时 ...
- iOS中获取当前时间,设定时间,并算出差值
NSDate *date = [NSDate date];//获取当前时间 NSTimeZone *zone = [NSTimeZone systemTimeZone];//修改时区 NSIntege ...
- Js获取当前日期时间及其它操作
Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份 ...
随机推荐
- 通过API找出Autodesk Vault中某个用户组可以访问的Vault
首先在Vault Explorer中可以这样查看和更改某个用户组有权访问的vault Tools –> Administration –> Global Settings –> Gr ...
- 解决Android studio 非法字符的问题
前言:今天遇到一个问题,从一个项目中把一些类拷贝到Android studio 里面,运行的时候,报错. 显示刚才拷贝的类中有非法字符,我又检查了一遍,发现类中没有非法字符. 在网上查到了,相关的解决 ...
- 【即时通讯】XMPP调试与简单使用
上篇讲了[即时通讯]即时通讯及XMPP概述及环境配置,接下来我们就要进行调试,看看是否可用! 在测试之前我们需要先事先保存一些东西,以便后面使用 —— 登录openfire后台 ——获取服务器名和端口 ...
- jax-rs中的一些参数标注简介(@PathParam,@QueryParam,@MatrixParam,@HeaderParam,@FormParam,@CookieParam)
先复习一下url的组成: scheme:[//[user:password@]host[:port]][/]path[?query][#fragment] jax-rs anotation @Path ...
- 不同servlet版本的web.xml的头部信息
servlet2.5 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...
- 基于微软平台IIS/ASP.NET开发的大型网站有哪些呢?
首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/JAVA平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大M ...
- 试用 Nexus OSS 3.0 的docker仓库 (二)
试用 Nexus OSS 3.0 的docker仓库 (一) : http://www.cnblogs.com/wzy5223/p/5410990.html 三. 创建docker私有仓库,docke ...
- JAVA 8 函数式接口 - Functional Interface
什么是函数式接口(Functional Interface) 其实之前在讲Lambda表达式的时候提到过,所谓的函数式接口,当然首先是一个接口,然后就是在这个接口里面只能有一个抽象方法. 这种类型的接 ...
- 验证位置时发生错误:“org.tigris.subversion.javahl.ClientException......
验证位置时发生错 误:“org.tigris.subversion.javahl.ClientException: RA layer request failed svn: Server sent u ...
- 用CSS3实现背景的固定
今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客..不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的 ...