JavaScript & jQuery & CSS の達人

JavaScript と jQuery と CSS の使い方がわかるブログ

JavaScript + jQuery でストップウォッチを作る方法

JavaScript + jQuery でストップウォッチを作る

今回は JavaScriptjQuery を使ってストップウォッチ(1/10秒タイプ)を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところ。CSSの「Float」と「Clear」の使い方を知っておくと便利です。

動作サンプル

「START」のクリックでスタート、「STOP」で停止、「RESET」をクリックすると「0:00'00''0」にリセットされる。 

0:00'00''0 START STOP RESET

 

HTMLソース

HTMLはとても簡単。4つの「span」タグだけで構成されている。 

<span id="youso1">0:00'00''0</span>
<span id="startbtn1">START</span>
<span id="stopbtn1">STOP</span>
<span id="resetbtn1">RESET</span>

JavaScript + jQueryコード

各ボタンにクリックイベントを設定している。また、1/10秒間隔で関数「panda1()」を実行して表示を更新している。 

var a = 0;
var tm1 = null;

$(function() {
     // スタートボタン
     $("#startbtn1").click(function() {
          if(tm1 == null) { tm1 = setInterval("panda1()",100); }
     });
     // ストップボタン
     $("#stopbtn1").click(function() {
          clearInterval(tm); tm1 = null;
     });
     // リセットボタン
     $("#resetbtn1").click(function() {
          $("#youso1").text("0:00'00''0");
          a = 0;
     });
});

function panda1() {
     a += 1;
     var sec = a % 10;
     var byo = Math.floor(a / 10) % 60;
     var fun = Math.floor(a / 600) % 60;
     var ji = Math.floor(a / 36000) % 60;

     // 時間の表示を更新している
     $("#youso1").text(('0' + ji).slice(-1) + ":" + ('00' + fun).slice(-2) + "'" + ('00' + byo).slice(-2) + "''" + sec);
}

CSS

一番下の赤色文字の部分で各ボタンにマウスカーソルが乗った時のマウスカーソル画像を「手」の形にしている。 

#youso1 {
     background-color: #F06;
     text-align: center;
     font-weight: bold;
     color: #FFF;
     font-size: 24px;
     float: left;
     padding: 5px;
     width: 320px;
}
#startbtn1 {
     background-color: #06C;
     font-size: 24px;
     color: #FFF;
     float: left;
     padding: 5px;
     clear: left;
     width: 100px;
     text-align: center;
}
#stopbtn1 {
     background-color: #F90;
     float: left;
     font-size: 24px;
     color: #FFF;
     padding: 5px;
     text-align: center;
     width: 100px;
}
#resetbtn1 {
     background-color: #09C;
     font-size: 24px;
     color: #FFF;
     float: left;
     padding: 5px;
     text-align: center;
     width: 100px;
}
#startbtn1:hover { cursor:pointer }
#stopbtn1:hover { cursor:pointer }
#resetbtn1:hover { cursor:pointer } 

終わり

JavaScript + jQuery でドキュメント上のマウスポインタの座標を取得する方法

マウスポインタの座標を取得する

マウスポインタの座標を取得するには、JavaScript の「clientX」「clientY」を利用する。 

X座標の取得:clientX
Y座標の取得:clientY

動作サンプル

ドキュメント(ページ)の左上がXとYの0座標となる。 

X座標:0
Y座標:0

JavaScript + jQuery ソースコード

ドキュメント(ページ)全体を対象にマウスポインタの移動座標を取得している。ソースコードjQueryJavaScript がミックスされている。 

$(function() {
     $(document).mousemove(function(e) {
          $("#xpos").text("X座標:" + e.clientX);
          $("#ypos").text("Y座標:" + e.clientY);
     });
});

終わり 

jQuery と CSS でHTML要素を回転させる方法

HTML要素をグルグル回転させる

今回は jQueryCSS を使ってHTML要素をグルグル・・・と回転させてみます。

要素を右回転で45度回転させるCSStransform:rotate(45deg);

動作サンプル

ページが読み込まれると同時にピンク色のボックスとその中の文字「要素」が回転します。 

要素

jQuery コード

