Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@takuya0206

JavaScriptでアラーム

Last updated at Posted at 2016-11-10

第4作目のプログラム。コードを書くことに少しずつ慣れてきた気がする。今回はJavaScriptでアラーム。基本の基本という感じだが、設定したアラームの削除まで実装するのはいい練習になった。尚、デザインはとりあえずのもので、モバイルからのアクセスは全く考えていない。

仕様

  • 現在の時刻を表示
  • 設定した時刻になるとアラーム
  • アラームは最大5つまで設定可能
  • 設定したアラームはテキストで表示
  • テキスト横のボタンからアラームを削除

コード

index.html
<div id='timerText'>0:00:00</div>
	<form name="alarm_form">
		<p>アラーム: <select name ='option_hours'>
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>
		<select name ='option_minutes'>
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
			<option value='24'>24</option>
			<option value='25'>25</option>
			<option value='26'>26</option>
			<option value='27'>27</option>
			<option value='28'>28</option>
			<option value='29'>29</option>
			<option value='30'>30</option>
			<option value='31'>31</option>
			<option value='32'>32</option>
			<option value='33'>33</option>
			<option value='34'>34</option>
			<option value='35'>35</option>
			<option value='36'>36</option>
			<option value='37'>37</option>
			<option value='38'>38</option>
			<option value='39'>39</option>
			<option value='40'>40</option>
			<option value='41'>41</option>
			<option value='42'>42</option>
			<option value='43'>43</option>
			<option value='44'>44</option>
			<option value='45'>45</option>
			<option value='46'>46</option>
			<option value='47'>47</option>
			<option value='48'>48</option>
			<option value='49'>49</option>
			<option value='50'>50</option>
			<option value='51'>51</option>
			<option value='52'>52</option>
			<option value='53'>53</option>
			<option value='54'>54</option>
			<option value='55'>55</option>
			<option value='56'>56</option>
			<option value='57'>57</option>
			<option value='58'>58</option>
			<option value='59'>59</option>
		</select> <span class="btn" id="set_btn">設定</span></p></form>

		<div class="container">
			<p>アラーム設定時刻</p>
			<ul id="parent_list">
			</ul>
		</div>
css.css
		body {
			font-family: Arial, 'メイリオ', sans-serif;
			text-align: center;
		}
		#timerText {
			color: #00aaff;
			font-size: 148px;
			margin: 30px auto;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		}

		p {
			font-size: 20px;
		}

		select {
			font-size: 18px;
			padding: 3px;
		}

		.btn{
			margin-left: 5px;
			display: inline-block;
			font-weight: bold;
			width: 60px;
			padding: 0.5px;
			border-radius: 5px;
			box-shadow: 0 2px 0 #CDC9C9;
			background: #EEE9E9;
			cursor: pointer;
		}

		.delete_btn {
			margin-left: 15px;
			font-weight: bold;
			width: 60px;
			padding: 3px;
			border-radius: 5px;
			background: #FF4500;
			box-shadow: 0 2px 0 red;
			cursor: pointer;
			color: #fff;
		}

		.container {
			text-align: left;
			padding: 15px;
			margin: 0 auto;
			background: #e0e0e0;
			width: 350px;
			height: 190px;
		}
		.container p {
			font-size: 16px;
			margin: 5px;

		}

		.container li{
			margin-bottom: 7px; 
		}
main.js
'use strict';
			let currentDate = new Date();
			let hours = currentDate.getHours();
			let minutes = currentDate.getMinutes();
			let seconds = currentDate.getSeconds();
			let timerText = document.getElementById('timerText');
			let set_btn = document.getElementById('set_btn');
			let delete_btn = document.getElementById('delete_btn');
			let option_hours;
			let option_minutes;
			let parent_list = document.getElementById('parent_list');
			let record = []; //アラーム設定格納
			let x = 0; // 計算用の変数

			//アラーム設定用オブジェクト
			let Setting = function(sethour, setminute){
				this.sethour = sethour;
				this.setminute = setminute;
			};

			// 時計の"12:1"を"12:01"と表記
			function adjustDigit (num){
				let digit;
				if( num < 10 ) {digit = `0${num}`;}
				else { digit = num; }
				return digit;
			}

			// アラームセット
			set_btn.addEventListener('click', function(){
				//アラームは最大5まで
				let lis = parent_list.getElementsByTagName('li');
				let len = lis.length;
				if (len >= 5) {return;}

				//設定時間を記録
				option_hours = document.alarm_form.option_hours.value;
				option_minutes = document.alarm_form.option_minutes.value;
				record[x] = new Setting(option_hours, option_minutes);

				 //設定時間を表示
				 let container_list = document.createElement('li');
				 let list_content = document.createTextNode(`${record[x].sethour}時${record[x].setminute}分`);
				 parent_list.appendChild(container_list);
				 container_list.appendChild(list_content);

				//表示削除用ボタン
				let list_span = document.createElement('span');
				let id_li = document.createAttribute('id'); 
				let id_span = document.createAttribute('id'); 
				let span_content = document.createTextNode('削除');
				container_list.appendChild(list_span);
				list_span.appendChild(span_content);
				container_list.setAttributeNode(id_li);
				container_list.id = x;
				container_list.classList.add('deletes');
				list_span.classList.add('delete_btn');

				//設定時刻と表示を削除
				let deletes = document.getElementsByClassName('deletes');
				for( var i = 0, de_len = deletes.length; i < de_len; i++) {
					deletes[i].onclick = function () {
						record[this.id] = 'disabled';
						this.id = 'temp';
						var temp = document.getElementById('temp');
						temp.parentNode.removeChild(temp);
					};
				};
				x++;
			});

			//時計を動かす
			function updateCurrentTime(){
				setTimeout(function(){
					currentDate = new Date();
					hours = adjustDigit(currentDate.getHours());
					minutes = adjustDigit(currentDate.getMinutes());
					seconds = adjustDigit(currentDate.getSeconds());
					timerText.innerHTML = `${hours}:${minutes}:${seconds}`;

					//アラーム機能
					for (var i = 0, len = record.length; i < len; i++){
						if (record[i].sethour == currentDate.getHours() && record[i].setminute == currentDate.getMinutes() && seconds == 0){
							alert('The time is now!');
						};
					};
					updateCurrentTime();
				}, 1000);
			}updateCurrentTime();
11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?