2021-03-09

ジャンケンゲームのアウトプット（その３）

こんにちわ、168です。
今回もジャンケンゲームを作成しましたので、そのアウトプットを行います。

コード

app/views/games/index.html


<!DOCTYPE html>

<head>
  <title>ジャンケンゲーム</title>
</head>

<body>
  <div class='title'>
    <h1>ジャンケンゲーム</h1>
  </div>
  <div class='my-selct'>
    <div class='selct'>
      <div class='sentence'>
        <h2>あなたの手は?</h2>
      </div>
      <img id='gu' src="/assets/janken_gu.png" onclick='gu()' class='size'>
      <img id='choki' src="/assets/janken_choki.png" onclick='choki()' class='size'>
      <img id='pa' src="/assets/janken_pa.png" onclick='pa()' class='size'>
    </div>
  </div>
  <div class='vs'>
    <div class='hand'>
      <div class='sentence'>
        <h2>出した手</h2>
      </div>
      <div class='enclosure'>
        <img id="myhand" src="/assets/hakusi.jpg" class='vs-size'>
      </div>
    </div>
    <h1>VS</h1>
    <div class='hand'>
      <div class='sentence'>
        <h2>あいての手</h2>
      </div>
      <div class='enclosure'>
        <img id="hishand" src="/assets/hakusi.jpg" class='vs-his-size'>
      </div>
    </div>
  </div>
  <div class='sentence'>
    <div class='action'>
      <div class='vs'>
        <h1>結果</h1>
      </div>
      <div class='vs'>
        <h2 id="result"></h2>
      </div>
    </div>
  </div>


</body>

<script>

//選択された手を判断する
function gu()
{
  var mynumber=0
  Game(mynumber)
  document.getElementById('gu').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("pa").style.border = null;
}
function choki()
{
  var mynumber=1
  Game(mynumber)
  document.getElementById('choki').style.border = '5px solid black';
  document.getElementById("gu").style.border = null;
  document.getElementById("pa").style.border = null;
}
function pa()
{
  var mynumber=2
  Game(mynumber)
  document.getElementById('pa').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("gu").style.border = null;
}

function Game(mynumber)
{
  //相手の手を確認する(ランダム)
  hisnumber=Math.floor(Math.random()*3);
  //相手の出している手を表現
  var img = new Array();

  img[0] = new Image();
  img[0].src = "/assets/janken_gu.png";
  img[1] = new Image();
  img[1].src = "/assets/janken_choki.png";
  img[2] = new Image();
  img[2].src=  "/assets/janken_pa.png";

  document.getElementById("myhand").src = img[mynumber].src;
  document.getElementById("hishand").src = img[hisnumber].src;

  //ジャンケンの結果
  if (mynumber-hisnumber==-1||mynumber-hisnumber==2){
    result="あなたの勝ちです"
  }
  if (mynumber==hisnumber){
    result="引き分け"
  }
  if (mynumber-hisnumber==1||mynumber-hisnumber==-2){
    result="あいての勝ちです"
  }

  document.getElementById("result").innerHTML = result;
}

</script>

app/assets/stylesheets/style.css


body {
  width: 100vw;
  height: 100vh;
  margin:0;
  padding:0;
}

.size {
  width: 100px;
  height: 100px;
}

.title {
  width: 100vw;
  height: 50px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  line-height:0;
}

h1 {
  color: red;
}

.my-selct {
  display: flex;
  justify-content: center;
}

.sentence {
  display: flex;
  justify-content: center;
}

.vs {
  display: flex;
  justify-content: center;
}

.hand {
  margin: 10px 10px;
}

.enclosure {
  border: 5px solid black;
  padding: 10px;
}

.vs-size {
  width: 250px;
  height: 250px;
  transform: scale(-1, 1);
}

.vs-his-size {
  width: 250px;
  height: 250px;
}


.action {
  width: 70vw;
  height: 200px;
  background-color: gold;
}