内容は簡単です。ページが読み込まれると同時にタイマーを起動して100ミリ秒間隔で「kaiten()」関数を実行しています。 

     var kakudo = 0;     // 角度用変数

     $(function() {
          // タイマースタート kaiten() を100ミリ秒間隔で実行
          tm = setInterval("kaiten()",100);
     });

     function kaiten() {
          kakudo += 1;     // 角度+1
          // youso という id を持つ要素を回転する
          $("#youso").css("transform", "rotate(" + kakudo + "deg)");
     } 

CSS

今回のCSSに特筆すべき点はありませんね。 

#youso {
     background-color: #F06;
     text-align: center;
     font-weight: bold;
     color: #FFF;
     display: table-cell;
     vertical-align: middle;
     font-size: 36px;
     padding: 20px;

HTML ソース

今回、回転させたHTML要素は「id="youso"」を付けた「div」タグです。

<div id="youso">要素</div> 

終わり 

クリックでテーブルセルの背景色を変更する方法(jQuery版)

クリックでセルの背景色が変わる

今回は jQuery と使ってクリックするとテーブルセルの背景の色が変わるスクリプトを作ります。

動作サンプル

無色のセルをクリックすると背景色が赤色になり、赤色のセルをクリックすると無色になります。 

                   
                   
                   
                   
                   
                   

jQuery コード

コードはいたってシンプルです。クリックしたセルの背景色を取得して「無色透明」なら背景を赤色に、既に「赤色」だったら「無色透明」にしています。 

$(function() {
     $("td").click(function() {
          // 現在のセルの色が無色透明かを判別
          if($(this).css("background-color")=="rgba(0, 0, 0, 0)") {
               // 赤色に染める
               $(this).css("background-color", "red");
          } else {
               // 無色透明にする
               $(this).css("background-color", "");
          }
     });
}); 

HTML ソース

普通に6行のテーブルを作るだけで「class」も「id」もありません。ただし、この方法だとページ内にある他のテーブルすべてに反応してしまうので、テーブルが複数ある場合は「class」や「id」を付けて識別する必要があるでしょう。 

<table border="1" width="300">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
※途中省略(黄色の部分を5回繰り返している)
</tbody>
</table> 

終わり

JavaScript でカウントアップタイマーを作る方法

JavaScript でカウントアップ!

今回は JavaScript でカウントアップタイマーを作ります。タイマーは一定の時間で繰り返し処理ができる「setInterval」関数を使います。

var tm = setInterval("sample()", 1000);

解説:1000ms(1秒)ごとに関数 sample() を実行する。 

動作サンプル

1秒ごとにカウントアップして100で自動的にストップします。

0

JavaScript コード

今回の JavaScript コードです。jQuery で作ると少し簡単になりますね。 

     var a = 0;
     var box;
     var tm;

     window.onload = function() {
          // iruka というエレメントを取得
          box = document.getElementById("iruka");
          //タイマースタートと同時にタイマーを取得
          tm = setInterval("kujira()",1000);
     };

     function kujira() {
          //カウントアップ
          a += 1;
          // a の値を box オブジェクトに表示
          box.innerHTML = a;
          if(a >= 100) {
               //タイマーストップ
               clearInterval(tm);
          }
     } 

CSS

今回のサンプルのCSSです。

.box {
     background-color: #F33;
     font-weight: bold;
     color: #FFF;
     font-size: 72px;
     border-radius: 20px;
     padding: 20px;

END

CSSで角を丸める方法

角を丸める

要素の角を丸めるにはCSSで「border-radius」を設定します。

例) border-radius : 20px;

SAMPLE

CSSで「border-radius : 20px;」と設定すると四隅の角が丸くなりました。 

HTML 

<div class="box">箱</div>

CSS

角を丸めたい要素のCSSに「border-radius : 20px;」を追加するだけです。

.box {
     height: 100px;
     width: 100px;
     background-color: #F33;
     text-align: center;
     font-weight: bold;
     color: #FFF;
     display: table-cell;
     vertical-align: middle;
     font-size: 36px;
     border-radius: 20px;
}

備考・その他

border-radius:20px; ※丸めるサイズを1つだけ指定すると四隅を均等になる

border-radius:5px 10px 15px 20px; ※四隅の丸めるサイズをそれぞれ指定することもできる

終わり

jQuery でシンプルなトグルメニューを作る方法

jQuery でトグルメニューを作る

メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ってみます。

<サンプル>

まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層にあるサブメニューがスライドして出現します。そして、サブメニューが展開された状態で、もう一度青色文字の項目をクリックすると今度は展開されたサブメニューが収納されます。

