内置对象
不需要声明,就可以直接使用
内置对象,就是指:这个语言(不止JS),它自带就有的一些对象。
提供开发中使用,这些对象通常提供了一些常用的或者最基本的必要功能;
手机,可以带电话,发短信(内置);他可以玩游戏,聊QQ;(自定义);
前面学过两种内置对象1:Math(数学函数) 2:类型转换(Number、string)
新的:时间函数(Date()) 记住,D要大写
这个函数(对象)可以设置我们本地日期,年月日时分秒;
Date 时间函数
var t = new Date(); // 声明现在的日期
var year = t.getFullYear(); // 年
var month = t.getMonth(); // 月份 0-11
var date = t.getDate(); // 日 1-31
var day = t.getDay(); // 星期 0-6
var hours = t.getHours(); // 小时 0-23
var min = t.getMinutes(); // 分钟 0-59
var s = t.getSeconds(); // 秒 0-59
var ms = t.getMilliseconds(); // 毫秒 一秒是1000毫秒
var time = t.getTime(); // 获取累计毫秒数 , 从1970.1.1午夜开始计算到现在的毫秒数
demo 日历
<div class="box" id="box">
<div class="one"></div>
<div class="two"></div>
</div>
<script>
var box = document.getElementById("box");
var divs = box.getElementsByTagName("div");
var t = new Date();
var date = t.getDate(); // 日 1-31
var day = t.getDay(); // 星期 0-6
var month = t.getMonth(); // 月份 0-11
var year = t.getFullYear(); // 年
var hours = t.getHours(); // 小时 0-23
var min = t.getMinutes(); // 分钟 0-59
var s = t.getSeconds(); // 秒 0-59
var ms = t.getMilliseconds(); // 毫秒 一秒是1000毫秒
var time = t.getTime(); // 获取累计毫秒数 , 从1970.1.1午夜开始计算到现在
var str = "日一二三四五六";
if(min<10){
min = "0" + min;
}
if(s<10){
s = "0" + s;
}
divs[0].innerHTML = year + "年" + (month+1) + "月" + date + "日" +" " + "星期"+ str[day];
divs[1].innerHTML = hours + ":" + min + ":" + s;
setInterval(function(){
var box = document.getElementById("box");
var divs = box.getElementsByTagName("div");
var t = new Date();
var date = t.getDate(); // 日 1-31
var day = t.getDay(); // 星期 0-6
var month = t.getMonth(); // 月份 0-11
var year = t.getFullYear(); // 年
var hours = t.getHours(); // 小时 0-23
var min = t.getMinutes(); // 分钟 0-59
var s = t.getSeconds(); // 秒 0-59
var ms = t.getMilliseconds(); // 毫秒 一秒是1000毫秒
var time = t.getTime(); // 获取累计毫秒数 , 从1970.1.1午夜开始计算到现在
var str = "日一二三四五六";
if(min<10){
min = "0" + min;
}
if(s<10){
s = "0" + s;
}
divs[0].innerHTML = year + "年" + (month+1) + "月" + date + "日" +" " + "星期"+ str[day];
divs[1].innerHTML = hours + ":" + min + ":" + s;
},1000);
</script>
补充
parseInt() 取整,直接去掉小数,保留小数点前面的;
Math.ceil() 向上取整,天花板函数,只要你后面有小数,就给你进一位,不管小数大小
Math.floor()向下取整,地板函数,只要你后面有小数,就给你退一位,不管小数大小
Math.round() 四舍五入
border-radius: 50%; 把正方形盒子变成圆形
transform: rotate(50deg);盒子选装,deg就是角度,360deg为一圈
小案例 (倒计时)
<div id="div">
</div>
<script>
var div = document.getElementById("div");
var t1 = new Date();
var t2 = new Date("2017/9/21 10:00");
var time1 = t1.getTime();
var time2 = t2.getTime();
var t = t2-t1; // 得到目标时间个现在时间的差
var s = (t/1000)%60; // 得到秒
var min = ((t/1000)/60)%60; // 得到分
var hours =(((t/1000)/60)/60)%24; // 得到时
var day = ((((t/1000)/60)/60)/24); // 得到天
if(min<10){
min = "0"+min;
}
if(s<10){
s = "0"+s;
}
div.innerHTML = "距离抢购还有:"+parseInt(day)+"天"+parseInt(hours)+"时"+parseInt(min)+"分"+parseInt(s)+"秒";
setInterval(function(){
var div = document.getElementById("div");
var t1 = new Date();
var t2 = new Date("2017/9/21 10:00");
var time1 = t1.getTime();
var time2 = t2.getTime();
var t = t2-t1; // 得到目标时间个现在时间的差
var s = (t/1000)%60; // 得到秒
var min = ((t/1000)/60)%60; // 得到分
var hours =(((t/1000)/60)/60)%24; // 得到时
var day = ((((t/1000)/60)/60)/24); // 得到天
if(min<10){
min = "0" + min;
}
if(s<10){
s = "0"+s;
}
div.innerHTML = "距离抢购还有:"+parseInt(day)+"天"+parseInt(hours)+"时"+parseInt(min)+"分"+parseInt(s)+"秒";
},1);
小案例 (随机转盘)
<style>
#box{
width: 200px;
height: 200px;
background: pink;
border-radius: 50%;
margin: 100px auto;
position: relative;
transform: rotate(0deg);
}
#zz{
width: 10px;
height: 100px;
position: absolute;
top: 0;
left: 95px;
background-color: aqua;
}
</style>
<div id="box">
<div id="zz"></div>
</div>
<script>
var zz = document.getElementById("zz");
var box = document.getElementById("box");
box.onclick = function(){
var num = parseInt(Math.random()*360);
var i = 0;
var time = setInterval(function(){
i++;
box.style.transform = "rotate("+i+"deg)";
if(i>=num){
clearInterval(time);
}
},1)
}
</script>