時間對象
創(chuàng)建時間對象 var date = new Date();
最好將其轉化為字符串，date.toString();
1、date.setTime() 以毫秒設置Date對象。
此處必須要寫參數(shù)，如果不寫參數(shù)或者寫undefined則返回NaN，除此之外可以傳入任何數(shù)字和任何純數(shù)字的字符串包括空白字符。
var date = new Date();
console.log(date);
// 返回一個月的第幾天
console.log(date.getDate());
// 以毫秒設置時間。
// console.log(date.setDate(false));
console.log(date.setDate(undefined));
// 返回從1970年1月1日至今的毫秒數(shù)
console.log(date.getTime());
date.setTime()，參數(shù)為undefined或不寫參數(shù)的結果
2、date.getTime() 返回從1970年1月1日至今的毫秒數(shù)。
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日至今的毫秒數(shù)
console.log(date.getTime());
//設置第幾天
date.setDate(10)
console.log(date.getDate());
date.setTime()，參數(shù)為空白字符
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() 獲取秒數(shù)。
15、date.setSeconds() 設置秒數(shù)。
16、date.getMilliseconds() 獲取毫秒數(shù)。
17、date.setMilliseconds() 設置毫秒數(shù)。
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());
// 獲取秒數(shù)
console.log(date.getSeconds());
// 獲取毫秒數(shù)
console.log(date.getMilliseconds());
// 將時間轉化為字符串
console.log(date.toTimeString());
// 將日期轉化為字符串
console.log(date.toDateString());
代碼執(zhí)行效果
定時器
- setInterval(function(){},1000); 循環(huán)任務定時器，隔一定時間循環(huán)執(zhí)行。
- setTimeout(function(){},1000); 延時定時器，只執(zhí)行一次。
注意二者之間的區(qū)別，它們的單位都是毫秒。
- clearInterval(null); 清除定時器。
數(shù)學對象
Math 對象用于執(zhí)行數(shù)學任務。
Math.random() 返回0~1之間的隨機數(shù)。
Math.PI 圓周率π。
Math.abs() 返回絕對值。
Math.minx() 返回最小值。
Math.max() 返回最大值。
Math.pow(x, y) 返回x的y次冪。
Math.round() 把數(shù)字進行四舍五入。
Math.aqrt() 返回平方根。
Math.ceil() 向上取整。
Math.floor() 向下取整。
練習
1、獲取某一范圍內的隨機整數(shù)
function random (min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
2、計算從現(xiàn)在開始到2017年還有多少天，多少小時，多少分，多少秒。
代碼執(zhí)行效果
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>
以上內容純屬個人理解，由于水平有限，若有錯漏之處敬請指出斧正，小弟不勝感激。
