1.对于当前的时间,我们可以通过 new Date()来获取,这是计算机的时间
var nowtime=new Date();
2.如果是自己的定义的时间:
var mytime=new Date(“2019/3/20 11:20”);
3.如果是时间差:(就像计算倒计时)
var res=mytime-nowtime;
4.一般计算时间的话:
res/1000/3600 是一小时的量
res/1000/60%60是一分钟的量
res/1000%60 是一秒钟的量
1秒=1000毫秒
5.静态倒计时代码
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div>span{
display: inline-block;
width: 100px;
height: 20px;
border: 1px solid blue;
border-radius: 2px;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div>
距离下课还有:<span id="h"></span>小时<span id="min"></span>分钟<span id="m"></span>秒
</div>
<script>
var mydate=new Date("2019/3/20 17:30");
var nowtime=new Date();
var res= mydate-nowtime ;
var h=Math.floor(res/3600/1000);//用到的Math.floor的方法是存在小数问题的话就可以向下取整数
var min=Math.floor(res/1000/60%60); //有时候可能出现大于60分钟的时候。就利用求余的方式来写
var m=Math.floor(res/1000%60);
function $(id){
return document.getElementById(id);
}
$("h") .innerHTML=h;//把小时的值引入到html页面当中去,引用的id值的话,上面的function函数就必不可少
$("min").innerHTML=min;
$("m").innerHTML=m;
</script>
下面就是效果图:
6.如果想要动态的倒计时(周期性的定时器):(将自己定义的时间卡在计算机进行的时间,会随着计算机的时间的流动而变化,就形成了一种动态的效果)
这个时候就需要一种方法
setInterval(function(){你需要看到时间变化的程序,比如说倒计时的静态全部程序就可以放在这里},1000);
后面的1000参数 是希望能够以秒的形式出现。
最后利用:
window.onload=setInterval();
实现动态的倒计时的功能
看下面
(上面的代码不变,纠正script部分的代码如下:)
<script type="text/javascript">
window.onload=timer;
var timer=setInterval(
function (){
var mydate=new Date("2019/3/20 17:30");
var nowtime=new Date();
var res= mydate-nowtime ;
var h=Math.floor(res/3600/1000);
var min=Math.floor(res/1000/60%60);
var m=Math.floor(res/1000%60);
function $(id){
return document.getElementById(id);
}
$("h") .innerHTML=h;
$("min").innerHTML=min;
$("m").innerHTML=m;
}
);
</script>
效果是不断在动的,大家可以自己试一下。
7.关于上面代码的补充说明就是:
函数调用时 是名字();
如果是调用的函数本身的话就是名字就行了
var a=function(){
return 10;
}
console.log(a());//打印结果为10
console.log(a);
//打印结果为function(){return 10;}
8.解绑定时器:clearInterval(写上创建定时器的名字);
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid red;
color: black;
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//第一种解绑的方法
var box=document.getElementById("box");
var n=10;//从10开始向下计数
var timer=setInterval(aa,1000);
function aa(){
box.innerHTML=n;//注意innerHtml方法的拼写
n--;//不断减小数
if(n==0){//到0秒为止停止
clearInterval(timer);
}
}
//第二种 解绑的方法
function $(id){
return document.getElementById(id);
}
var n=10;
var timer=setInterval(aa,1000);
function aa(){
$("box").innerHTML=n;
n--;
if(n==0){
clearInterval(timer);
}
}