vue -电子时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="clock">
<h1>Gary</h1>
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">數(shù)字時鐘</p>
</div>
</body>
<script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: ''
}
});
var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
var cd = new Date();
clock.time = week[cd.getDay()];
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' '+zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
};
function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
</html>
說明：
setInterval(code,millisec) :可按照指定的周期（以毫秒計）來調用函數(shù)或計算表達式
code：要調用的函數(shù)或要執(zhí)行的代碼串
millisec :周期性執(zhí)行或調用 code 之間的時間間隔，以毫秒計
function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
num參數(shù)：返回系統(tǒng)時間
dight參數(shù)：當時鐘小于兩位數(shù)digit位數(shù)時候補，年份四位，月日為兩位
js.slice() 方法可從已有的數(shù)組中返回選定的元素
updateTime()函數(shù)中調用zeroPadding()統(tǒng)一數(shù)字時鐘時間格式
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
JavaScript Date 對象：
getHours() ：返回 Date 對象的小時 (0 ~ 23)
getMinutes() ：返回 Date 對象的分鐘 (0 ~ 59)
getSeconds() ：返回 Date 對象的秒數(shù) (0 ~ 59)
setFullYear() ：設置 Date 對象中的年份（四位數(shù)字）
getMonth() ：從Date 對象返回月份 (0 ~ 11)
getDate() ：從Date 對象返回一個月中的某一天 (1 ~ 31)
轉載=https://www.cnblogs.com/1138720556Gary/p/9381643.html
總結
- 上一篇： 怎么用电脑玩王者荣耀王者如何在电脑上玩
- 下一篇： 苹果电脑怎么截图苹果电脑如何全选图片