2018-01-31 喫煙管理アプリ完成

Qbey

2018-02-15 09:27:31

License: MIT License

Fork: 0

Fav: 0

View: 104

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'));

/////////////////////////////////////
// 統計
/////////////////////////////////////

$("#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>
         
        
         
        <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>
       
        
        
        <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">
        
        
        <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>      
     
      
        
        
        <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="reset" value ="reset"/>

</div>

</body>
</html>

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>  <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>  <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">  <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>  <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="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; }*/

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

Qbey

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/cIiF/js"></script>

QR Code

Discussion

Questions on this code?

2018-01-31 喫煙管理アプリ完成

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags