JavaScript--Date（）日期类型
标签：
JavaScript
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);
}
}
谢谢大家啦~
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