画面

f:id:output168:20210309100412p:plain

学習

function gu()
{
  var mynumber=0
  Game(mynumber)
  document.getElementById('gu').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("pa").style.border = null;
}
function choki()
{
  var mynumber=1
  Game(mynumber)
  document.getElementById('choki').style.border = '5px solid black';
  document.getElementById("gu").style.border = null;
  document.getElementById("pa").style.border = null;
}
function pa()
{
  var mynumber=2
  Game(mynumber)
  document.getElementById('pa').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("gu").style.border = null;
}

手を選択した際に何を選択したのかをわかりやすくするために記入。
『document.getElementById('')』で変更する場所を指定し、『style.border』でCSSのborderを使用する事を示している。
borderの動きに関しては、『''』で囲む事で認識させる事ができる。

一度選択して他の選択を行った際に、borderが動いているままだとおかしいので、選択される度に他の選択肢のborderが消えるように記入している。

transform: scale(-1, 1);

画像を反転させて表示するために記入。
左の数字が左右を表しており、右の数字が上下を表している。

1としていする事で逆に指定するという動きを出す事ができる。

まとめ

今回はジャンケンゲームについてのアウトプットを行いました。
前回話していた、データベースへのくくりつけを行うように調べてみたのですが、データベースのデータを表示することはできても、データベースに保存はできなさそうだったので断念しました。

そのため、次回から新しい事を行おうと考えた際には事前にその動作が行えるのかどうかを一度調べてみてから挑戦していこうと考えました。

次回は一度挑戦して行う事ができなかった、音を鳴らす機能を実装していきたいと考えています。
次回もよろしくお願いします。

2021-03-06

ジャンケンゲームのアウトプット（その２）

こんにちわ、168です。
今回はジャンケンゲームを画像を使用して作りましたので、それのアウトプットをします。

コード

app/views/games/index.html.erb


<!DOCTYPE html>

<head>
  <title>ジャンケンゲーム</title>
</head>

<body>
  <h1>ジャンケンゲーム</h1>


  <h2>あなたの手は?</h2>
  <img id='gu' src="/assets/janken_gu.png" onclick='gu()' class='size'>
  <img id='choki' src="/assets/janken_choki.png" onclick='choki()' class='size'>
  <img id='pa' src="/assets/janken_pa.png" onclick='pa()' class='size'>
  <h2>あいての手</h2>
  <img id="hishand" src="/assets/hakusi.jpg" class='size' alt='test'>
  <div>結果</div>
  <h2 id="result"></h2>


</body>

<script>

//選択された手を判断する
function gu()
{
  var mynumber=0
  Game(mynumber)
}
function choki()
{
  var mynumber=1
  Game(mynumber)
}
function pa()
{
  var mynumber=2
  Game(mynumber)
}
function Game(mynumber)
{
  //相手の手を確認する(ランダム)
  hisnumber=Math.floor(Math.random()*3);
  //相手の出している手を表現
  var img = new Array();

  img[0] = new Image();
  img[0].src = "/assets/janken_gu.png";
  img[1] = new Image();
  img[1].src = "/assets/janken_choki.png";
  img[2] = new Image();
  img[2].src=  "/assets/janken_pa.png";

  document.getElementById("hishand").src = img[hisnumber].src;

  //ジャンケンの結果
  if (mynumber-hisnumber==-1||mynumber-hisnumber==2){
    result="あなたの勝ちです"
  }
  if (mynumber==hisnumber){
    result="引き分け"
  }
  if (mynumber-hisnumber==1||mynumber-hisnumber==-2){
    result="あいての勝ちです"
  }

  document.getElementById("result").innerHTML = result;
}

</script>

app/assets/stylesheets/style.css


.size {
  width: 100px;
  height: 100px;
}

config/routes.rb


Rails.application.routes.draw do
  root to: 'games#index'
end

app/assets/images

