
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
JavaScript
2018.01.29
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript を使用して、共に START ボタンと STOP ボタンを使用する「ストップウォッチ」と「スロットゲーム」のサンプルを紹介します。
シンプルなストップウォッチを作成します。
START ボタンとSTOP ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var tm1; var tm2; // START function start() { tm1 = 0; tm2 = setInterval("disp()", 1000); } // STOP function stop() { clearInterval(tm2); } //経過時間表示 function disp() { //経過秒数を1秒ずつ加算 ++tm1; //時間(経過秒数 / 3600秒) hh = Math.floor(tm1 / 3600); //分(時間の余り / 60秒) mm = Math.floor((tm1 % 3600) / 60); //分(分の10の位と1の位を取得) mm1 = Math.floor(mm / 10); mm2 = mm % 10; //秒(経過秒数 / 60秒の余り) ss = tm1 % 60; //秒(秒の10の位と1の位を取得) ss1 = Math.floor(ss / 10); ss2 = ss % 10; document.getElementById("dat").value = hh + ":" + mm1 + mm2 + ":" + ss1 + ss2; } //--> </script> <div style="background-color : #CCC; padding : 20px;"> <input type="text" id="dat" size="10" value="0:00:00" style="text-align:center;font-size:30px"> <br><br> <div style="display:inline-flex; padding : 0 30%;"> <input type="button" value="START" onClick="start()"> <input type="button" value="STOP" onClick="stop()"> </div> </div>
ストップウォッチがスタートしてから 1秒ずつ経過する時間を表示するための変数( tm1 )と、ストップウォッチをストップさせるために設定する変数( tm2 )を使用します。
スロットゲームを作成します。
START ボタンとSTOP ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script language="JavaScript"> <!-- var time1; var time2; var time3; // START function start() { start1(); start2(); start3(); } //各ランダム値を表示 function start1() { document.getElementById("dat1").value = Math.floor(Math.random()*10); time1 = setTimeout(start1, 10); } function start2() { document.getElementById("dat2").value = Math.floor(Math.random()*10); time2 = setTimeout(start2, 10); } function start3() { document.getElementById("dat3").value = Math.floor(Math.random()*10); time3 = setTimeout(start3, 10); } // STOP function stop1() { clearTimeout(time1); } function stop2() { clearTimeout(time2); } function stop3() { clearTimeout(time3); } //--> </script> <style> table, tr, td{ border-style:none; } </style> <div style="background-color : #CCC; padding : 20px;"> <table> <tr><td colspan="3"> <input type="button" value="START" onClick="slot()" style="width:100%;"> </td></tr> <tr><td> <input type="text" id="dat1" value="0" style="text-align:center;font-size:30px"> </td> <td> <input type="text" id="dat2" value="0" style="text-align:center;font-size:30px"> </td> <td> <input type="text" id="dat3" value="0" style="text-align:center;font-size:30px"> </td></tr> <tr><td> <input type="button" value="STOP" onClick="stop1()" style="width:100%;"> </td> <td> <input type="button" value="STOP" onClick="stop2()" style="width:100%;"> </td> <td> <input type="button" value="STOP" onClick="stop3()" style="width:100%;"> </td></tr> </table> </div>
3個のランダム値を それぞれストップさせるために、3つのタイマー変数( time1、time2、time3 )を設定しています。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.