JavaScript-setInterval-周期性行定时器-倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>距离放学还有<span id="time"></span></h1>
<button onclick="stop(this)">||</button>
<script>
//定义任务函数,计算now到target的时间差
function task(){
//定义目标时间end:2016年9月13日 12:00
var end=new Date("2016/12/28 23:00");
//获得当前时间now
var now=new Date();
//获得时间差(s):end-now/1000
var s=Math.round((end-now)/1000);
//求小时(h):
var h=Math.floor(s/3600);
//如果h<10,就改为0+h
h<10&&(h="0"+h);
//求分钟(m):
var m=Math.floor(s%3600/60);
//如果m<10,就改为0+m
m<10&&(m="0"+m);
//求秒(s):
s%=60;
//如果s<10,就改为0+s
s<10&&(s="0"+h);
//找到id为time的span,设置其内容为:h:m:s
document.getElementById("time").innerHTML=h+":"+m+":"+s;
}
task();
//启动定时器
var timer=setInterval(task,1000);
//停止定时器
function stop(btn){
//如果btn的内容为||
if(btn.innerHTML=="||"){
//停止定时器
clearInterval(timer);
//修改btn的内容为|>
btn.innerHTML="|>"}
//否则
else{
//启动定时器
timer=setInterval(task,1000);
//修改btn的内容为||
btn.innerHTML="||";
}
}
</script> </body>
</html>
JavaScript-setInterval-周期性行定时器-倒计时的更多相关文章
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- 前端笔记之JavaScript（九）定时器&JSON&同步异步/回调函数&函数节流&call/apply
一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据 ...
- Flutter 快速上手定时器/倒计时及实战讲解
本文微信公众号「AndroidTraveler」首发. 今天给大家讲讲 Flutter 里面定时器/倒计时的实现. 一般有两种场景: 我只需要你在指定时间结束后回调告诉我.回调只需要一次. 我需要你在 ...
- JavaScript指定周期来调用函数setTimeout和setInterval
setTimeout方法:setTimeout setInterval方法:setInterval
- JavaScript对象(窗口对象 定时器对象 )
1:窗口时间 confirm(str):确认对话框,确认返回trun,取消返回false,但是必须要有两个return:不然就算按下取消也会提交 第一个return:用于保证确认按钮运行 <sc ...
- window.clearInterval与window.setInterval的用法 定时器的设置
window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) code:在指定时间到时要执行的Java ...
- JavaScript SetInterval与setTimeout使用方法详解
setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 ...
- JavaScript学习笔记-简单的倒计时跳转页面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 深入理解JavaScript定时机制和定时器注意问题
容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...
随机推荐
- AX dynamics 2012 ssrs 开发报错：Native compiler return value: ‘[BC30179]
具体报错内容如下: System.Web.Services.Protocols.SoapException: An unexpected error occurred while compiling ...
- 6.3Sum && 4Sum [ && K sum ] && 3Sum Closest
3Sum Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find a ...
- AX 4.0 调用打印设定的功能
PrintJobSettings printJobSettings; PrintJobSettings printJobSettings2; Boolean ok; container packPri ...
- MySQL 批量插入 Update时Replace
建一张试验表如下: 一.批量插入 MySQL的INSERT有一种写法如下: INSERT INTO person VALUES (NULL,'关羽', '2016-04-22 10:00:00'), ...
- 第五百七十七天 how can I 坚持
今天看了个电影<七月与安生>,挺不错,周冬雨,马思纯,然后就突然有了个想法,过年不回家了,去趟拉萨,或许只是想想吧,不知道有没有勇气去啊,何况是自己一个人,但是又想,旅行要是没点冒险的话, ...
- Hadoop HDFS编程 API入门系列之HdfsUtil版本2（七）
不多说,直接上代码. 代码 package zhouls.bigdata.myWholeHadoop.HDFS.hdfs1; import java.io.FileInputStream;import ...
- React学习之一：React初探
一,React简介 React是由Facebook和Instagram开发的一套创建用户界面的JavaScript库.许多人认为React是MVC中的V. React创建的目的是为了:构建数据随时会改 ...
- Linux相关文章
1.linux 中特殊符号用法详解 2.linux之vim命令 3.linux各文件夹的作用 4.修改linux文件权限命令:chmod 5.CentOS 6.6下安装配置Tomcat环境 6.lin ...
- H5测试区别与PC端测试关注点
除了基本的业务逻辑功能测试之后,H5页面的测试,需要关注以下几点: 1. 通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2. 横屏竖屏相互切换,能自适应,并且布局不 ...
- java 封装httpclient 的get 和post 请求
import java.io.ByteArrayOutputStream; import java.io.UnsupportedEncodingException; import java.util. ...