时间对象
创建时间对象 var date = new Date();
最好将其转化为字符串,date.toString();
1、date.setTime() 以毫秒设置Date对象。
此处必须要写参数,如果不写参数或者写undefined则返回NaN,除此之外可以传入任何数字和任何纯数字的字符串包括空白字符。
var date = new Date();
console.log(date);
// 返回一个月的第几天
console.log(date.getDate());
// 以毫秒设置时间。
// console.log(date.setDate(false));
console.log(date.setDate(undefined));
// 返回从1970年1月1日至今的毫秒数
console.log(date.getTime());
2、date.getTime() 返回从1970年1月1日至今的毫秒数。
3、date.setDate() 设置第几天,要先设置在获取时间。
4、date.getDate() 返回一个月的第几天,范围是从1~31。
var date = new Date();
console.log(date);
// 返回一个月的第几天
console.log(date.getDate());
// 以毫秒设置时间。
console.log(date.setDate(' '));
// 返回从1970年1月1日至今的毫秒数
console.log(date.getTime());
//设置第几天
date.setDate(10)
console.log(date.getDate());
5、date.getDay() 返回一周中的第几天(0~6,0表示周日)。
6、date.getMonth() 返回月份(0~11,0表示1月)。
7、date.setMonth() 设置月份。
8、date.getFullYear() 获取年份。
9、date.setFullYear() 设置年份。
10、date.getHours() 获取小时。
11、date.setHours() 设置小时。
12、date.getMinutes() 获取分钟。
13、date.setMinutes() 设置分钟。
14、date.getSeconds() 获取秒数。
15、date.setSeconds() 设置秒数。
16、date.getMilliseconds() 获取毫秒数。
17、date.setMilliseconds() 设置毫秒数。
18、date.toTimeString() 将时间转化为字符串。
19、date.toDateString() 将日期转化为字符串。
// 返回一周中的第几天(0~6,0表示周日)。
console.log(date.getDay());
// 返回月份(0~11,0表示1月)
console.log(date.getMonth());
// 获取年份
console.log(date.getFullYear());
// 获取小时
console.log(date.getHours());
// 获取分钟
console.log(date.getMinutes());
// 获取秒数
console.log(date.getSeconds());
// 获取毫秒数
console.log(date.getMilliseconds());
// 将时间转化为字符串
console.log(date.toTimeString());
// 将日期转化为字符串
console.log(date.toDateString());
定时器
- setInterval(function(){},1000); 循环任务定时器,隔一定时间循环执行。
- setTimeout(function(){},1000); 延时定时器,只执行一次。
注意二者之间的区别,它们的单位都是毫秒。
- clearInterval(null); 清除定时器。
数学对象
Math 对象用于执行数学任务。
Math.random() 返回0~1之间的随机数。
Math.PI 圆周率π。
Math.abs() 返回绝对值。
Math.minx() 返回最小值。
Math.max() 返回最大值。
Math.pow(x, y) 返回x的y次幂。
Math.round() 把数字进行四舍五入。
Math.aqrt() 返回平方根。
Math.ceil() 向上取整。
Math.floor() 向下取整。
练习
1、获取某一范围内的随机整数
function random (min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
2、计算从现在开始到2017年还有多少天,多少小时,多少分,多少秒。
var h1 = document.querySelector("h1");
setInterval(function(){
// 获取当前时间
var date = new Date();
// 获取2017年1月1日的时间
var futureDate = new Date("01/01/2017");
var ms = futureDate.getTime() - date.getTime();
var d = parseInt(ms/1000/60/60/24);
var h = parseInt((ms - d*24*60*60*1000)/1000/60/60);
var m = parseInt((ms - (d*24*60*60*1000) - (h*60*60*1000))/1000/60);
var s = parseInt((ms - (d*24*60*60*1000) - (h*60*60*1000) - (m*60*1000))/1000);
h1.innerHTML = '距2017年还剩'+ d +'天'+ h +'时'+ m +'分'+ s +'秒';
},100)
3、绘制时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.clock {
margin: 80px auto;
width: 300px;
height: 300px;
border: 20px solid hotpink;
border-radius: 100%;
position: relative;
}
.numbers>div {
width: 300px;
height: 40px;
font-size: 28px;
line-height: 40px;
position: absolute;
left: 0;
top: 50%;
margin-top: -20px;
}
span {
position: absolute;
/*width: 40px;
height: 40px;*/
}
.hour {
width: 6px;
height: 112px;
background-color: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -3px;
margin-top: -112px;
transform-origin: 50% 100%;
}
.minute {
width: 4px;
height: 124px;
background-color: blue;
position: absolute;
left: 50%;
margin-left: -2px;
top: 50%;
margin-top: -124px;
transform-origin: 50% 100%;
}
.second {
width: 2px;
height: 130px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -1px;
top: 50%;
margin-top: -130px;
transform-origin: 50% 100%;
}
</style>
</head>
<body>
<div class="clock">
<div class="numbers">
<!-- div*12>span{$}*12 -->
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
</div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
<script type="text/javascript">
// 获取元素
var nums = document.querySelectorAll('.numbers > div');
var spans = document.querySelectorAll('span');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var timer = null;
for (var i = 0; i < nums.length; i++) {
nums[i].style.transform ='rotate('+ i*30 + 'deg)';
spans[i].style.transform ='rotate('+ i*-30 + 'deg)';
}
if (timer) {
clearInterval(timer)
}
timer = setInterval(function() {
// 声明变量获取时间
var oDate = new Date ();
var h = oDate.getHours();
var min = oDate.getMinutes();
var s = oDate.getSeconds();
// 将时间调整为12小时制
if (h >= 12) {
h -= 12;
}
// 声明变量获取旋转角度
var degh = h/12*360+min/60*30;
var degm = min/60*360+s/60*6;
hour.style.transform = 'rotate('+ degh + 'deg)';
minute.style.transform = 'rotate('+ degm + 'deg)';
second.style.transform = 'rotate('+ s*6 + 'deg)';
},100)
</script>
</html>
以上内容纯属个人理解,由于水平有限,若有错漏之处敬请指出斧正,小弟不胜感激。