【JavaScript】10分間操作が無かった場合、TOP画面に戻る

Javascriptでwebシステムを構築中です。
10分間時間が経過したらトップ画面に遷移するものは
META http-equiv="refresh" で、作成できたのですが
10分間マウス、キーボードでの操作が無かった場合のものが作れません。
どなたか、教えていただけませんか。

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

回答3件

以下のような感じで作ってみるといいでしょう。
・ページロード時に、setTimeoutで10分後に戻る操作を実装する
・マウスクリックやキー操作時に、タイマーをクリアし再セット

jQuery使用で作ると以下のような感じで動くと思います。

lang
1$(function(){
2  function timer_func(){
3    location.href='10分後の移動先';
4  }
5  var time_limit=10*60*1000; //制限時間
6  var timer_id=setTimeout(timer_func, time_limit);
7
8  //拾うイベントは追加・調整もできます
9  $('body').on('keydown mousedown',function(){
10    clearTimeout(timer_id);
11    timer_id=setTimeout(timer_func, time_limit);
12  });
13});

投稿2015/01/20 02:42

maisumakun

総合スコア145184

素のJavaScriptで書いてみました。指定を幅広くできるようにしたつもりです。

lang
1(function (_Time,_Unit,_EventNamesArray){
2  var TimeUnits=(new function (){
3    this.Second=1000,
4    this.Minute=this.Second*60,
5    this.Hour=this.Minute*60
6  }());
7  var Timer={};
8  Timer.Limit=_Time*TimeUnits[_Unit];
9  Timer.Main=function (){
10    Timer.RemoveEvent();
11    console.log("LIMIT!!");
12    //location.href="index.html";
13  };
14  Timer.SetTimeoutID="";
15  Timer.SetTimeout=function (){
16    this.SetTimeoutID=setTimeout(this.Main,this.Limit);
17    return this;
18  };
19  Timer.ClearTimeout=function (){
20    clearTimeout(Timer.SetTimeoutID);
21    return this;
22  };
23  Timer.Manage=function (){
24    Timer.ClearTimeout().SetTimeout();
25  };
26  Timer.EventNames=_EventNamesArray || ["keydown","mousemove","click"];
27  Timer.EventNamesLength=Timer.EventNames.length;
28  Timer.SetEvent=function (){
29    var _Length=this.EventNamesLength;
30    while(_Length--){
31      addEventListener(this.EventNames[_Length],this.Manage,false);
32    };
33  };
34  Timer.RemoveEvent=function (){
35    var _Length=this.EventNamesLength;
36    while(_Length--){
37      removeEventListener(this.EventNames[_Length],this.Manage,false);
38    };
39  };
40  
41  Timer.SetTimeout().SetEvent();
42}(10,"Minute"))//引数に指定した数値と単位で処理
43//第三引数にイベント名を代入した配列を渡すことで変更可能(["mousemove","keydown"]のように)

addEventListenerはIE8以下に対応していないため、IE用のpolyfillなどを用いることを推奨します。

投稿2015/01/21 18:21

Cf_cwd

総合スコア730

こんにちは。

こんな感じでもご希望の挙動が実現できるはずです。

lang
1<!DOCTYPE html>
2<html>
3<head><title>sample</title>
4<meta http-equiv="Content-Script-Type" content="text/javascript">
5</head>
6<body>
7<div id="top">top</div>
8<div></div>
9
10<script type="text/javascript">
11<!--
12var Sample = {
13wait : 600, //待機時間（秒)
14url : "http://sample.jp/index.html#top" //ジャンプ先URL
15};
16
17Sample.record = function() {
18this.timeout = +new Date() + this.wait * 1000;
19};
20
21Sample.check = function() {
22if (this.timeout == undefined) this.record();
23if (this.timeout - new Date() < 0) location.href = this.url;
24}
25
26//@cc_on
27document./*@if(1)attachEvent('on' + @else @*/addEventListener(/*@end @*/
28'mousemove', function(){ Sample.record() }, false);
29setInterval(function(){ Sample.check() }, 1000);
30//-->
31</script>
32</body>
33</html>