menu
menu

JavaScriptでタイマー系いろいろ | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0

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);
}

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);
}

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!");
}

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'>");
}

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";
}
  • カテゴリー:Labs
  • facebook4
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0