指定時刻に画面遷移をする方法が分からない

###前提・実現したいこと
MonacaとOnsenUIを用いてアプリ開発を勉強しているのですが、ピッカーなどでユーザーに時間を入力してもらった後に、その時刻になったら画面遷移をする。という動作をしたいのですが、どのように実装していいのかが分かりません。

試しに下記のソースを実装してみたのですが、動作しませんでした。
###該当のソースコード

javascript
1function alarmstart(){
2    document.querySelector('#navigator').pushPage('page2.html');
3}
4
5function timecheck() { //時刻確認 <ons-button>で発火
6    var times = $(".form-control").val();
7  
8    if(!times.match(/^\d{1,2}\:\d{2}$/)){     // 書式のチェック ( 十の位,一の位 + : + ２桁の数字) 
9        alert('正しい書式で入力してください');
10        return value;
11    }
12    var al = times.split(":"); //「:」で時間,分を分ける
13    if ( parseInt(al[0],10) < 0 || parseInt(al[0],10) > 23 || parseInt(al[1],10) < 0 || parseInt(al[1],10) > 59 ) {   //時間 = 0 ~ 23 : 分 = 0 ~ 59
14        alert('時間を入力してください');
15        return value;
16    }
17    else{
18        document.querySelector('#navigator').pushPage('alarm.html');
19        
20        //現在の時刻
21        var now = new Date();
22        var now_hour = now.getHours();
23        var now_min  = now.getMinutes();
24        var now_sec  = now.getSeconds();
25        
26        //目標時刻
27        var set_time = $(".form-control").val().split(':');
28        var set_hour = parseInt(set_time[0]);
29        var set_min  = parseInt(set_time[1]);
30        
31        if(now_hour > set_hour){
32            set_hour += 24;
33        }
34        if(now_sec < 60){
35            now_sec  = 60 - now_sec;
36        }
37        if(now_hour == set_hour && now_min > set_min){
38            set_hour += 24;
39        }
40        
41        //時差を求める
42        var dif_hour = (set_hour - now_hour)*3600;
43        var dif_min  = (set_min  - now_min)*60;
44        
45        //秒に変換する
46        var dif_sec  = dif_hour + dif_min + now_sec;
47
48        //時間後画面遷移
49        return setTimeout("alarmstart()", dif_sec*1000);
50    }
51    return times;
52}

正式な時間が入力されているのを確認してから画面遷移をするようにしたいです。
else文の初めにdocument.querySelector('#navigator').pushPage('alarm.html');があるのは、時刻の入力後、確認ボタンを押した後時刻になるまでの待機画面を用いるためです。

###補足情報(言語/FW/ツール等のバージョンなど)
OnsenUI:ver2.4.2

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <link rel="stylesheet" href="components/loader.css">
8  <script src="components/loader.js"></script>
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
10  <script>
11    ons.ready(function() {
12    });
13    
14    function alarmstart(){
15        document.querySelector('#navigator').pushPage('page2.html');
16    }
17  
18    function timecheck() { //時刻確認 <ons-button>で発火
19      var times = $(".form-control").val();
20
21      if(!times.match(/^\d{1,2}\:\d{2}$/)){     // 書式のチェック ( 十の位,一の位 + : + ２桁の数字) 
22          alert('正しい書式で入力してください');
23          return value;
24      }
25      var al = times.split(":"); //「:」で時間,分を分ける
26      if ( parseInt(al[0],10) < 0 || parseInt(al[0],10) > 23 || parseInt(al[1],10) < 0 || parseInt(al[1],10) > 59 ) {   //時間 = 0 ~ 23 : 分 = 0 ~ 59
27          alert('時間を入力してください');
28          return value;
29      }
30      else{
31          document.querySelector('#navigator').pushPage('alarm.html');
32  
33          //現在の時刻
34          var _now = moment();
35          
36          //目標時刻
37          var _set = moment().hour(parseInt(al[0])).minute(parseInt(al[1])).second(0);
38  
39          console.log(_now);
40          console.log(_set);
41  
42          // 時差を求める
43          if(_set.diff(_now) <= 0) {
44            _set.add(1, 'day');
45          }
46  
47          //時間後画面遷移
48          console.log(_set.diff(_now));
49          return setTimeout("alarmstart()", _set.diff(_now));
50      }
51      return times;
52    }
53    
54    document.addEventListener('init', function(event) {
55      var page = event.target;
56      if (page.id === 'page1') {
57      } else if (page.id === 'page2') {
58      }
59    });
60</script>
61</head>
62<body>
63
64<ons-navigator id="navigator" page="page1.html"></ons-navigator>
65
66<template id="page1.html">
67  <ons-page id="page1">
68    <ons-input class="form-control" modifier="underbar" placeholder="時間入力" value="11:30" float></ons-input>
69    <ons-button onclick="timecheck();">設定</ons-button>
70  </ons-page>
71</template>
72
73<template id="page2.html">
74  <ons-page id="page2">
75    <ons-toolbar>
76      <div class="left"><ons-back-button>Page 2</ons-back-button></div>
77      <div class="center"></div>
78    </ons-toolbar>
79
80    <p>This is the second page.</p>
81  </ons-page>
82</template>
83
84<template id="alarm.html">
85  <ons-page id="alarm">
86    <ons-toolbar>
87      <div class="left"><ons-back-button>alarm</ons-back-button></div>
88      <div class="center"></div>
89    </ons-toolbar>
90
91    <p>This is the alarm page.</p>
92  </ons-page>
93</template>
94
95</body>
96</html>