hakusi.jpg
janken_gu.png
janken_choki.png
janken_pa.png

画面

f:id:output168:20210306112248p:plain

学習

app/assets/images

hakusi.jpg
janken_gu.png
janken_choki.png
janken_pa.png

<img id='gu' src="/assets/janken_gu.png" onclick='gu()' class='size'>
<img id='choki' src="/assets/janken_choki.png" onclick='choki()' class='size'>
<img id='pa' src="/assets/janken_pa.png" onclick='pa()' class='size'>

<img id="hishand" src="/assets/hakusi.jpg" class='size' alt='test'>

画像を表示表示させるためにファイル保存&記入。
画像ファイルをassets/imagesの中に入れることで表示する事ができている。
assets/画像ファイル名と書く事で、画像ファイルまで導く事ができるようになっている。

<%= image_tag 'janken_gu.png' %>

上記の記述では、同じviewsファイルに画像ファイルを入れることで表示する事ができたが、javascriptを使用しての変更の仕方がわからなかったため、断念。

function gu()
{
  var mynumber=0
  Game(mynumber)
}
function choki()
{
  var mynumber=1
  Game(mynumber)
}
function pa()
{
  var mynumber=2
  Game(mynumber)
}

何の手が選択されているかどうかを判断するために記入。
Game()に移動する前にこの工程を挟む事で、選択した画像に数字を当てている。

var img = new Array();

  img[0] = new Image();
  img[0].src = "/assets/janken_gu.png";
  img[1] = new Image();
  img[1].src = "/assets/janken_choki.png";
  img[2] = new Image();
  img[2].src=  "/assets/janken_pa.png";

  document.getElementById("hishand").src = img[hisnumber].src;

選択された相手の手によって画像が変化するように記入。

まとめ

今回もジャンケンゲームのアウトプットを行いました。
ファイルを指定して実行すると言うことに関しては、前回よりも理解ができたと思います。

しかし、使用してると前回作成したジャンケンゲームよりも使用がしにくくなってしまっている印象があります。
さらに、データベースとも連携のさせたものも作りたいと考えています。
この2点を踏まえたものを次回は作っていこうと思います。

また次回もよろしくお願いします。

2021-03-04

ジャンケンゲームのアウトプット

こんにちわ、168です。

今回はジャンケンゲームアプリを作りましたのでアウトプットします。

前回、アラームを行うためのアプリを作ると書いていましたが、ファイルを指定して実行させることができなかったので、別のアプリを作成しました。

ファイル指定して実行させることができたら、その旨をアウトプットしていこうと思います。

コード

app/views/games/index.html.erb



<!DOCTYPE html>

<body>
  <h1>ジャンケンゲーム</h1>

  <form name='player'>
    <h2>あなたの手は?</h2>
    <select name='janken'>
      <option>グー</option>
      <option>チョキ</option>
      <option>パー</option>
    </select>
    <input type='button' value="決定" onclick='Game()'>
    <h2>あいての手</h2>
    <div id="hishand"> </div>
    <div>結果</div>
    <h2 id="result"></h2>
  </form>
</body>

<script>
function Game()
{
  //自分の手を確認する
  var mynumber=document.player.janken.selectedIndex;
  //相手の手を確認する(ランダム)
  hisnumber=Math.floor(Math.random()*3);
  //相手の出している手を表現
  if (hisnumber==0){
    hishand="グー"
  }
  if (hisnumber==1){
    hishand="チョキ"
  }
  if (hisnumber==2){
    hishand="パー"
  }
  document.getElementById("hishand").innerHTML = hishand;

  //ジャンケンの結果
  if (mynumber-hisnumber==-1||mynumber-hisnumber==2){
    result="あなたの勝ちです"
  }
  if (mynumber==hisnumber){
    result="引き分け"
  }
  if (mynumber-hisnumber==1||mynumber-hisnumber==-2){
    result="あいての勝ちです"
  }

  document.getElementById("result").innerHTML = result;
}

