Q&A
回答してくださり、ありがとうございましたm(__)m
実行して振ってみると、実際に経過した時間と比例してゲージが伸びていきました。
これは開始時刻を取得し直せていないということでしょうか？
また、ゲージが中間を超えたごろにhogeWidthが100を超えるようです…
原因としては何が考えられるのでしょうか(?_?)
重ね重ね申し訳ないのですが、教えていただけましたら幸いですm(__)m
###前提・実現したいこと
monacaでスマホを振ってとめるアラームアプリを作っています。
スマホを振った時間によってゲージの長さを変えようとしています。
振り始めの時間と現在の時間を取得して経過時間を求めるところまではできたのではないかと思います。
ですが、console.logを使ってゲージの伸び方を確認してみると、倍々になってしまっているようなのです(-_-;)
どこが原因となって倍々になってくのか、教えてくださいm(__)m
###該当のソースコード
JavaScript
1<!DOCTYPE HTML> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <script src="components/loader.js"></script> 11 <script src="js/ncmb-2.1.2.min.js"></script> 12 <script> 13 $(document) 14 .ready(initialize); 15 var flag = false; //初回かどうか判定するためのフラグ 16 var start_time;//振り始めた時刻をセットしておく変数 17 18 19 // 端末の角度が変わった時、端末を振った時の挙動の関数を呼び出す 20 function initialize() 21 { 22 window.addEventListener('devicemotion', function(e) 23 { 24 return shake(e); 25 }, true); 26 } 27 // 端末を振ったときの挙動の関数 28 function shake(e) 29 { 30 if (flag == false)//最初なら振り始めの時刻を取得 31 { 32 start_time = (new Date()).getTime(); 33 flag = true; //開始時刻を取得したらtrueにする 34 } 35 36 var x = e.acceleration.x; // X方向の加速度を取得 37 var y = e.acceleration.y; // y方向の加速度を取得 38 var z = e.acceleration.z; // z方向の加速度を取得 39 var current_time = new Date().getTime(); 40 var elapsed_time = current_time - start_time;//経過時間 41 42 43 if ((Math.abs(x) + Math.abs(y) + Math.abs(z)) > 40) 44 { 45 navigator.vibrate(100); //100ミリ秒バイブレーションさせる 46 var bar_width = document.getElementById('bar_over'); 47 var hogeWidth = $(bar_width).width() 48 49 console.log(hogeWidth); 50 if (hogeWidth > 100) 51 { //hogewidth（緑色のバーの％）が１００（％）をこえたら、そこで100に固定する。これでゲージの飛び出しを抑える 52 hogeWidth = 100; 53 document.write("Wake up,Worlds!"); 54 } 55 $(bar_width) 56 .css('width', (hogeWidth + (elapsed_time / 10000 )) + '%'); //緑色のバーを伸ばす 57 //経過時間が100ミリ秒（0.1秒）の時に、フラグをfalseにして開始時間をリセットする 58 if (elapsed_time == 100) 59 { 60 flag = false; 61 } 62 } 63 } 64 </script> 65</head> 66 67<body> 68 <h1>WakeUp!</h1> 69 <h2>If you want stop Alarm,</h2> 70 <h2>shake your smartphone!!</h2> 71 <div id="bar"> 72 <p id="bar_over"></p> 73 <p id="bar_under"></p> 74 </div> 75</body> 76 77</html> 78
CSS
1 2 3@charset "UTF-8"; 4 5 6h1 { 7 font-family: serif; 8 font-size: 28px; 9 color: #fff; 10 margin-top: 30px; 11 text-align: center; 12} 13 14h2 { 15 font-family: serif; 16 font-size: 20px; 17 margin-top: 30px; 18 text-align: center; 19} 20 21#bar { 22 height: 50px; 23 margin: 20px auto; 24 position: relative; 25 width: 200px; 26} 27 28#bar_over, 29#bar_under { 30 height: 50px; 31 margin: 10; 32 position: absolute; 33} 34 35 36/*緑色のゲージ部分 37振った回数によってwidthの％を変えたい*/ 38#bar_over { 39 background: linear-gradient(#6cbb5a, #000); 40 background: -webkit-linear-gradient(#6cbb5a, #000); 41 background: -moz-linear-gradient(#6cbb5a, #000); 42 background: -o-linear-gradient(#6cbb5a, #000); 43 background: -ms-linear-gradient(#6cbb5a, #000); 44 width:0%; 45 z-index:2; 46} 47/*黒色のゲージ*/ 48#bar_under { 49 background: linear-gradient(#333, #000); 50 background: -webkit-linear-gradient(#333, #000); 51 background: -moz-linear-gradient(#333, #000); 52 background: -o-linear-gradient(#333, #000); 53 background: -ms-linear-gradient(#333, #000); 54 width: 100%; 55 z-index:1; 56} 57body{ 58 background-color: #f5820b; 59} 60
monacaのログ（ゲージが何%か）
###補足情報
monacaにインストールされたJS/CSSコンポーネンツ
- Cordova(PhoneGap)loader ver=1.0.0
- Monaca Core Utility ver=2.0.4
- jQuery(Monaca Version) ver=2.0.3
monacaに組み込まれているプラグイン
-Custom Config ver=2.0.3
-Device Motion ver=1.2.1
-Nifty ver=2.0.2
-Splashscreen ver3.2.2
-Whitelist ver=1.2.2
回答2件
0
ベストアンサー
monacaの環境が無いのでマウスで。
JavaScript
1var flag = false 2 , start_time = new Date().getTime() 3 , max = 200 // 最大幅(px)。 $( '#bar' ).width() でもいい。 4 , times = 2000 // 振り終わるまでのミリ秒 5 , limit = 500 // 経過時間のリミット 6 ; 7 8window.addEventListener( 'mousemove', function( e ) { 9 10 if ( flag == false ) { //最初なら振り始めの時刻を取得 11 start_time = new Date().getTime(); 12 flag = true; //開始時刻を取得したらtrueにする 13 } 14 var x = e.clientX; // X方向の加速度を取得 15 var y = e.clientY; // y方向の加速度を取得 16 var z = e.clientY; // z方向の加速度を取得 17 var current_time = new Date().getTime(); 18 var elapsed_time = current_time - start_time; //経過時間 19 20 start_time = current_time; 21 22 if ( limit < elapsed_time ) { return; } // 経過時間があまりに経っていると「振り続ける」にならないので。 23 24 if ( ( Math.abs( x ) + Math.abs( y ) + Math.abs( z ) ) > 40 ) { 25 navigator.vibrate( 100 ); //100ミリ秒バイブレーションさせる 26 var $bar_width = $( '#bar_over' ); 27 var hogeWidth = $bar_width.width(); 28 29 hogeWidth = hogeWidth + ( max / times * elapsed_time ); // max（幅px）／times（ミリ秒）／elapsed_time（ミリ秒） 30 31 if ( hogeWidth > max ) { //hogewidth（緑色のバーの％）が１００（％）をこえたら、そこで100に固定する。これでゲージの飛び出しを抑える 32 hogeWidth = max; 33 console.log("Wake up,Worlds!"); 34 } 35 36 $bar_width.css( 'width', hogeWidth + 'px' ); //緑色のバーを伸ばす 37 38 } 39}, true ); 40```[https://jsfiddle.net/w6h3o7qb/](https://jsfiddle.net/w6h3o7qb/)
投稿2016/09/21 16:01
総合スコア69407
0
試してないですが、コードを見た感じでは、
この部分、
.css('width', (hogeWidth + (elapsed_time / 10000 )) + '%');
elapsed_time が経過している時間なのだから、hogeWidth に加算しなくてもよいのでは？
.css('width', (elapsed_time / 10000 ) + '%');
だと、どうなりますか？
投稿2016/09/20 07:11
総合スコア866
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/22 10:08