menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

JavaScriptでタイマー系いろいろ

  • Labs

JavaScript

こんにちは(・∀・)

今回はJavaScriptで作るタイマー系のスクリプトをまとめましたのでそれらサンプルのご紹介です。JavaScriptでCSSを切り替えるようになっているので背景色や画像以外の効果を設定することもできますので色々とお試しください。

1. 背景色の変更

背景色を設定時間で変化させるサンプル。

サンプル
HTML

<div class="timer">
<p>背景色が設定時間で変わります。</p>
<p>00時~06時は赤です。</p>
<p>06時~12時は青です。</p>
<p>12時~18時は黄です。</p>
<p>18時~24時は緑です。</p>
</div>
JavaScript

function bgcolor() {
var nt = new Date()
var hr = nt.getHours();
if((hr >=  0) && (hr <  6)) document.body.style.backgroundColor = "#d49fc2";
if((hr >=  6) && (hr < 12)) document.body.style.backgroundColor = "#9fb7d4";
if((hr >= 12) && (hr < 18)) document.body.style.backgroundColor = "#dfd676";
if((hr >= 18) && (hr < 24)) document.body.style.backgroundColor = "#a5d49f";
}
if(window.addEventListener) {
window.addEventListener('load',bgcolor,false);
} else if(window.attachEvent) {
window.attachEvent('onload',bgcolor);
}
Result

サンプルデモはこちら

2. 背景画像の変更

背景画像を設定時間で変化させるサンプル。

サンプル
HTML

<div id="timer" class="timer">
<p>背景画像が設定時間で変わります。</p>
<p>00時~06時は赤です。</p>
<p>06時~12時は青です。</p>
<p>12時~18時は黄です。</p>
<p>18時~24時は緑です。</p>
</div>
JavaScript

function bgimg() {
var nt = new Date()
var hr = nt.getHours();
if((hr >=  0) && (hr <  6)) document.getElementById('timer').style.backgroundImage = "url(img/bg1.png)";
if((hr >=  6) && (hr < 12)) document.getElementById('timer').style.backgroundImage = "url(img/bg2.png)";
if((hr >= 12) && (hr < 18)) document.getElementById('timer').style.backgroundImage = "url(img/bg3.png)";
if((hr >= 18) && (hr < 24)) document.getElementById('timer').style.backgroundImage = "url(img/bg4.png)";
}
if(window.addEventListener) {
window.addEventListener('load',bgimg,false);
} else if(window.attachEvent) {
window.attachEvent('onload',bgimg);
}
Result

サンプルデモはこちら

3. テキスト内容の変更

テキスト内容を設定時間で変化させるサンプル。

サンプル
HTML

<div class="timer">
<p>テキスト内容が設定時間で変わります。</p>
<p>00時~06時はGOOD NIGHT!です。</p>
<p>06時~12時はGOOD MORNING!です。</p>
<p>12時~18時はGOOD AFTERNOON!です。</p>
<p>18時~24時はGOOD EVENING!です。</p>
<br>
<p><script>Greeting();</script></p>
</div>
JavaScript

function Greeting() {
var nt = new Date()
var hr = nt.getHours();
if((hr >=  0) && (hr <  6)) document.write("GOOD NIGHT!");
if((hr >=  6) && (hr < 12)) document.write("GOOD MORNING!");
if((hr >= 12) && (hr < 18)) document.write("GOOD AFTERNOON!");
if((hr >= 18) && (hr < 24)) document.write("GOOD EVENING!");
}
Result

サンプルデモはこちら

4. 画像の変更

画像を設定時間で変化させるサンプル。

サンプル
HTML

<div class="timer">
<p>画像が設定時間で変わります。</p>
<p>00時~06時</p>
<p>06時~12時</p>
<p>12時~18時</p>
<p>18時~24時で画像が変わります。</p>
<br>
<script>effectImg();</script>
</div>
JavaScript

function effectImg() {
var nt = new Date()
var hr = nt.getHours();
if((hr >=  0) && (hr <  6)) document.write("<img src='img/img1.png'>");
if((hr >=  6) && (hr < 12)) document.write("<img src='img/img2.png'>");
if((hr >= 12) && (hr < 18)) document.write("<img src='img/img3.png'>");
if((hr >= 18) && (hr < 24)) document.write("<img src='img/img4.png'>");
}
Result

サンプルデモはこちら

5. CSSの切り替え

CSSを設定時間できり替えるサンプル。

サンプル
HTML

<link rel="stylesheet" href="default.css" id="csstimer">

<div class="timer">
<p>設定時間でスタイルシートがきり替わります。</p>
<p>0時から12時まではテキストは赤く表示されます(default.css)。</p>
<p>12時から24時まではテキストは青く表示されます(alternate.css)。</p>
</div>
CSS

 default.css


.timer {
	color: #d49fc2;
	font-size: 120%;
}

alternate.css


.timer {
	color: #9fb7d4;
	font-size: 120%;
}

default.cssとalternate.cssを用意します。

JavaScript

var nt = new Date();
var hr = nt.getHours();
if(( hr >= 0 ) && ( hr <= 11 )) {//0時から12時
document.getElementById('csstimer').href = "default.css";
} else {//12時から23時
document.getElementById('csstimer').href = "alternate.css";
}
Result

サンプルデモはこちら


関連リンク

labs

  • カテゴリー:Labs