2018-01-31 喫煙管理アプリ完成 Qbey Follow 2018-02-15 09:27:31 License: MIT License Fork0 Fav0 View245 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 421 lines HTML 204 lines CSS 11 lines 2018-01-31 喫煙管理アプリ完成 ///////////////////////////////////// // 初期設定 ///////////////////////////////////// var keikoku = new Audio("http://jsrun.it/assets/i/M/h/Z/iMhZH.mp3"); keikoku.load(); var ready = new Audio("http://jsrun.it/assets/A/5/i/4/A5i4t.mp3"); ready.load(); var end = new Audio("http://jsrun.it/assets/4/R/m/d/4RmdN.mp3"); end.load(); var flg = 0; var daycount; var day; var monthcount = 0; var month; var monthmoney; var oldmonthmoney; var intervalId; function adustTextarea(){ var textarea = document.getElementById("log"); if( textarea.scrollHeight > textarea.offsetHeight ){ textarea.style.height = textarea.scrollHeight+'px'; } } ///////////////////////////////////// // konashi ///////////////////////////////////// $("#connect").tap(function(){ k.find(); }); $("#disconnect").tap(function(){ k.disconnect(); }); k.ready(function(){ // 電波強度取得リクエスト k.signalStrengthReadRequest(); // konashiと接続したら電池の残量を取得する k.batteryLevelReadRequest(); k.isConnected(function(data){ if( false === data ){ $("#isconnected").html("接続なし"); }else{ $("#isconnected").html("接続あり"); } }); var value; var now = new Date(); var m = now.getMonth() + 1; var d = now.getDate(); showMeter(); if(m == 1){ monthcount = localStorage.getItem('Januarycountlog'); }else if(m == 2){ monthcount = localStorage.getItem('Februarycountlog'); }else if(m == 3){ monthcount = localStorage.getItem('Marchcountlog'); }else if(m == 4){ monthcount = localStorage.getItem('Aprilcountlog'); }else if(m == 5){ monthcount = localStorage.getItem('Maycountlog'); }else if(m == 6){ monthcount = localStorage.getItem('Junecountlog'); }else if(m == 7){ monthcount = localStorage.getItem('Julycountlog'); }else if(m == 8){ monthcount = localStorage.getItem('Augustcountlog'); }else if(m == 9){ monthcount = localStorage.getItem('Septembercountlog'); }else if(m == 10){ monthcount = localStorage.getItem('Octobercountlog'); }else if(m == 11){ monthcount = localStorage.getItem('Novembercountlog'); }else{ monthcount = localStorage.getItem('Decembercountlog'); } smokeglf(); month = localStorage.getItem('monthlog'); day = localStorage.getItem('daylog'); if(d == day){ value = localStorage.getItem('log'); $("#log").text(value); daycount = localStorage.getItem('daycountlog'); $("#aionum").html(daycount); }else{ localStorage.removeItem('log'); $("#log").text(value); localStorage.removeItem('daycountlog'); daycount = 0; $("#aionum").html(daycount); } k.pinMode(k.PIO1, k.OUTPUT); //Interval intervalId = window.setInterval(function(){ k.analogReadRequest(k.AIO0); }, 200); }); k.on(k.KONASHI_EVENT_CONNECTED, function(){ ready.play(); showConnecting(); }); k.disconnected(function(data){ $("#battery").html('?'); $("#signal").html('?'); $("#id_daycount").html('?'); $("#id_monthcount").html('?'); $("#id_monthmoney").html('?'); $("#id_oldmonthmoney").html('?'); $("#aionum").html('?'); $("#aionum2").html('?'); $("#isconnected").html("接続なし"); end.play(); window.clearInterval(intervalId); showFirst(); }); $("#konashi_ti").tap(function(){ // 電波強度取得リクエスト k.signalStrengthReadRequest(); // konashiと接続したら電池の残量を取得する k.batteryLevelReadRequest(); k.isConnected(function(data){ if( false === data ){ $("#isconnected").html("接続なし"); }else{ $("#isconnected").html("接続あり"); } }); }); k.isConnected(function(data){ if( false === data ){ $("#isconnected").html("接続なし"); }else{ $("#isconnected").html("接続あり"); } }); k.updateBatteryLevel(function(data){ // 電池残量読み込み完了したら実行される k.batteryLevelRead(function(data){ $("#battery").html(data); }); }); k.updateSignalStrength(function(data){ // 電波強度取得完了したら実行される k.signalStrengthRead(function(data){ $("#signal").html(data); }); }); ///////////////////////////////////// // 喫煙グラフ ///////////////////////////////////// function smokeglf(){ $("#num1").html(localStorage.getItem('Januarycountlog')); $("#num2").html(localStorage.getItem('Februarycountlog')); $("#num3").html(localStorage.getItem('Marchcountlog')); $("#num4").html(localStorage.getItem('Aprilcountlog')); $("#num5").html(localStorage.getItem('Maycountlog')); $("#num6").html(localStorage.getItem('Junecountlog')); $("#num7").html(localStorage.getItem('Julycountlog')); $("#num8").html(localStorage.getItem('Augustcountlog')); $("#num9").html(localStorage.getItem('Septembercountlog')); $("#num10").html(localStorage.getItem('Octobercountlog')); $("#num11").html(localStorage.getItem('Novembercountlog')); $("#num12").html(localStorage.getItem('Decembercountlog')); var d = document; var getID= function(e) { return d.getElementById(e);}; var getTag= function(p, t) { return p.getElementsByTagName(t); }; var randomNum= function(Min,Max){return Math.floor(Math.random()*(Max+1-Min))+Min;}; var cW= 140, cH= 240; var fontSize= 14, fontFamily= "Museo, Arial, Helvetica, Meiryo, sans-serif"; var tColor= "#000"; //文字色 var bSaturation= "50%", bLightness= "50%"; /*棒の彩度と明度*/ var t= getID("target"); //対象となる表を取得 var tb= t.tBodies[0]; //表のtbody(※tbody のマークアップの有無に関わらず必須っぽい) var canvas = d.createElement("canvas"); canvas.width= cW; canvas.height= cH; /*設定値からcanvasの寸法を指定(HTML側でもやってもいい)*/ var ctx= canvas.getContext("2d");//context取得 ctx.strokeRect(0, 0, cW, cH);//strokeColor未指定時の初期カラーである黒でボーダーを描画 ctx.font= fontSize + "px " + fontFamily;//設定値からフォントを指定 for (i=0; i<12; i++) { var h= tb.rows[i].cells[0].innerHTML; var v= tb.rows[i].cells[1].innerHTML; ctx.fillStyle = "#000"; ctx.fillText(h, (fontSize), (fontSize+2) * i + 20); ctx.fillStyle = "hsl(" + i * 40 % 360 + "," + bSaturation + "," + bLightness + ")"; /*3*/ ctx.fillRect(8 + (fontSize+1) * 2.5, 10 + (i * (fontSize+2) + 1), v, fontSize-4); } var btn = document.getElementById('remove'); $("#result").empty(); //前のグラフを消すつまり再描画っぽい getID("result").appendChild(canvas); //出力 } ///////////////////////////////////// // 統計 ///////////////////////////////////// $("#statistics_ti").tap(function(){ var now = new Date(); var m = now.getMonth() + 1; monthmoney = monthcount * 21; if(m == 1){ monthcount = localStorage.getItem('Januarycountlog'); }else if(m == 2){ monthcount = localStorage.getItem('Februarycountlog'); oldmonthmoney = localStorage.getItem('Januarycountlog') * 21; }else if(m == 3){ monthcount = localStorage.getItem('Marchcountlog'); oldmonthmoney = localStorage.getItem('Februarycountlog') * 21; }else if(m == 4){ monthcount = localStorage.getItem('Aprilcountlog'); oldmonthmoney = localStorage.getItem('Marchcountlog') * 21; }else if(m == 5){ monthcount = localStorage.getItem('Maycountlog'); oldmonthmoney = localStorage.getItem('Aprilcountlog') * 21; }else if(m == 6){ monthcount = localStorage.getItem('Junecountlog'); oldmonthmoney = localStorage.getItem('Maycountlog') * 21; }else if(m == 7){ monthcount = localStorage.getItem('Julycountlog'); oldmonthmoney = localStorage.getItem('Junecountlog') * 21; }else if(m == 8){ monthcount = localStorage.getItem('Augustcountlog'); oldmonthmoney = localStorage.getItem('Julycountlog') * 21; }else if(m == 9){ monthcount = localStorage.getItem('Septembercountlog'); oldmonthmoney = localStorage.getItem('Augustcountlog') * 21; }else if(m == 10){ monthcount = localStorage.getItem('Octobercountlog'); oldmonthmoney = localStorage.getItem('Septembercountlog') * 21; }else if(m == 11){ monthcount = localStorage.getItem('Novembercountlog'); oldmonthmoney = localStorage.getItem('Octobercountlog') * 21; }else{ monthcount = localStorage.getItem('Decembercountlog'); oldmonthmoney = localStorage.getItem('Novembercountlog') * 21; } $("#id_daycount").html(daycount); $("#id_monthcount").html(monthcount); $("#id_monthmoney").html(monthmoney); $("#id_oldmonthmoney").html(oldmonthmoney); }); ///////////////////////////////////// // タバコカウンタ ///////////////////////////////////// function showMeter(){ $("#content").animate( {left: "-200%"}, {duration: 500, easing: "ease-in-out"} ); } function changeMeter(value){ $("#meter").animate( {height: ((value-900)/440)*100 + "%"}, {duration: 500, easing: "ease-in-out"} ); $("#aionum2").html(value); } k.updateAnalogValueAio0(function(data){ // AIO0のアナログ値が取得できたら実行されます var now = new Date(); var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); var w = now.getDay(); var wd = ['日', '月', '火', '水', '木', '金', '土']; var h = now.getHours(); var mi = now.getMinutes(); var s = now.getSeconds(); var text = $("#log"); changeMeter(data); if(data<200){ k.digitalWrite(k.PIO1, k.HIGH); if(flg <= 0){ monthcount++; daycount++; $("#aionum").html(daycount); $("#log").html($("#log").html()+y +'年'+m+'月'+d+'日'+h+'時'+mi+'分'+s+'秒'+'('+wd[w]+')'+(daycount)+'本'+' \n'+""); localStorage.setItem('daycountlog',daycount); if(m == 1){ localStorage.setItem('Januarycountlog',monthcount); }else if(m == 2){ localStorage.setItem('Februarycountlog',monthcount); }else if(m == 3){ localStorage.setItem('Marchcountlog',monthcount); }else if(m == 4){ localStorage.setItem('Aprilcountlog',monthcount); }else if(m == 5){ localStorage.setItem('Maycountlog',monthcount); }else if(m == 6){ localStorage.setItem('Junecountlog',monthcount); }else if(m == 7){ localStorage.setItem('Julycountlog',monthcount); }else if(m == 8){ localStorage.setItem('Augustcountlog',monthcount); }else if(m == 9){ localStorage.setItem('Septembercountlog',monthcount); }else if(m == 10){ localStorage.setItem('Octobercountlog',monthcount); }else if(m == 11){ localStorage.setItem('Novembercountlog',monthcount); }else{ localStorage.setItem('Decembercountlog',monthcount); } localStorage.setItem('daylog',d); localStorage.setItem('monthlog',m); localStorage.setItem('log', text.val()); smokeglf(); adustTextarea(); if((daycount%10) === 0 ){ keikoku.play(); } } flg = 1; }else{ k.digitalWrite(k.PIO1, k.LOW); flg = 0; } }); $("#reset").tap(function(){ var now = new Date(); var m = now.getMonth() + 1; localStorage.clear(); $("#log").text(''); daycount = 0; monthcount[m] = 0; $("#aionum").html(daycount); }); $("#chattering").tap(function(){ //daycount $("#aionum").html(daycount); }); <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>タバコ喫煙管理アプリ</title> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/touch.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/fx.js"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <style type="text/css" media="screen"> .musicList {margin: 10px 10px;} </style> </head> <body id="lyricsalbum"> <!-- TOP PAGE --> <div id="topPage" data-role="page"> <div data-role="header" data-theme="b"> <h1>タバコ喫煙管理</h1> </div> <div data-role="content"> <ul id = "konashi_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#konashi">konashi</a></li> </ul> <ul id = "grf_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#grf">喫煙グラフ</a></li> </ul> <ul id = "statistics_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#statistics">統計</a></li> </ul> <ul id = "counter_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#counter">タバコカウンタ</a></li> </ul> </div> </div> <div id="konashi" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>konashi</h1> </div> <input type="button" id="connect" value="connect"/> <input type="button" id="disconnect" value="disconnect"/> <div> <span>Battery Level:</span> <span id="battery">?</span> <span>%</span> </div> <div> <span>Signal Strength:</span> <span id="signal">?</span> <span>db</span> </div> <div> <span>konashi接続状況:</span> <span id="isconnected"></span> </div> </div> <div id="grf" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>喫煙グラフ</h1> </div> <table id="target"> <tbody> <tr> <th>1月</th> <td id = "num1"></td> </tr> <tr> <th>2月</th> <td id = "num2"></td> </tr> <tr> <th>3月</th> <td id = "num3"></td> </tr> <tr> <th>4月</th> <td id = "num4"></td> </tr> <tr> <th>5月</th> <td id = "num5"></td> </tr> <tr> <th>6月</th> <td id = "num6"></td> </tr> <tr> <th>7月</th> <td id = "num7"></td> </tr> <tr> <th>8月</th> <td id = "num8"></td> </tr> <tr> <th>9月</th> <td id = "num9"></td> </tr> <tr> <th>10月</th> <td id = "num10"></td> </tr> <tr> <th>11月</th> <td id = "num11"></td> </tr> <tr> <th>12月</th> <td id = "num12" ></td> </tr> </tbody> </table> <span id="result"></span> </div> <div id="statistics" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>統計</h1> </div> <div> <span>今日の喫煙本数:</span> <span id="id_daycount">?</span> <span>本</span> </div> <div> <span>今月の喫煙本数:</span> <span id="id_monthcount">?</span> <span>本</span> </div> <div> <span>今月のタバコ代:</span> <span id="id_monthmoney">?</span> <span>円</span> </div> <div> <span>先月のタバコ代:</span> <span id="id_oldmonthmoney">?</span> <span>円</span> </div> </div> <!-- counter --> <div id="counter" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>タバコカウンタ</h1> </div> <div id="value"> <span id="aionum">?</span> <span>本</span> </div> <div id="title"> <span id="title_icon"></span> <span id="aionum2">?</span> <span>mV</span> </div> <textarea style="position: absolute; top: 40%; left: 0%" id = "log" class="body" readonly ></textarea> <!--<input type="button" id="chattering" value ="chattering"/>--> <input type="button" id="reset" value ="reset"/> </div> </body> </html> 2018-01-31 喫煙管理アプリ完成 body {font-size:16px; margin:0; } table, canvas { margin: 2px 2px 1em; vertical-align: top; } table { border-collapse: collapse; border-spacing:0; table-layout: inline-table; } th,td{ border:1px solid; padding: 3px 9px; text-align: right; } th { background: #eee; font-weight: 100; } #target { float: left; }*/ #target:after { content:""; display:block; clear: both; zoom:1; }*/ ///////////////////////////////////// // 初期設定 ///////////////////////////////////// var keikoku = new Audio("http://jsrun.it/assets/i/M/h/Z/iMhZH.mp3"); keikoku.load(); var ready = new Audio("http://jsrun.it/assets/A/5/i/4/A5i4t.mp3"); ready.load(); var end = new Audio("http://jsrun.it/assets/4/R/m/d/4RmdN.mp3"); end.load(); var flg = 0; var daycount; var day; var monthcount = 0; var month; var monthmoney; var oldmonthmoney; var intervalId; function adustTextarea(){ var textarea = document.getElementById("log"); if( textarea.scrollHeight > textarea.offsetHeight ){ textarea.style.height = textarea.scrollHeight+'px'; } } ///////////////////////////////////// // konashi ///////////////////////////////////// $("#connect").tap(function(){ k.find(); }); $("#disconnect").tap(function(){ k.disconnect(); }); k.ready(function(){ // 電波強度取得リクエスト k.signalStrengthReadRequest(); // konashiと接続したら電池の残量を取得する k.batteryLevelReadRequest(); k.isConnected(function(data){ if( false === data ){ $("#isconnected").html("接続なし"); }else{ $("#isconnected").html("接続あり"); } }); var value; var now = new Date(); var m = now.getMonth() + 1; var d = now.getDate(); showMeter(); if(m == 1){ monthcount = localStorage.getItem('Januarycountlog'); }else if(m == 2){ monthcount = localStorage.getItem('Februarycountlog'); }else if(m == 3){ monthcount = localStorage.getItem('Marchcountlog'); }else if(m == 4){ monthcount = localStorage.getItem('Aprilcountlog'); }else if(m == 5){ monthcount = localStorage.getItem('Maycountlog'); }else if(m == 6){ monthcount = localStorage.getItem('Junecountlog'); }else if(m == 7){ monthcount = localStorage.getItem('Julycountlog'); }else if(m == 8){ monthcount = localStorage.getItem('Augustcountlog'); }else if(m == 9){ monthcount = localStorage.getItem('Septembercountlog'); }else if(m == 10){ monthcount = localStorage.getItem('Octobercountlog'); }else if(m == 11){ monthcount = localStorage.getItem('Novembercountlog'); }else{ monthcount = localStorage.getItem('Decembercountlog'); } smokeglf(); month = localStorage.getItem('monthlog'); day = localStorage.getItem('daylog'); if(d == day){ value = localStorage.getItem('log'); $("#log").text(value); daycount = localStorage.getItem('daycountlog'); $("#aionum").html(daycount); }else{ localStorage.removeItem('log'); $("#log").text(value); localStorage.removeItem('daycountlog'); daycount = 0; $("#aionum").html(daycount); } k.pinMode(k.PIO1, k.OUTPUT); //Interval intervalId = window.setInterval(function(){ k.analogReadRequest(k.AIO0); }, 200); }); k.on(k.KONASHI_EVENT_CONNECTED, function(){ ready.play(); showConnecting(); }); k.disconnected(function(data){ $("#battery").html('?'); $("#signal").html('?'); $("#id_daycount").html('?'); $("#id_monthcount").html('?'); $("#id_monthmoney").html('?'); $("#id_oldmonthmoney").html('?'); $("#aionum").html('?'); $("#aionum2").html('?'); $("#isconnected").html("接続なし"); end.play(); window.clearInterval(intervalId); showFirst(); }); $("#konashi_ti").tap(function(){ // 電波強度取得リクエスト k.signalStrengthReadRequest(); // konashiと接続したら電池の残量を取得する k.batteryLevelReadRequest(); k.isConnected(function(data){ if( false === data ){ $("#isconnected").html("接続なし"); }else{ $("#isconnected").html("接続あり"); } }); }); k.isConnected(function(data){ if( false === data ){ $("#isconnected").html("接続なし"); }else{ $("#isconnected").html("接続あり"); } }); k.updateBatteryLevel(function(data){ // 電池残量読み込み完了したら実行される k.batteryLevelRead(function(data){ $("#battery").html(data); }); }); k.updateSignalStrength(function(data){ // 電波強度取得完了したら実行される k.signalStrengthRead(function(data){ $("#signal").html(data); }); }); ///////////////////////////////////// // 喫煙グラフ ///////////////////////////////////// function smokeglf(){ $("#num1").html(localStorage.getItem('Januarycountlog')); $("#num2").html(localStorage.getItem('Februarycountlog')); $("#num3").html(localStorage.getItem('Marchcountlog')); $("#num4").html(localStorage.getItem('Aprilcountlog')); $("#num5").html(localStorage.getItem('Maycountlog')); $("#num6").html(localStorage.getItem('Junecountlog')); $("#num7").html(localStorage.getItem('Julycountlog')); $("#num8").html(localStorage.getItem('Augustcountlog')); $("#num9").html(localStorage.getItem('Septembercountlog')); $("#num10").html(localStorage.getItem('Octobercountlog')); $("#num11").html(localStorage.getItem('Novembercountlog')); $("#num12").html(localStorage.getItem('Decembercountlog')); var d = document; var getID= function(e) { return d.getElementById(e);}; var getTag= function(p, t) { return p.getElementsByTagName(t); }; var randomNum= function(Min,Max){return Math.floor(Math.random()*(Max+1-Min))+Min;}; var cW= 140, cH= 240; var fontSize= 14, fontFamily= "Museo, Arial, Helvetica, Meiryo, sans-serif"; var tColor= "#000"; //文字色 var bSaturation= "50%", bLightness= "50%"; /*棒の彩度と明度*/ var t= getID("target"); //対象となる表を取得 var tb= t.tBodies[0]; //表のtbody(※tbody のマークアップの有無に関わらず必須っぽい) var canvas = d.createElement("canvas"); canvas.width= cW; canvas.height= cH; /*設定値からcanvasの寸法を指定(HTML側でもやってもいい)*/ var ctx= canvas.getContext("2d");//context取得 ctx.strokeRect(0, 0, cW, cH);//strokeColor未指定時の初期カラーである黒でボーダーを描画 ctx.font= fontSize + "px " + fontFamily;//設定値からフォントを指定 for (i=0; i<12; i++) { var h= tb.rows[i].cells[0].innerHTML; var v= tb.rows[i].cells[1].innerHTML; ctx.fillStyle = "#000"; ctx.fillText(h, (fontSize), (fontSize+2) * i + 20); ctx.fillStyle = "hsl(" + i * 40 % 360 + "," + bSaturation + "," + bLightness + ")"; /*3*/ ctx.fillRect(8 + (fontSize+1) * 2.5, 10 + (i * (fontSize+2) + 1), v, fontSize-4); } var btn = document.getElementById('remove'); $("#result").empty(); //前のグラフを消すつまり再描画っぽい getID("result").appendChild(canvas); //出力 } ///////////////////////////////////// // 統計 ///////////////////////////////////// $("#statistics_ti").tap(function(){ var now = new Date(); var m = now.getMonth() + 1; monthmoney = monthcount * 21; if(m == 1){ monthcount = localStorage.getItem('Januarycountlog'); }else if(m == 2){ monthcount = localStorage.getItem('Februarycountlog'); oldmonthmoney = localStorage.getItem('Januarycountlog') * 21; }else if(m == 3){ monthcount = localStorage.getItem('Marchcountlog'); oldmonthmoney = localStorage.getItem('Februarycountlog') * 21; }else if(m == 4){ monthcount = localStorage.getItem('Aprilcountlog'); oldmonthmoney = localStorage.getItem('Marchcountlog') * 21; }else if(m == 5){ monthcount = localStorage.getItem('Maycountlog'); oldmonthmoney = localStorage.getItem('Aprilcountlog') * 21; }else if(m == 6){ monthcount = localStorage.getItem('Junecountlog'); oldmonthmoney = localStorage.getItem('Maycountlog') * 21; }else if(m == 7){ monthcount = localStorage.getItem('Julycountlog'); oldmonthmoney = localStorage.getItem('Junecountlog') * 21; }else if(m == 8){ monthcount = localStorage.getItem('Augustcountlog'); oldmonthmoney = localStorage.getItem('Julycountlog') * 21; }else if(m == 9){ monthcount = localStorage.getItem('Septembercountlog'); oldmonthmoney = localStorage.getItem('Augustcountlog') * 21; }else if(m == 10){ monthcount = localStorage.getItem('Octobercountlog'); oldmonthmoney = localStorage.getItem('Septembercountlog') * 21; }else if(m == 11){ monthcount = localStorage.getItem('Novembercountlog'); oldmonthmoney = localStorage.getItem('Octobercountlog') * 21; }else{ monthcount = localStorage.getItem('Decembercountlog'); oldmonthmoney = localStorage.getItem('Novembercountlog') * 21; } $("#id_daycount").html(daycount); $("#id_monthcount").html(monthcount); $("#id_monthmoney").html(monthmoney); $("#id_oldmonthmoney").html(oldmonthmoney); }); ///////////////////////////////////// // タバコカウンタ ///////////////////////////////////// function showMeter(){ $("#content").animate( {left: "-200%"}, {duration: 500, easing: "ease-in-out"} ); } function changeMeter(value){ $("#meter").animate( {height: ((value-900)/440)*100 + "%"}, {duration: 500, easing: "ease-in-out"} ); $("#aionum2").html(value); } k.updateAnalogValueAio0(function(data){ // AIO0のアナログ値が取得できたら実行されます var now = new Date(); var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); var w = now.getDay(); var wd = ['日', '月', '火', '水', '木', '金', '土']; var h = now.getHours(); var mi = now.getMinutes(); var s = now.getSeconds(); var text = $("#log"); changeMeter(data); if(data<200){ k.digitalWrite(k.PIO1, k.HIGH); if(flg <= 0){ monthcount++; daycount++; $("#aionum").html(daycount); $("#log").html($("#log").html()+y +'年'+m+'月'+d+'日'+h+'時'+mi+'分'+s+'秒'+'('+wd[w]+')'+(daycount)+'本'+' \n'+""); localStorage.setItem('daycountlog',daycount); if(m == 1){ localStorage.setItem('Januarycountlog',monthcount); }else if(m == 2){ localStorage.setItem('Februarycountlog',monthcount); }else if(m == 3){ localStorage.setItem('Marchcountlog',monthcount); }else if(m == 4){ localStorage.setItem('Aprilcountlog',monthcount); }else if(m == 5){ localStorage.setItem('Maycountlog',monthcount); }else if(m == 6){ localStorage.setItem('Junecountlog',monthcount); }else if(m == 7){ localStorage.setItem('Julycountlog',monthcount); }else if(m == 8){ localStorage.setItem('Augustcountlog',monthcount); }else if(m == 9){ localStorage.setItem('Septembercountlog',monthcount); }else if(m == 10){ localStorage.setItem('Octobercountlog',monthcount); }else if(m == 11){ localStorage.setItem('Novembercountlog',monthcount); }else{ localStorage.setItem('Decembercountlog',monthcount); } localStorage.setItem('daylog',d); localStorage.setItem('monthlog',m); localStorage.setItem('log', text.val()); smokeglf(); adustTextarea(); if((daycount%10) === 0 ){ keikoku.play(); } } flg = 1; }else{ k.digitalWrite(k.PIO1, k.LOW); flg = 0; } }); $("#reset").tap(function(){ var now = new Date(); var m = now.getMonth() + 1; localStorage.clear(); $("#log").text(''); daycount = 0; monthcount[m] = 0; $("#aionum").html(daycount); }); $("#chattering").tap(function(){ //daycount $("#aionum").html(daycount); }); <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>タバコ喫煙管理アプリ</title> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/touch.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/fx.js"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <style type="text/css" media="screen"> .musicList {margin: 10px 10px;} </style> </head> <body id="lyricsalbum"> <!-- TOP PAGE --> <div id="topPage" data-role="page"> <div data-role="header" data-theme="b"> <h1>タバコ喫煙管理</h1> </div> <div data-role="content"> <ul id = "konashi_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#konashi">konashi</a></li> </ul> <ul id = "grf_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#grf">喫煙グラフ</a></li> </ul> <ul id = "statistics_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#statistics">統計</a></li> </ul> <ul id = "counter_ti" data-role="listview" data-inset="true" data-theme="d"> <li><a href="#counter">タバコカウンタ</a></li> </ul> </div> </div> <div id="konashi" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>konashi</h1> </div> <input type="button" id="connect" value="connect"/> <input type="button" id="disconnect" value="disconnect"/> <div> <span>Battery Level:</span> <span id="battery">?</span> <span>%</span> </div> <div> <span>Signal Strength:</span> <span id="signal">?</span> <span>db</span> </div> <div> <span>konashi接続状況:</span> <span id="isconnected"></span> </div> </div> <div id="grf" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>喫煙グラフ</h1> </div> <table id="target"> <tbody> <tr> <th>1月</th> <td id = "num1"></td> </tr> <tr> <th>2月</th> <td id = "num2"></td> </tr> <tr> <th>3月</th> <td id = "num3"></td> </tr> <tr> <th>4月</th> <td id = "num4"></td> </tr> <tr> <th>5月</th> <td id = "num5"></td> </tr> <tr> <th>6月</th> <td id = "num6"></td> </tr> <tr> <th>7月</th> <td id = "num7"></td> </tr> <tr> <th>8月</th> <td id = "num8"></td> </tr> <tr> <th>9月</th> <td id = "num9"></td> </tr> <tr> <th>10月</th> <td id = "num10"></td> </tr> <tr> <th>11月</th> <td id = "num11"></td> </tr> <tr> <th>12月</th> <td id = "num12" ></td> </tr> </tbody> </table> <span id="result"></span> </div> <div id="statistics" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>統計</h1> </div> <div> <span>今日の喫煙本数:</span> <span id="id_daycount">?</span> <span>本</span> </div> <div> <span>今月の喫煙本数:</span> <span id="id_monthcount">?</span> <span>本</span> </div> <div> <span>今月のタバコ代:</span> <span id="id_monthmoney">?</span> <span>円</span> </div> <div> <span>先月のタバコ代:</span> <span id="id_oldmonthmoney">?</span> <span>円</span> </div> </div> <!-- counter --> <div id="counter" data-role="page"> <div data-role="header" data-theme="b" data-position="inline"> <a href="#topPage" data-transition="pop">Back</a> <h1>タバコカウンタ</h1> </div> <div id="value"> <span id="aionum">?</span> <span>本</span> </div> <div id="title"> <span id="title_icon"></span> <span id="aionum2">?</span> <span>mV</span> </div> <textarea style="position: absolute; top: 40%; left: 0%" id = "log" class="body" readonly ></textarea> <!--<input type="button" id="chattering" value ="chattering"/>--> <input type="button" id="reset" value ="reset"/> </div> </body> </html> body {font-size:16px; margin:0; } table, canvas { margin: 2px 2px 1em; vertical-align: top; } table { border-collapse: collapse; border-spacing:0; table-layout: inline-table; } th,td{ border:1px solid; padding: 3px 9px; text-align: right; } th { background: #eee; font-weight: 100; } #target { float: left; }*/ #target:after { content:""; display:block; clear: both; zoom:1; }*/ use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Qbey Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/cIiF/js"></script> smartphones&tablets Discussion Questions on this code? Tags smartphones&tablets