みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

【jQuery】西暦を指定せずに動かす方法

以下のサイトを参考にして、HTMLのテキスト表示を期間ごとに違う内容を表示するようにしたいと思っています。

※ 日時指定で要素の表示と非表示を切り替えるjQuery(http://ur0.work/wBe4


<例>
変更前)こんばんは⇒変更後)おはようございます!
変更前)夏になりました⇒変更後)冬になりました


しかし、このjQueryは西暦を指定しなければなりません。
西暦を入力しなくても動くように、変更したいのですがどうすればよいでしょうか?


僕の能力では半日かかっても分かりませんでしたので、是非教えて頂きたく存じます!
何卒宜しくお願い致します!

投稿日時 - 2019-04-04 17:47:17

QNo.9603606

すぐに回答ほしいです

質問者が選んだベストアンサー

とりあえずこんな感じで。

━━ HTMLの記述例 ━━━━━━
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<p class="my-view-timer" data-view-timer="4/3-4/25">記念セール1</p>
<p class="my-view-timer" data-view-timer="4/3-4/25">記念セール2</p>
<p class="my-view-timer" data-view-timer="4/3-4/25">記念セール3</p>
</div>
<script src="//example.com/my-script.js"></script>
</body>
</html>


━━ "my-script.js" の記述例 ━━━━━━
(function($){
my_func_viewtimer('.my-view-timer','data-view-timer');
})(jQuery);

function my_func_viewtimer(tags,vtimer){
var vt = $(tags), cnt = vt.length;
if ( 0 < cnt ) {
vt.hide(); /* CSSで事前に隠してる場合は必要無し. */
var tt = new Date(), yy = tt.getFullYear(), tt = tt.getTime(),
dt, n, mt1, mt2,
my_reg = /^(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])-(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])$/;
for ( var i=0; i<cnt; i++ ) {
dt = $(vt[i]).attr(vtimer);
if ( dt && my_reg.test(dt) ) {
dt = dt.split('-'),
mt1 = new Date( yy+'/'+dt[0] ), mt2 = new Date( yy+'/'+dt[1] ),
mt1 = mt1.getTime(), mt2 = mt2.getTime();
if ( mt1 < tt && tt < mt2 ) {
$(vt[i]).show();
}
}
}
}
}


P.S.
webページ内のタグに class="my-view-timer" と data-view-timer="X/X-Y/Y" が揃って初めて起動し表示されます。常に表示を基本とするか、非表示を基本とするかは大元のCSSでまとめて display:none; を指定して制御した方が良いと思います。

>jQueryをHEAD内に記載
大本の "jquery.min.js" を<head>内部で読み込むのはOKですが。実際に実行されるコードを<head>内等に記述する事は非推奨…というか実行用のJavascriptコードは、全てのDOM(HTMLタグ)が読み込まれた後の最後の最後で読込み実行される様にするべきです(基本的には</body>の直前)。

何故かというプログラムの基本中の基本、つまりJavascriptにしろHTMLにしろ全てのコード(コンピュータの処理)は「記述された順番でしか読込まれず実行もされない」からです。これはノイマン型コンピュータの不変の法則なので変更不可!従って何らかのプログラムを記述し実行させたい場合はこの法則を絶対遵守しなければならず、それを外れたコードは正常実行を約束出来ず様々な予期せぬ不具合の原因となります。

大本の "jquery.min.js" はライブラリと呼ばれる種類のプログラムであり、それ自体には具体的な処理を実行する機能はありません。なので<head>内部等で早めに読み込んで置き、これ以降に記述され実行されるであろうJSコードのために準備し備える必要があるため、むしろwebページ内の早い段階で読み込んで置く事が推奨されます(一般的には<head>内部)。

ところが実際に様々な具体的な処理を行うJSコード、この場合は「CLASS名と日付データによって表示/非表示を切り替える処理」を<head>内部で読み込んでしまった場合。プログラムは常に前述の通り、読み込まれた順番、記述された順番に即座に実行され結果を返して処理を停止し次へ進みます。この時にコードが<head>内部で読み込まれ実行された場合、実行されたコードは記述された処理に従い class="my-view-timer" を探しますが、まだページ本体の<body>以降の部分が読み込まれてないため当然ながらCLASSは見つからず「該当CLASS名無し、よって処理の必要なし!」となってプログラムは処理を完結し何も起きずに終わります。

従って具体的な処理を行うJSコードは必ずwebページの全てのHTMLタグ要素が読み込まれた後、つまり最後の最後の</body>の直前にまとめて記述、或いは読み込ませる様に記述するべきであり、またそうしなければ期待通りの処理が行われません。無論、世の中にはこの基本を無視して<head>内部に実行用JSコードを記述した解説記事等がありますが、これはたまたま上手く行ってるに過ぎず敢えて<head>内部にコードを記述するメリットは完全にゼロ、百害あって一利無しです。

以上!苦情は受け付けない(笑)。

投稿日時 - 2019-04-10 08:08:14

ANo.4

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

