- 基本用法:
var myDate = new Date(); //Sat Nov 19 2016 10:34:56 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
myDate.getYear(); //獲取當(dāng)前年份(2位)
myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
myDate.getMonth(); //獲取當(dāng)前月份(0-11,0代表1月)
myDate.getDate(); //獲取當(dāng)前日(1-31)
myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天)
myDate.getTime(); //獲取當(dāng)前時(shí)間(從1970.1.1開始的毫秒數(shù))
myDate.getHours(); //獲取當(dāng)前小時(shí)數(shù)(0-23)
myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)
myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)
myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)
myDate.toLocaleDateString(); //獲取當(dāng)前日期
var mytime=myDate.toLocaleTimeString(); //獲取當(dāng)前時(shí)間
myDate.toLocaleString( ); //獲取日期與時(shí)間
//獲取當(dāng)前時(shí)間戳：
//1.
var starttime = (new Date()).valueOf();
//2.
var timestamp=new Date().getTime()；
//3.
var timestamp =Date.parse(new Date()); //1479523820000 //此法將毫秒轉(zhuǎn)換成了 000 不夠精確
new Date() 參與計(jì)算會(huì)自動(dòng)轉(zhuǎn)換為從1970.1.1開始的毫秒數(shù)
//將字符串形式的日期轉(zhuǎn)換成日期對(duì)象
var t=new Date(Date.parse("2016-11-19"));
//將字符串形式的日期轉(zhuǎn)換成日期對(duì)象
var strTime="2016-11-19"; //字符串日期格式
var date= new Date(Date.parse(strTime.replace(/-/g,"/"))); //轉(zhuǎn)換成Data();
var month=date.getMonth()+1; //獲取當(dāng)前月份
//帶有參數(shù)的 new Date([arguments list]);
//參數(shù)有以下5種:
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss); //此處傳遞的參數(shù) 必須是整型
new Date(yyyy,mth,dd);
new Date(ms); //參數(shù)表示的是需要?jiǎng)?chuàng)建的時(shí)間和 GMT時(shí)間1970年1月1日之間相差的毫秒數(shù)
/*
其中參數(shù)含義:
month:用英文 表示月份名稱嘱函，"January","February","March","April","May","June","July","August","September","October","November","December"
mth:用整數(shù)表示月份动羽，1月到12月
dd:表示一個(gè) 月中的第幾天超营，從1到31
yyyy:四位數(shù)表示的年份
hh:小時(shí)數(shù)协屡，從0（午夜）到23（晚11點(diǎn)）
mm: 分鐘數(shù)宫蛆，從0到59的整數(shù)
ss:秒數(shù)，從0到59的整數(shù)
ms:毫秒數(shù)统倒，為大于等于0的整數(shù)
*/
//示例
new Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new Date(1137075575000);
- 獲取某月天數(shù)
//獲取某月天數(shù)
function getMonthDay(date){
date=date||new Date();
if(typeof date==='string'){
date=new Date(date);
}
date.setDate(32); //自動(dòng)減去當(dāng)月的天數(shù)
return 32-date.getDate();//date.getDate()會(huì)返回一個(gè)減去當(dāng)月天數(shù)的值 剩余值就是當(dāng)月天數(shù)
}
- 日期格式化
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
//將個(gè)位數(shù)補(bǔ)上0
function formatNumber(n) {
n = n.toString()
// return n[1] ? n : '0' + n
return n.padStart(2,"0");
}
注意: 如果是用var date = new Date('2021-01-01')后的date = getHours() 是 8 而不是0, 如果想要hours是0 則不能使用補(bǔ)零方式,即var date = new Date('2021-1-1')后的date = getHours() 是 0
- 時(shí)間格式化
function formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
var hour = parseInt(time / 3600)
time = time % 3600
var minute = parseInt(time / 60)
time = time % 60
var second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
}
- 距離現(xiàn)在的時(shí)間 time to now
let timeToNow = (time) => {
const t = parseFloat(new Date - new Date(time)) / 1000;
let str;
if (!t) return;
if (t > 60 && t < 3600 ) {
str = `${parseInt(t / 60.0, 10)}分鐘前`;
} else if (t >= 3600 && t < 86400) {
str = `${parseInt(t / 3600.0, 10)}小時(shí)前`;
} else if (t >= 86400 && t < 86400 * 30) {
str = `${parseInt(t / 86400.0, 10)}天前`;
} else if (t >= 86400 * 30 && t < 86400 * 365) {
str = `${parseInt(t / (86400.0 * 30), 10)}個(gè)月前`;
} else if (t >= 86400 * 365) {
str = `${parseInt(t / (86400.0 * 365), 10)}年前`;
} else {
str = `${parseInt(t, 10)}秒前`;
}
return str;
}
- 獲取從當(dāng)前時(shí)間到指定日期的間隔時(shí)間
function getChIntv(data){
var str = data.split("-").join(","); // 2017,05,01
var date = new Date(str);
var nowDate = new Date();
var diff = date - nowDate; // 總時(shí)間差
var getDay = Math.floor( diff / (24 * 60 * 60 * 1000) );
var getHours = Math.floor( diff / (60 * 60 * 1000) ) % 24;
var getMinutes = Math.floor( diff / (60 * 1000) ) % 60;
var getSeconds = Math.floor( diff / 1000) % 60;
return "距離五一還有" + getDay + "天" + getHours + "小時(shí)" + getMinutes + "分鐘" + getSeconds + "秒";
}
var str = getChIntv("2017-05-01");
console.log(str);
- 計(jì)算兩個(gè)時(shí)間差 diffDate
/**
*
* @param {*} time1 a Date object or Date params
* @param {*} time2 a Date object or Date params
* @param {*} unit can be one of ['year', 'month', 'day', 'hour', 'minute', 'second']
* @param {*} exact get exact day diff
*/
function diffDate (time1, time2, unit='day', exact = false) {
let date1 = new Date(time1)
let date2 = new Date(time2)
if (unit === 'year') {
return date2.getFullYear() - date1.getFullYear()
}
if (unit === 'month') {
let diffYear = date2.getFullYear() - date1.getFullYear()
return (date2.getMonth() - date1.getMonth()) + 12 * diffYear
}
if (!exact && unit === 'day') {
date1 = new Date(format(date1, 'yyyy-MM-dd'))
date2 = new Date(format(date2, 'yyyy-MM-dd'))
}
let timeStampUnit = getTimeStampUnit(unit)
return parseInt((date2.getTime() - date1.getTime()) / timeStampUnit)
}
- 把hh-mm-dd格式數(shù)字日期改成中文日期
function getChsDate(data){
var str = data.split("-"); // ["2015", "01", "08"]
var dateArr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十", "二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九", "三十", "三十一"];
var year = str[0];
var month = str[1];
var day = str[2];
var getYear = dateArr[ parseInt(year[0]) ] + dateArr[ parseInt(year[1]) ] + dateArr[ parseInt(year[2]) ] + dateArr[ parseInt(year[3]) ];
var getMonth = dateArr[ parseInt(month * 1 ) ];
var getDay = dateArr[ parseInt(day * 1 ) ];
return getYear +'年'+getMonth+'月'+getDay+'日';
}
var str = getChsDate('2015-01-08');
console.log(str); // 二零一五年一月八日
- 參數(shù)為時(shí)間對(duì)象毫秒數(shù)的字符串格式寨典，返回值為字符串。
假設(shè)參數(shù)為時(shí)間對(duì)象毫秒數(shù)t房匆，根據(jù)t的時(shí)間分別返回如下字符串: 剛剛（ t 距當(dāng)前時(shí)間不到1分鐘時(shí)間間隔） 3分鐘前 (t距當(dāng)前時(shí)間大于等于1分鐘耸成，小于1小時(shí)) 8小時(shí)前 (t 距離當(dāng)前時(shí)間大于等于1小時(shí)，小于24小時(shí)) 3天前 (t 距離當(dāng)前時(shí)間大于等于24小時(shí)浴鸿，小于30天) 2個(gè)月前 (t 距離當(dāng)前時(shí)間大于等于30天小于12個(gè)月) 8年前 (t 距離當(dāng)前時(shí)間大于等于12個(gè)月)
function getPastTime(t){
var pastTime = new Date() - t;
if( pastTime < (60 * 1000) ){
return('剛剛');
}else if(pastTime < (60 * 60 * 1000) ){
return( Math.floor( pastTime / (60 * 1000) ) % 60 + '分鐘前');
}else if( pastTime < (24 * 60 * 60 * 1000) ){
return(Math.floor( pastTime / (60 * 60 * 1000) ) % 24 +'小時(shí)前');
}else if( pastTime < (30 * 24 * 60 * 60 * 1000) ){
return(Math.floor( pastTime / (24 * 60 * 60 * 1000) ) % 30 +'天前');
}else if( pastTime < (12 * 30 * 24 * 60 * 60 * 1000) ){
return(Math.floor( pastTime / (30 * 24 * 60 * 60 * 1000) ) % 12 +'個(gè)月前');
}else{
return(Math.floor( pastTime / (12 * 30 * 24 * 60 * 60 * 1000) ) +'年前');
}
}
getPastTime('1492350564250');
- 關(guān)于GMT , UTC
GMT（格林尼治標(biāo)準(zhǔn)時(shí)間）是一些歐洲和非洲國家正式使用的時(shí)間井氢，UTC是國際標(biāo)準(zhǔn)。這兩個(gè)時(shí)間一般情況是相等的岳链。中國處于東八區(qū)花竞，與UTC時(shí)間相差8個(gè)小時(shí)，也就是說UTC時(shí)間00:00:00的時(shí)候掸哑，我們的時(shí)間是08:00:00约急。
為了避免這種現(xiàn)象，對(duì)于任何的輸入苗分，都統(tǒng)一生成一個(gè)UTC時(shí)間厌蔽，那么新建一個(gè)date函數(shù)，這個(gè)Date函數(shù)用于根據(jù)傳入的時(shí)間模板摔癣，生成一致的時(shí)間奴饮。'yyyy-MM-dd'格式的時(shí)間模板new出來的date是本地時(shí)間，所以用正則表達(dá)式匹配一下/^\d{4}(-\d{2}){0,2}$/.test(date)供填。重寫一個(gè)Date構(gòu)造函數(shù)拐云，用于根據(jù)輸入的時(shí)間模板生成一致的時(shí)間罢猪。
//本地時(shí)間轉(zhuǎn)換成UTC時(shí)間
export function UtcDate(date = "") {
let isDate = (typeof date === 'object') && (date instanceof Date)
if (isDate) return date
let localDate
if (Object.prototype.toString.apply(date).slice(-7, -1) === 'String') {
date = date.replace(/T/, ' ').replace(/-/g, '/')
}
try {
localDate = date === undefined ? new Date() : new Date(date)
} catch (e) {
console.error(e)
}
if (date && /^\d{4}([-\/]\d{1,2}){0,2}$$/.test(date)) {
let timeZoneOffset = localDate.getTimezoneOffset()
let utcTimeStamp = localDate.getTime() + timeZoneOffset * 60 * 1000
return new Date(utcTimeStamp)
}
return localDate;
}
- 實(shí)用的日期函數(shù)庫
(function ($) {
function DateUTC (date) {
if (arguments.length === 0) return new Date()
if (isDate(date)) return date
let localDate
if (Object.prototype.toString.apply(date).slice(-7, -1) === 'String') {
date = date.replace(/T/, ' ').replace(/-/g, '/')
}
try {
localDate = new Date(date)
} catch (e) {
console.error(e)
}
// yyyy-MM-dd | yyyy-MM | T：分隔日期和時(shí)間 | Z：時(shí)區(qū)近她，可以是：Z（UFC）、+HH:mm膳帕、-HH:mm
if (date && /^\d{4}(-\d{2}){0,2}$/.test(date)) {
let timeZoneOffset = localDate.getTimezoneOffset()
let utcTimeStamp = localDate.getTime() + timeZoneOffset * 60 * 1000
return new Date(utcTimeStamp)
}
return localDate
}
function format (date, form = 'yyyy-MM-dd') {
date = DateUTC(date)
if (!form) return date
let year = date.getFullYear()
let month = leftPad(date.getMonth() + 1)
let day = leftPad(date.getDate())
let hours = leftPad(date.getHours())
let minutes = leftPad(date.getMinutes())
let seconds = leftPad(date.getSeconds())
return form.replace('yyyy', year).replace('MM', month).replace('dd', day).replace('HH', hours).replace('mm', minutes).replace('ss', seconds)
}
/**
*
* @param {*} time1 a Date object or Date params
* @param {*} time2 a Date object or Date params
* @param {*} unit can be one of ['year', 'month', 'day', 'hour', 'minute', 'second']
* @param {*} exact get exact day diff
*/
function diff (time1, time2, unit='day', exact = false) {
let date1 = DateUTC(time1)
let date2 = DateUTC(time2)
if (unit === 'year') {
return date2.getFullYear() - date1.getFullYear()
}
if (unit === 'month') {
let diffYear = date2.getFullYear() - date1.getFullYear()
return (date2.getMonth() - date1.getMonth()) + 12 * diffYear
}
if (!exact && unit === 'day') {
date1 = DateUTC(format(date1, 'yyyy-MM-dd'))
date2 = DateUTC(format(date2, 'yyyy-MM-dd'))
}
let timeStampUnit = getTimeStampUnit(unit)
return parseInt((date2.getTime() - date1.getTime()) / timeStampUnit)
}
/**
*
* @param {*} date a Date object or Date params
* @param {*} diff
* @param {*} unit can be one of ['year', 'month', 'day', 'hour', 'minute', 'second']
* for example: dateFrom('2012-02-29', 12, 'month') // Fri Mar 01 2013 00:00:00 GMT+0800 (CST)
*/
function dateFrom(time, diff, unit='day') {
let date = DateUTC(time)
if (unit === 'year') {
let year = date.getFullYear() + diff
return DateUTC(date.setFullYear(year))
}
if (unit === 'month') {
let month = date.getMonth() + diff
return DateUTC(date.setMonth(month))
}
let timeStampUnit = getTimeStampUnit(unit)
return DateUTC(date.getTime() + diff * timeStampUnit)
}
/**
* use it just like how you new a Date and the second value is the format
* if you don't want to format it, set the form to false
* @param {*} value any params can new a Date
* @param {*} form
* @param {*} UTC
*/
function dateTemplate ({ date, diff, form, unit } = {}) {
var _date = !date ? DateUTC() : date
if (diff) {
_date = dateFrom(_date, diff, unit)
}
if (form) {
_date = format(_date, form)
}
return _date
}
function isDate (date) {
return date instanceof Date
}
function leftPad (val) {
return val.toString().padStart(2, '0')
}
function getTimeStampUnit (unit) {
switch (unit) {
case 'day':
return 1000 * 3600 * 24
case 'hour':
return 1000 * 3600
case 'minute':
return 1000 * 60
case 'second':
return 1000
break
default:
return 1
}
}
$.format = format
$.diff = diff
$.DateUTC = DateUTC
$.dateFrom = dateFrom
$.dateTemplate = dateTemplate
})(window.$);
時(shí)鐘canvas小程序
/**
* Created by Administrator on 2017/3/28 0028.
* source from siwuxie095
*/
var canvas = document.getElementById('dom');
var context = canvas.getContext('2d');
var height = context.canvas.height;
var width = context.canvas.width;
var r = width / 2;
var rem = width/200;
//時(shí)鐘背景
function drawBackground() {
context.save();
context.translate(r, r);
context.beginPath();
context.lineWidth = 8*rem;
context.strokeStyle = "#000"
context.arc(0, 0, r - 5*rem, 0, 2 * Math.PI, false);
context.stroke();
context.closePath();
//遍歷小時(shí)數(shù)
var houseNumble = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
houseNumble.forEach(function (number, i) {
context.textAlign = 'center';
context.textBaseline = 'middle'
context.font = 18*rem+'px Arial'
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30*rem);
var y = Math.sin(rad) * (r - 30*rem);
context.fillText(number, x, y);
})
//定義刻度
for (var i = 0; i < 60; i++) {
var rad = 2 * Math.PI / 60 * i;
var x = Math.cos(rad) * (r - 18*rem);
var y = Math.sin(rad) * (r - 18*rem);
context.beginPath();
if (i % 5 == 0) {
context.fillStyle = "#000"
context.arc(x, y, 2*rem, 0, 2 * Math.PI);
} else {
context.fillStyle = "#ccc"
context.arc(x, y, 2*rem, 0, 2 * Math.PI);
}
context.fill();
context.closePath();
}
}
//定義時(shí)針
function drawHour(hour,minute) {
context.save();
context.beginPath();
context.lineWidth = 6*rem;
context.lineCap = 'round'
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2* Math.PI/12/60 * minute;
context.rotate(rad+mrad);
context.moveTo(0, 10*rem);
context.lineTo(0, -r / 2);
context.stroke();
context.restore();
}
//定義分針
function drawMinute(minute) {
context.save();
context.beginPath();
context.lineWidth = 3*rem;
context.lineCap = 'round';
var rad = 2 * Math.PI / 60 * minute;
context.rotate(rad);
context.moveTo(0, 15*rem);
context.lineTo(0, -r + 34)
context.stroke();
context.restore();
}
//定義秒鐘
function drawSecond(second) {
context.save();
context.beginPath();
context.lineWidth = 2*rem;
context.lineCap = 'round';
context.fillStyle = "red"
var rad = 2 * Math.PI / 60 * second;
context.rotate(rad);
context.moveTo(-2 ,20);
context.lineTo( 2, 20);
context.lineTo( 1, -r + 18);
context.lineTo( -1, -r + 18);
context.fill();
context.restore();
}
//畫中心點(diǎn)
function drawDot() {
context.beginPath();
context.fillStyle = "#fff"
context.arc(0, 0, 4*rem, 0, 2 * Math.PI, false);
context.fill();
}
//時(shí)間函數(shù)粘捎，讓時(shí)鐘根據(jù)當(dāng)前時(shí)間跳動(dòng)
function Draw() {
context.clearRect(0,0,width,height);
var time= new Date();
var hour =time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
context.restore()
}
Draw();
setInterval(Draw,1000);
<canvas id="dom" width="120" height="120">時(shí)鐘canvas</canvas>
效果如下
clock
