【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

サンプルデモ