</script>

画面

f:id:output168:20210304114725p:plain

学習

<select name='janken'>
      <option>グー</option>
      <option>チョキ</option>
      <option>パー</option>
    </select>

ジャンケンの手を選択できるように記入。
selectを使用することでoptionに入れた文字を選択肢にする事ができる。
optionは上から順番に数字が当てられる。
1から数字が当てられるのではなく、0から数字が当てられるため注意が必要。

<div id="hishand"> </div>

〜

document.getElementById("hishand").innerHTML = hishand;

相手のジャンケンの手を表示するために記入。
idを指定することでscriptの動きを指定することができる。
innerHTMLを記入する事で、要素の中身を書き換える事ができます。

hisnumber=Math.floor(Math.random()*3);

ランダムで相手のジャンケンの手の値を作成するために記入。
Math.floor(Math.random()*3)で３つの数字から値が選ばれる。
このとき、0から数えた数字が選択されるため、この場合は（0、1、2）のいずれかが１つ選択される。

if (hisnumber==0){
    hishand="グー"
  }
  if (hisnumber==1){
    hishand="チョキ"
  }
  if (hisnumber==2){
    hishand="パー"
  }

選択された数字を相手の手と表現するために記入。
select内のoptionの値と一致させている。

if (mynumber-hisnumber==-1||mynumber-hisnumber==2){
    result="あなたの勝ちです"
  }
  if (mynumber==hisnumber){
    result="引き分け"
  }
  if (mynumber-hisnumber==1||mynumber-hisnumber==-2){
    result="あいての勝ちです"
  }

ジャンケンの結果を表すために記入。
ジャンケンの手は全て値が割り振られている。
その値を計算し、出た値で結果を判別している。

勝ちが存在するパターンとしては、
（自分）グー　　（相手）チョキ
（自分）チョキ　（相手）パー
（自分）パー　　（相手）グー
の３パターンが存在する。

値に変換すると、
（自分）0　（相手）1
（自分）1　（相手）2
（自分）2　（相手）0
となる。

足し算にすると別の結果なのに値が同じになってくる事象が発生してしまうので、引き算で計算を行うと
（自分）0　ー（相手）1　＝　-1
（自分）1　ー（相手）2　＝　-1
（自分）2　ー（相手）0　＝　2
という結果になり、-1と2を定義することで勝ちを表すことができる。

負けが存在するパターンとしては勝ちパターンの逆のため、
（自分）0　ー（相手）2　＝　-2
（自分）1　ー（相手）0　＝　1
（自分）2　ー（相手）1　＝　1
という結果になり、-2と1を定義することで負けを表すことができる。

引き分けに関しては同じ値が出ていると引き分けなため、値が同じであれば引き分けだと表している。

まとめ

今回はジャンケンゲームを作り、アウトプットしました。
今回はファイルを指定して実行を行うことをする上でのフォーマット作りの意味をこめて作成しました。

作成が止まっているアラームを行うためのアプリを作成できるように、一度画像ファイルを用いてファイル指定の練習をしようと考えています。
そのため、次回はジャンケンの手を画像で使用して作っていきたいと思います。
また次回もよろしくお願いします。

2021-03-01

新規アプリ作成（rails）

こんにちわ、168です。

今回は新規アプリの作成方法についての記事を書こうと思います。

いくつもの新規アプリを作る中で、自らが覚えられていないところなどあると思いましたので、より記憶の定着のために書きます。

新規アプリ作成

[ターミナル]

rails new [新規アプリ名]

このとき作成に時間が10分ほどかかります。

[ターミナル]

Webpacker successfully installed 🎉 🍰

と表示されれば完成です。

作成ができているのかの確認

[ターミナル]

cd ~/projects/[新規アプリ名]

rails s

ホームページよりhttp://localhost:3000/を検索して、下記のような画面になれば成功。

