ホームページ > 記事 > ウェブフロントエンド > javascript_javascriptスキルに基づいて現在時刻とカウントダウン機能を表示します
javascript_javascriptスキルに基づいて現在時刻とカウントダウン機能を表示します
- WBOYオリジナル
- 2016-05-16 15:10:191473ブラウズ
自己練習のために、js ネイティブ コードの一部を共有したいと思います。
Date オブジェクトは、日付と時刻を処理するために使用されます。
Date() 現在の日付と時刻を返します。
getDate() Date オブジェクトから日付 (1 ～ 31) を返します。
getDay() Date オブジェクトから曜日 (0 ～ 6) を返します。
getMonth() Date オブジェクトから月 (0 ～ 11) を返します。
getFull Year() Date オブジェクトから年を 4 桁の数値として返します。
get Year() 代わりに getFull Year() メソッドを使用してください。
getHours() は、Date オブジェクトの時間 (0 ～ 23) を返します。
getMinutes() は、Date オブジェクトの分 (0 ～ 59) を返します。
getSeconds() Date オブジェクトの秒数 (0 ～ 59) を返します。
getMilliseconds() は、Date オブジェクトのミリ秒 (0 ～ 999) を返します。
getTime() 1970 年 1 月 1 日からのミリ秒数を返します。
getTimezoneOffset() 現地時間とグリニッジ標準時 (GMT) の差を分単位で返します。
getUTCDate() 世界時に基づいて Date オブジェクトから日付 (1 ～ 31) を返します。
getUTCDay() 世界時に基づいて Date オブジェクトから曜日 (0 ～ 6) を返します。
getUTCMonth() 世界時に従って Date オブジェクトから月 (0 ～ 11) を返します。
getUTCFul Year() 世界時に基づいて Date オブジェクトから 4 桁の年を返します。
getUTCHours() 世界時に従って Date オブジェクトの時間 (0 ～ 23) を返します。
getUTCMinutes() 世界時に従って Date オブジェクトの分 (0 ～ 59) を返します。
getUTCSeconds() 世界時に従って Date オブジェクトの秒 (0 ～ 59) を返します。
getUTCMilliseconds() 世界時に従って Date オブジェクトのミリ秒 (0 ～ 999) を返します。
parse() 1970 年 1 月 1 日の午前 0 時から指定された日付 (文字列) までのミリ秒数を返します。
setDate() は、Date オブジェクトに日付 (1 ～ 31) を設定します。
setMonth() は、Date オブジェクトに月 (0 ～ 11) を設定します。
setFull Year() Date オブジェクトに年 (4 桁) を設定します。
setyear() 代わりに setFull Year() メソッドを使用してください。
setHours() Date オブジェクトに時間 (0 ～ 23) を設定します。
setMinutes() Date オブジェクトに分 (0 ～ 59) を設定します。
setSeconds() Date オブジェクトに秒 (0 ～ 59) を設定します。
setMilliseconds() Date オブジェクトにミリ秒 (0 ～ 999) を設定します。
setTime() は、Date オブジェクトをミリ秒単位で設定します。
setUTCDate() 世界時に従って Date オブジェクトに日付 (1 ～ 31) を設定します。
setUTCMonth() 世界時に従って Date オブジェクトに月 (0 ～ 11) を設定します。
setUTCFul Year() 世界時に従って Date オブジェクトに年 (4 桁) を設定します。
setUTCHours() 世界時に従って Date オブジェクトの時間 (0 ～ 23) を設定します。
setUTCMinutes() 世界時に従って Date オブジェクトの分 (0 ～ 59) を設定します。
setUTCSeconds() 世界時に従って Date オブジェクトの秒 (0 ～ 59) を設定します。
setUTCMilliseconds() 世界時に従って Date オブジェクトのミリ秒 (0 ～ 999) を設定します。
toSource() はオブジェクトのソース コードを返します。
toString() Date オブジェクトを文字列に変換します。
toTimeString() Date オブジェクトの時刻部分を文字列に変換します。
toDateString() Date オブジェクトの日付部分を文字列に変換します。
toGMTString() 代わりに toUTCString() メソッドを使用してください。
toUTCString() 世界時に従って Date オブジェクトを文字列に変換します。
toLocaleString() 現地時間形式に従って Date オブジェクトを文字列に変換します。
toLocaleTimeString() Date オブジェクトの時刻部分を現地時間形式に従って文字列に変換します。
toLocaleDateString() Date オブジェクトの日付部分を現地時間形式に従って文字列に変換します。
UTC() 世界時に従って、1970 年 1 月 1 日から指定された日付までのミリ秒数を返します。
valueOf() は、Date オブジェクトの元の値を返します。
特定の実装コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>原生js 当前时间 倒计时代码</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;}
.text{margin-top:150px;font-size:14px;}
</style>
<script>
window.onload=function(){
getMyTime();
getMyTime1();
}
//1.前面补0
function p(n){
return n<10?'0'+n:n;
}
//2.倒计时
function getMyTime(){
var startDate=new Date();
var endDate=new Date('2017/4/17 11:15:00');
var countDown=(endDate.getTime()-startDate.getTime())/1000;
var day=parseInt(countDown/(24*60*60));
var h=parseInt(countDown/(60*60)%24);
var m=parseInt(countDown/60%60);
var s=parseInt(countDown%60);
document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
setTimeout('getMyTime()',500);
if(countDown<=0){
document.getElementById('time').innerHTML='活动结束';
}
}
//3.当前时间
function getMyTime1(){
var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var day=myDate.getDate();
var week=myDate.getDay();
var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
var hour=myDate.getHours();
var minute=myDate.getMinutes();
var second=myDate.getSeconds();
document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
setTimeout('getMyTime1()',500);
}
</script>
</head>
<body>
<div class="text">
<p>倒计时间：<span id="time"></span></p>
<p>当前时间：<span id="time1"></span></p>
</div>
</body>
</html>
以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。