親項目1
  • 子項目1-1
    • 孫項目1-1-1
    • 孫項目1-1-2
    • 孫項目1-1-3
  • 子項目1-2
    • 孫項目1-2-1
    • 孫項目1-2-2
    • 孫項目1-2-3
      • ひ孫項目1-2-3-1
      • ひ孫項目1-2-3-2
      • ひ孫項目1-2-3-3
  • 子項目1-3
    • 孫項目1-3-1
    • 孫項目1-3-2
    • 孫項目1-3-3
親項目2
  • 子項目2-1
    • 孫項目2-1-1
    • 孫項目2-1-2
    • 孫項目2-1-3
  • 子項目2-2
    • 孫項目2-2-1
    • 孫項目2-2-2
    • 孫項目2-2-3
  • 子項目2-3
    • 孫項目2-3-1
    • 孫項目2-3-2
    • 孫項目2-3-3

jQuery / JavaScript

スクリプトはいたってシンプルです。「class="aaa"」がある要素をクリックすると「class="bbb"」が設定された要素を展開したり閉じたりしているだけです。最後の行はページを読み込んだ瞬間にサブメニューを閉じているスクリプトで、これがないと最初からサブメニューが展開されてしまいます。 

$(function(){

     // class="aaa" が付いた要素をクリックすると…
     $(".aaa").click(function(){
          // class="aaa" の次にある class="bbb" 要素をスライドさせる
          $(this).next(".bbb").slideToggle(1000);
     });

     // 開始直後に展開したサブメニューを閉じている
     $(".bbb").slideToggle(0);
}); 

CSS

このCSSでは、親項目を赤色の文字にして行全体を項目として判断しているのと、親項目にマウスカーソルが乗った時にカーソルを「手」の形にしていますが、必ず必要なものではありません。このCSSがなくてもトグルメニューは動作します。 

<style type="text/css"><!--

     .aaa { color: #0FF; width: 100%;}
     .aaa:hover { cursor: pointer;}

--></style> 

HTMLコード

上のトグルメニューを実現するには「div」タグ「ul」タグ「li」タグを使用します。ポイントはサブメニューを展開する項目のタグに「class="aaa"」を設定、展開される項目を「class="bbb"」で一括りにするところ。 

<div class="aaa">親項目1</div>
     <ul class="bbb">
          <li class="aaa">子項目1-1</li>
               <ul class="bbb">
                    <li>孫項目1-1-1</li>
                    <li>孫項目1-1-2</li>
                    <li>孫項目1-1-3</li>
               </ul>
          <li class="aaa">子項目1-2</li>
               <ul class="bbb">
                    <li>孫項目1-2-1</li>
                    <li>孫項目1-2-2</li>
                    <li class="aaa">孫項目1-2-3</li>
                         <ul class="bbb">
                              <li>ひ孫項目1-2-1</li>
                              <li>ひ孫項目1-2-2</li>
                              <li>ひ孫項目1-2-3</li>
                         </ul>
               </ul>
          <li class="aaa">子項目1-3</li>
               <ul class="bbb">
                    <li>孫項目1-3-1</li>
                    <li>孫項目1-3-2</li>
                    <li>孫項目1-3-3</li>
               </ul>
     </ul>
<div class="aaa">親項目2</div>
     <ul class="bbb">
          <li class="aaa">子項目2-1</li>
               <ul class="bbb">
                    <li>孫項目2-1-1</li>
                    <li>孫項目2-1-2</li>
                    <li>孫項目2-1-3</li>
               </ul>
          <li class="aaa">子項目2-2</li>
               <ul class="bbb">
                    <li>孫項目2-2-1</li>
                    <li>孫項目2-2-2</li>
                    <li>孫項目2-2-3</li>
               </ul>
          <li class="aaa">子項目2-3</li>
               <ul class="bbb">
                    <li>孫項目2-3-1</li>
                    <li>孫項目2-3-2</li>
                    <li>孫項目2-3-3</li>
               </ul>
     </ul>

備考・その他

いかがでしたでしょうか?難しそうなトグルメニューも jQuery を使えば、実質1行のスクリプトで実現できてしまいます。

今回のトグルメニューのデザインサンプルはとてもシンプルなものですが、少し工夫すればグッと見栄えの良いトグルメニューになると思いますので、ぜひこの作り方を参考にしてグレードアップに挑戦してみてください。