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是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...
随机推荐
- win7以管理员身份运行bat提示系统找不到指定的路径。
windows7“以管理员身份运行”bat提示“系统找不到指定的路径.” 使用批处理安装服务,直接双击运行没有权限,右键“以管理员身份运行”却提示“系统找不到指定的路径.”,反复查看路径是正确的. 打 ...
- quartus II PIN脚相关之一
FPGA设计中有时候会改变输入输出名称,但是会带来一个问题,在PIN 叫配置页面上会有余留的久名称的Pin脚.如实例中,把 FPGA_CLK_50MHZ 名称修改为 FPGA_CLK,经过编译综合之后 ...
- ForeignKey 的第二个位置参数on_delete
on_delete指的是通过ForeignKey连接起来的对象被删除后,当前字段怎么变化. 常见的选项有: models.CASCADE,对就对象删除后,包含ForeignKey的字段也会被删除 mo ...
- The default for KeyValuePair
if (getResult.Equals(new KeyValuePair<T,U>())) or this: if (getResult.Equals(default(KeyValueP ...
- 多个字段用and和or时要注意用括号。
多个字段用and和or时要注意用括号. 新技能get! create table wly_test (name1 varchar2(10),number1 number(6),score1 numbe ...
- 全局修改Lable/Button字体
本次版本需求要把原来的字体全改掉,由于项目中有的是代码创建的,有的是XIB中直接改的,一个一个改工作量太大,使用运行时可以很轻松的实现 首先,项目中大多数设置字体的控件有 Lable, ...
- iOS开发--应用设置及用户默认设置【1、bundle的运用】
在iphone里面,应用都会在“设置”里面有个专属的应用设置,选择该菜单界面,用户便可以在其中输入和更改各种选项,协助用户更便捷设置个人喜好与习惯. 在这一节中,希望能通过对捆绑包(bu ...
- Linux：ssh连接服务器很慢
ssh连接服务器,如果很慢,可以进行如下处理: vi /etc/ssh/sshd_config#UseDNS yes改成:UseDNS no/etc/init.d/sshd restart ----- ...
- leetcode 169
169. Majority Element Given an array of size n, find the majority element. The majority element is t ...
- Inside The C++ Object Model - 02
前言 - 什么是C++对象模型 C++对象模型包括2个方面的含义: 1.语言中直接支持面向对象程序设计的部分 2.对于各种(面向对象)支持的底层实现机制. 无论是什么语言,都需要转换为汇编.很多面向对 ...