f:id:output168:20210301152405p:plain

画面の作成

[ターミナル]

rails g controller [コントローラ名]

コントローラーを作成
このとき、コントローラー名は複数形にて作成

config/routes.rb

root to: '[コントローラー名]#index'

app/views/[コントローラー名]/index.html.erb

test

画面の更新を行い、「test」と出ていれば画面作成の成功。

モデルの作成

[ターミナル]

rails g model [モデル名]

rails db:create

rake db:migrate

これでsequel proにて確認をして、[モデル名]が記入されていれば成功。

まとめ

今回は新規アプリ作成に関して書きました。
これを見ながら今後はより早く作成にとりかかっていきたいです。

現在、音を鳴らす方法を学習していますが、中々うまくいきません。
完成しましたら、すぐにアウトプットを行いますので、よろしくお願いします。

2021-02-27

タイマーアプリのアウトプット（その２）

こんにちわ、168です。
前回に引き続きタイマーアプリを作成しましたので、アウトプットを行います。
今回はストップウォッチをモチーフに、データがなければ時間を計測し、データがあれば時間をカウントするものを作りました。

タイマーのメインコード

app/views/times/index.html.erb


<!DOCTYPE html>

<h1>StopWatch</h1>

<div class="main">
  <div class="timer">
    <div class="timer-frame">
      <form name="timer" class="timer-time">
        <div class="timer-notation">
          <input style="text-align: center;" value="0">m
          <input style="text-align: center;" value="0">s
          <input style="text-align: center;" value="0"><br>
        </div>
        <input type="button" value="start" onclick="cntStart()" class="button">
        <input type="button" value="stop" onclick="cntStop()" class="button">
        <input type="button" value="reset" onclick="cntReset()" class="button">
      </form>
    </div>
  </div>
</div>

<script>

//関数の宣言
var timer;

//ストップを押せないように宣言
document.timer.elements[4].disabled=true;

//スタートを押すと1000ミリ秒毎に呼び出す関数
function cntStart()
{
  document.timer.elements[3].disabled=true;
  document.timer.elements[4].disabled=false;
  document.timer.elements[5].disabled=true;
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  var ms=document.timer.elements[2].value;
  if( (min=="0") && (sec=="0") && (ms=="0") )
  {
    timer=setInterval("countUp()",10);
  }
  else
  {
  timer=setInterval("countDown()",10);
  }
}

//ストップを押すと止まる関数
function cntStop()
{
  document.timer.elements[3].disabled=false;
  document.timer.elements[4].disabled=true;
  document.timer.elements[5].disabled=false;
  clearInterval(timer);
}

//カウントアップ関数
function countUp()
{
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  var ms=document.timer.elements[2].value;

  if (min=="") min=0;
  min=parseInt(min);

  if (sec=="") sec=0;
  sec=parseInt(sec);

  if (ms=="") ms=0;
  ms=parseInt(ms);

  tmWriteUp(min*6000+sec*100+ms+1);

}

//カウントダウン関数
function countDown()
{
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  var ms=document.timer.elements[2].value;

  if (min=="") min=0;
  min=parseInt(min);

  if (sec=="") sec=0;
  sec=parseInt(sec);

  if (ms=="") ms=0;
  ms=parseInt(ms);

  tmWriteDown(min*6000+sec*100+ms-1);
}

//残り時間を書き出す関数(Up)
function tmWriteUp(up)
{
  up=parseInt(up);

    //残り分数はupを6000で割って切り捨てる
    document.timer.elements[0].value=Math.floor(up/6000);
    //残り分数はupを6000で割ったあまり100で割り切り捨てた
    document.timer.elements[1].value=Math.floor(up%6000/100);
    //残り秒数はupを100で割った余り
    document.timer.elements[2].value=up % 100;
}

