とりあえずこんな感じで。
━━ 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>内部にコードを記述するメリットは完全にゼロ、百害あって一利無しです。
以上！苦情は受け付けない(笑)。
補足
補足コメントを入力したのですが、最後まで完了していなかったようで連絡が遅くなってしまいました。 ご回答いただきまして有難うございます！ 何度も申し訳ございません。 できれば複数個所で使用したく存じます。 ＜例＞ (1)はじめの挨拶 (2)TOP画像の変更 (3)おわりの挨拶 複数回しようすることが出来て、出来ればjQueryを「head内に記載」または「外部読み込み」で起動できるように変更は可能でしょうか？ ご教示頂けますと幸いです！ 何卒宜しくお願い致します！