日期函数 ( Date() )
这个函数 (对象) 可以设置我们本地 日期。 年月日 时分秒
1.声明日期
var date = new Date();
创造声明一个新的日期函数 赋值给了 date
var arr = new Array();
2.使用函数
得到 毫秒数 ms s m h
从 1970 年1 月1号 unix 32位 68年
2038 千年虫 64 位
var date = new Date();
date.getTime();
date.valueOf(); 得到 距离 1970年的毫秒数
var date = new Date(); // 声明
console.log(date.getTime()); // 提倡使用的
console.log(date.valueOf());
// 直接使用
console.log(Date.now());
console.log(+new Date());
常用的日期的方法
案例:日历(获取当前时间)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 150px;
height: 180px;
background-color: #369;
margin: 100px auto;
text-align: center;
}
.box p {text-align: center;
line-height: 60px;
font-size:12px;
color: #fff;
}
.box span{
display: block;
width: 75px;
height: 75px;
margin: 0 auto;
font-size:50px;
color: #000;
background-color: yellowgreen;
line-height: 75px;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
var boys = box.children;
//日期函数
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var date = new Date(); // 声明日期函数
boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) +
"月" + date.getDate() + "日" + " " + arr[date.getDay()];
boys[1].innerHTML = date.getDate(); // 今天的日子
}
</script>
</head>
<body>
<div class="box" id="box">
<p></p>
<span></span>
</div>
</body>
</html>
定时器
很多情况下,一些操作不需要人工干预, 代码自己会不断的去执行 。
而且会有时间的绑定 。 比如每隔 5秒钟就去执行一次事件。
我们可以设定时间 让某个动作不断的去执行 。 这个我们再js 里面用定时器来表示。
window.setInterval(“执行的函数”,间隔时间)
正确的写法:
setInterval(fun, 1000); 1000 ms 毫秒
每隔1秒钟,就去执行一次 fun 这个函数.
setInterval(“fun()”,1000) 可以用
setInterval( function(){} , 1000 )
setInterval(fun(),1000) 错误的
定时器 特别的像 for 循环,但是我 的定时器最大的特点在于, 自动,可以设定时间。
案例源码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
setInterval(fn,1000); // 每隔1秒,就去 调用 一次 fn 这个函数
var num = 1;
function fn(){
num++;
demo.innerHTML = num ;
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
倒计时
倒计时 = 用将来的时间 - 现在的时间
问题: 用 毫秒减去 现在距离 1970年1
将来时间 距离 1970 毫秒数
用将来的毫秒数 - 现在的毫秒数 不断转换就可以了
定义自己的日子
var endTime = new Date(“2016/12/12”);
如果date 括号里面写日期 就是 自己定义的时间
如果 date括号里面不写日期 , 就是当前时间 。
new Date(“2016/12/12 17:30:00”);
日期和时分秒中间 有空格隔开
常考面试题:
倒计时案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size: 30px;
text-align: center;
color: red;
}
</style>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var endTime = new Date("2016/12/12 17:30:00");// 最终时间
setInterval(clock,1000); //开启定时器
function clock(){
var nowTime= new Date(); //一定是要获取最新的时间
//console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime()-nowTime.getTime())/1000);
//用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能除不断 取整
//console.log(second);
//1 小时3600秒
//second/3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 /24); //天数
//console.log(d);
var h = parseInt(second /3600 %24); //小时
//console.log(h);
var m = parseInt(second/60 %60);//分
//console.log(m);
var s = parseInt(second %60); //当前的秒
console.log(s);
/*if(d<10)
{
d = "0" + d;
}*/
d<10 ? d="0"+d :d;
h<10 ? h="0"+h :h;
m<10 ? m="0"+m :m;
s<10 ? s="0"+s :s;
demo.innerHTML ="距离抢购时间还剩:"+d+"天"+h+"小时"+m+"分钟"+s+"秒";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>