//残り時間を書き出す関数(Down)
function tmWriteDown(int)
{
  int=parseInt(int);

  if (int<=0)
  {
    cntReset();
    alert("時間です！");
  }
  else
  {
    //残り分数はintを6000で割って切り捨てる
    document.timer.elements[0].value=Math.floor(int/6000);
    //残り分数はintを6000で割ったあまりを100で割り切り捨てた
    document.timer.elements[1].value=Math.floor(int%6000/100);
    //残り秒数はintを100で割った余り
    document.timer.elements[2].value=int % 100;
  }
}

//フォームを初期状態に戻す（リセット）関数
function cntReset()
{
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].value="0";
  document.timer.elements[3].disabled=false;
  document.timer.elements[4].disabled=true;
  document.timer.elements[5].disabled=false;
  clearInterval(timer);
}

</script>

app/assets/stylesheets/style.css


h1 {
  display: flex;
  justify-content: center;
}

.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
}

.timer {
  background-color: aqua;
  width: 300px;
  height: 300px;
  border: 2px solid black;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.timer-frame {
  background-color: aquamarine;
  width: 200px;
  height: 200px;
  margin: auto;
  border: 2px solid black;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

form {
  margin: 70px 0 0;
}

.timer-notation {
  display: flex;
  justify-content: center;
  align-content: center;
}

input {
  width: 15px;
  margin: 0 2px;
}

.button {
  width: 50px;
}

画面

f:id:output168:20210227155727p:plain

学習

<input style="text-align: center;">

input内の文字を中央に表示するための表記です。
class名を指名して、cssによって変更を行おうと考えましたが、変更はできそうになかったため、直接的に変更を行うようにしています。

  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  var ms=document.timer.elements[2].value;
  if( (min=="0") && (sec=="0") && (ms=="0") )
  {
    timer=setInterval("countUp()",10);
  }
  else
  {
  timer=setInterval("countDown()",10);
  }

時間が0か設定されているのかで処理を分けているところです。
setIntervalは設定した時間内で、条件を動かすという命令になりますので、この場所で条件を分けず、次の命令の場所で条件を分けようとすると動かなくなってしまいます。

setInterval("countUp()",10);

前回使用したsetIntervalを1000から10に処理時間を変更して作成しました。
この場合、1/100秒を計測する事ができるため、1秒以下の時間を表すこともできるようになりました。
ここで1ではなく、10にしているのかというと、1で処理を行うと、わずかな処理速度のラグで正確な1秒を図れていなかったためです。

#時間が増える処理
tmWriteUp(min*6000+sec*100+ms+1);
#時間が減る処理
tmWriteDown(min*6000+sec*100+ms-1);

処理時間が変更されたため、式が変更されています。

 //残り分数はupを6000で割って切り捨てる
    document.timer.elements[0].value=Math.floor(up/6000);
    //残り分数はupを6000で割ったあまり100で割り切り捨てた
    document.timer.elements[1].value=Math.floor(up%6000/100);
    //残り秒数はupを100で割った余り
    document.timer.elements[2].value=up % 100;

上記と同様、処理の時間が変更されたため式が変更されています。

まとめ

今回は見た目もストップウォッチに見立てて作りました。
本当はアラームの実装を行なっていきたかったのですが、調べれば調べるほどわからなくなってしまったため、次回アラームを行うためのアプリ作りをしようと考えました。

次回はアラーム作成を行なっていこうと思います。
また次回よろしくお願いします。

2021-02-26

form内に配置できる要素

こんにちわ、168です。
前回の記事を書く際にform内の要素を覚えるべきじゃないかと考えて記事にします。

** form内に配置できる要素

#1行のテキストを入力
<input type="text">

#パスワードを入力
<input type="password">

#単一選択
<input type="radio">

#複数選択
<input type="checkbox">	

#選択項目の中から1つを選択
<select>
  <option> ～ </option>
</select>

#選択項目の中から1つ、もしくは複数を選択
<select multiple>
<option> ～ </option>
</select>

#クリックを受け付けるボタン
<input type="button">

#formの送信を行うボタン
<input type="submit">

#formの内容をリセットするボタン
<input type="reset">

#ファイル選択ボックスを表示する
<input type="file">

#""内の名前をつける
<input name="">

#（　）内の要素の値をつける（select要素では使用不可）
<input value=（　）>

#""内のclassに指定する
<input class="">

#クリックされたときに""内を発火する
<input onclick="">

** まとめ

自らが調べたところ、このようなものがありました。
まだ調べきれていない部分も存在すると感じるので、また見つけ次第更新していこうと思います。
また次回よろしくお願いしまう。

2021-02-26

タイマーアプリのアウトプット

こんにちわ、168です。
本日はタイマーアプリの試作品を参考ページを確認しながら作成しましたので、記事を書こうと思います。

**タイマーのメインコード

app/views/times/index.html.erb

<!DOCTYPE html>
<h1>TIMER</h1>
<form name="timer">
  <h2>CountUp</h2>
  <input value="0" class="hou">時間
  <input value="0" class="min">分
  <input value="0" class="sec">秒<br>
  <input type="button" value="スタート" onclick="cntStart1()">
  <input type="button" value="ストップ" onclick="cntStop1()">
  <input type="button" value="リセット" onclick="reSet1()">
</form>

<form name="timer2">
  <h2>CauntDown</h2>
  <input value="0" class="hou">時間
  <input value="0" class="min">分
  <input value="0" class="sec">秒<br>
  <input type="button" value="スタート" onclick="cntStart2()">
  <input type="button" value="ストップ" onclick="cntStop2()">
  <input type="button" value="リセット" onclick="reSet2()">
</form>


<script>

 //countUpを行う関数を宣言
var timer1;

//ストップを押せないように宣言
document.timer.elements[4].disabled=true;


//スタートを押すと1000ミリ秒毎に呼び出す関数
function cntStart1()
{
  document.timer.elements[3].disabled=true;
  document.timer.elements[4].disabled=false;
  document.timer.elements[5].disabled=true;
  timer1=setInterval("countUp()",1000);
}

//ストップを押すと止まる関数
function cntStop1()
{
  document.timer.elements[3].disabled=false;
  document.timer.elements[4].disabled=true;
  document.timer.elements[5].disabled=false;
  clearInterval(timer1);
}

//カウントアップ関数
function countUp()
{
  var hou1=document.timer.elements[0].value;
  var min1=document.timer.elements[1].value;
  var sec1=document.timer.elements[2].value;

  {
    if (hou1=="") hou1=0;
    hou1=parseInt(hou1);

    if (min1=="") min1=0;
    min1=parseInt(min1);

    if (sec1=="") sec1=0;
    sec1=parseInt(sec1);

    tmWrite1(hou1*3600+min1*60+sec1+1);
  }
}

//残り時間を書き出す関数
function tmWrite1(int1)
{
  int1=parseInt(int1);

  {
    //残り分数はintを3600で割って切り捨てる
    document.timer.elements[0].value=Math.floor(int1/3600);
    //残り分数はintを3600で割ったあまりを切り捨てた
    document.timer.elements[1].value=Math.floor(int1%3600/60);
    //残り秒数はintを60で割った余り
    document.timer.elements[2].value=int1 % 60;
  }
}

//フォームを初期状態に戻す（リセット）関数
function reSet1()
{
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].value="0";
  document.timer.elements[3].disabled=false;
  document.timer.elements[4].disabled=true;
  clearInterval(timer1);
}

//countDownを行う関数を宣言
var timer2;

//ストップを押せないように宣言
document.timer2.elements[4].disabled=true;

//スタートを押すと1000ミリ秒毎に呼び出す関数
function cntStart2()
{
  document.timer2.elements[3].disabled=true;
  document.timer2.elements[4].disabled=false;
  document.timer2.elements[5].disabled=true;
  timer2=setInterval("countDown()",1000);
}

//ストップを押すと止まる関数
function cntStop2()
{
  document.timer2.elements[3].disabled=false;
  document.timer2.elements[4].disabled=true;
  document.timer2.elements[5].disabled=false;
  clearInterval(timer2);
}

//カウントダウン関数
function countDown()
{
  var hou2=document.timer2.elements[0].value;
  var min2=document.timer2.elements[1].value;
  var sec2=document.timer2.elements[2].value;

  if( (hou2=="") && (min2=="") && (sec2=="") )
  {
    alert("時刻を設定してください！");
    reSet2();
  }
  else
  {
    if (hou2=="") hou2=0;
    hou2=parseInt(hou2);

    if (min2=="") min2=0;
    min2=parseInt(min2);

    if (sec2=="") sec2=0;
    sec2=parseInt(sec2);

    tmWrite2(hou2*3600+min2*60+sec2-1);
  }
}

//残り時間を書き出す関数
function tmWrite2(int2)
{
  int2=parseInt(int2);

  if (int2<=0)
  {
    reSet2();
    alert("時間です！");
  }
  else
  {
    //残り分数はintを3600で割って切り捨てる
    document.timer2.elements[0].value=Math.floor(int2/3600);
    //残り分数はintを3600で割ったあまりを切り捨てた
    document.timer2.elements[1].value=Math.floor(int2%3600/60);
    //残り秒数はintを60で割った余り
    document.timer2.elements[2].value=int2%60;
  }
}

//フォームを初期状態に戻す（リセット）関数
function reSet2()
{
  document.timer2.elements[0].value="0";
  document.timer2.elements[1].value="0";
  document.timer2.elements[2].value="0";
  document.timer2.elements[3].disabled=false;
  document.timer2.elements[4].disabled=true;
  document.timer2.elements[5].disabled=false;
  clearInterval(timer2);
}

</script>

** 画面
f:id:output168:20210226112617p:plain

** 学習

<form>
〜
</form>

ユーザーが入力したものをJavaScriptプログラムでサーバーを動かす事ができる。

<form name="test">
  <input>
  〜
</form>

formオブジェクト"test"のelementsオブジェクトの何番目（上から0.1.2.3〜）に何の指示を出すかということを命令できるようになる。
↓

#命令のコード
document.test.elements[0]

今回使用している指示コードは

#（　）の中身を記述
document.test.elements[0].value=(　);

#使用をできなくする　
document.test.elements[0].disabled=true;　

#使用を許可する
document.test.elements[0].disabled=false;

form内には今回は以下の要素を代入している。

#""内の「test」文字を入力する
<input value="test">　

#ボタンとして使用する
<input type="button">

今回代入した要素以外にも使用できる要素は存在する。

<input type="button" onclick="test">　#ボタンを押した際に""内の「test」関数を実行

条件を満たすと定義している関数を動かす事が可能。
関数が一致、もしくは書かれていないとエラーが起こる。

#""内の「test」関数を1000ミリ秒（1秒）毎に処理を起こす
setInterval("test()",1000);

時間の設定が1ミリ秒で行われているため、1秒の処理をする際にはそのような秒数に合わせなければならない。

function test()
{〜
}

test関数の処理を{　}内に記入して動かす。

alert("test");

（　）内の""内の「test」をポップさせる。

#（　）内の数の数値以下の値を返す
Math.floor(数）;

小数点以下を記入しない場合、記入する。

clearInterval(test);

（　）内のtest関数を解除する。

** まとめ

とりあえず動くものをと考えて作っていたため、見た目はとても簡素な状態で作りました。
記入してみると意外と少ない内容でタイマーが動いている事がわかりました。
参考にしたサイトを見ながら行いましたが、次はそちらのサイトを見ずに今回とは少し違ったタイマーを作成しようと思います。

次回もまたよろしくお願いします。

参考にしたサイト様
www.pazru.net