ちょっと修正。よくよく考えたら2桁表記に固定する意味無かったので、こっちの方が汎用性が若干高まると思います。後、せっかくjQuery使ってるのでCSS書き換えじゃ無くて、汎用的な hide()~show() で表示/非表示の切り替えをする様に変更。他に何かコードを走らせる場合は、(function($){...})(jQuery); の内部に適当な箇所に追記してください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<p id="my-view-timer" data-view-timer="4/1-04/15">OKWave開催中!!</p>

<script>
(function($){
if ( document.getElementById('my-view-timer') ) {
var vt = $('#my-view-timer'),
dt = vt.attr('data-view-timer'),
tt = new Date(),
yy = tt.getFullYear(),
tt = tt.getTime(),
my_reg = /^(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])-(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])$/;
vt.hide();
if ( my_reg.test(dt) ) {
var dt = dt.split('-'),
mt1 = new Date( yy+'/'+dt[0] ),
mt2 = new Date( yy+'/'+dt[1] ),
mt1 = mt1.getTime(),
mt2 = mt2.getTime();
if ( mt1 < tt && tt < mt2 ) {
vt.show();
}
}
}
})(jQuery);
</script>
</body>
</html>

投稿日時 - 2019-04-06 10:20:14

補足

補足コメントを入力したのですが、最後まで完了していなかったようで連絡が遅くなってしまいました。

ご回答いただきまして有難うございます!
何度も申し訳ございません。

できれば複数個所で使用したく存じます。
<例>
(1)はじめの挨拶
(2)TOP画像の変更
(3)おわりの挨拶

複数回しようすることが出来て、出来ればjQueryを「head内に記載」または「外部読み込み」で起動できるように変更は可能でしょうか?

ご教示頂けますと幸いです!
何卒宜しくお願い致します!

投稿日時 - 2019-04-09 19:26:22

ANo.2

とりあえずこんな感じで。CLASS指定だと複数個の時を考慮しないといけなくなるので、JSでHTML内のDOMを弄る時の基本はID指定で。

後、「4月1日」みたいな漢字(マルチバイト文字)が交じるとややこしくなるだけ百害あって一利無しなので、こういう場合は全て事前にオール半角英数文字のみで入力指定する事!この作例では「04/01-04/15」のフォーマットのみ受け付ける様にして、それ以外は一切排除する仕様です(1桁月日も0を付けて2桁表記にする)。

一応、「13/33」みたいな有り得ない日付は弾く様にしてあります。とりあえず試してみて、何か不具合とか疑問があったらまた再質問してください。

あ、console.log() は単なるエラーチェック用なので実際の運用時には削除して構いません。

━ 記述例 ━━━
<p id="my-view-timer" data-view-timer="04/01-04/15">OKWave開催中!!</p>

(function($){
if ( document.getElementById('my-view-timer') ) {
var vt = $('#my-view-timer'),
dt = vt.attr('data-view-timer'),
tt = new Date(),
yy = tt.getFullYear(),
tt = tt.getTime(),
my_reg = /^(?:0[1-9]|1[0-2])\/(?:0[1-9]|[1-2][0-9]|3[0-1])-(?:0[1-9]|1[0-2])\/(?:0[1-9]|[1-2][0-9]|3[0-1])$/;

if ( my_reg.test(dt) ) {
var dt = dt.split('-'),
mt1 = new Date( yy+'/'+dt[0] ),
mt2 = new Date( yy+'/'+dt[1] ),
mt1 = mt1.getTime(),
mt2 = mt2.getTime();
if ( mt1 < tt && tt < mt2 ) {
vt.css({'display':'block'});
}
else {
vt.css({'display':'none'});
}
}
else {
console.log( tt,'timer is wrong!' );
}
}
else {
console.log( tt,'timer is not found...' );
}
})(jQuery);

投稿日時 - 2019-04-06 01:39:11

ANo.1

具体的にはどういった記述式で行いたいのですか?結局、Javascriptも含めて全てのプログラム言語は時間を内部的には西暦年(秒数)で処理しますので、一般利用者などにフォーム等から生年月日の入力を求める場合を除けば、最初から全ての時間は西暦年記述で行って置く方が合理的で後々の不具合も未然に防ぐ事が出来ます。

まあそれはさて置き、下記参考サイトで紹介されているライブラリを導入すれば簡単に和暦を西暦換算してくれます。今、話題の「令和」にも対応済みですので今後も当分は使えると思います。

- 和暦から西暦へ変換 https://co.bsnws.net/article/335

P.S.
質問者が提示している参考サイトのコードも外部入力では無く、webサイトの管理者自身が直にwebページ内のHTMLコードとして年月日を直に記述する手法になっていますので、西暦年式以外での記述をわざわざ行うのは二度手間三度手間になるだけで百害あって一利無しな様な気がしますが…?

投稿日時 - 2019-04-05 04:53:40

補足

ご回答いただき有難うございます!
説明不足でした。

<例>
4月1日~4月30日:春ですね。
5月1日~5月31日:GWですね。

例えばですが、上記のように毎年同じ時期に同じ表示を出したいと考えています。もし今年の西暦を入力してしまうと、翌年は同じ挙動が出来ないと思います。
ですので、毎年同じ挙動になる記述方法が知りたく、質問させていただきました!

お分かりでしたら、是非ともご教授頂けますと幸いです。
何卒宜しくお願い致します!

投稿日時 - 2019-04-05 11:56:59

あなたにオススメの質問