graph.html 5.86 KB
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <link rel="stylesheet" href="css/graph_style.css">
    <div style= "padding : 20px;"class="out">
    <div id = "dpTime" class="in"></div>
    <br>
      <div id = "payPerDay" class="in"></div>
    <br>
      <div style="font-weight: bold; font-size: large;" id = "moneyPerSec" class="in"></div>
    <br>
      <div id = "workDay" class="in"></div>

    </div>
    <div class="progress-bar"></div>
    <h1 class="count"></h1>
  </body>
  <script charset="utf-8">
    //url에서 변수 받아오는 함수
    function getParam(sname) {
          var params = location.search.substr(location.search.indexOf("?") + 1);
          var sval = "";
          params = params.split("&");
          for (var i = 0; i < params.length; i++) {
              temp = params[i].split("=");
              if ([temp[0]] == sname) { sval = temp[1]; }
          }
          return sval;
      }

    //strig format 함수 (e.g. "{0}")
    String.format = function() {
    // The string containing the format items (e.g. "{0}")
    // will and always has to be the first argument.
    var theString = arguments[0];

    // start with the second argument (i = 1)
    for (var i = 1; i < arguments.length; i++) {
    // "gm" = RegEx options for Global search (more than one instance)
    // and for Multiline search
    var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
    theString = theString.replace(regEx, arguments[i]);
    }

    return theString;
    }

    //출근날 체크 함수
    function isTodayWork(workDay, workDayStr){

      var Mon = "%EC%9B%94";
      var Tue = "%ED%99%94";
      var Wed = "%EC%88%98";
      var Thu = "%EB%AA%A9";
      var Fri = "%EA%B8%88";
      var Sat = "%ED%86%A0";
      var Sun = "%EC%9D%BC%0A";

      if (workDay == 0){
        if (workDayStr.indexOf(Sun) != -1){
          return true;}
        else {
          return false;
      }
    }
      else if (workDay == 1){
        if (workDayStr.indexOf(Mon) != -1){
          return true;}
        else {
          return false;

      }
    }
      else if (workDay == 2){
        if (workDayStr.indexOf(Thu) != -1){
          return true;}
        else {
          return false;

      }
    }
      else if (workDay == 3){
        if (workDayStr.indexOf(Wed) != -1){
          return true;}
        else {
          return false;

        }
      }
      else if (workDay == 4){
        if (workDayStr.indexOf(Thu) != -1){
          return true;}
        else {
          return false;
        }
      }
      else if (workDay == 5){
        if (workDayStr.indexOf(Fri) != -1){
          return true;}
        else {
          return false;
        }
      }
      else if (workDay == 6){
        if (workDayStr.indexOf(Sat) != -1){
          return true;}
        else {
          return false;
        }
      }
    }

    //변수 정의
    var salary = Number(getParam("salary"));
    var workTime = Number(getParam("workTime"));
    var offWork =  Number(getParam("offWork"));
    var workingDay = getParam("workDay");
    var workingDayNum = getParam("workDay").length / 9;
    var payPerDay =  salary/(4*workingDayNum);

    // moneyPerSec 초기값 계산
    var nowTime = new Date();
    var strWorkTime = workTime
    if (strWorkTime < 10){
      strWorkTime = "0" + strWorkTime;
    }
    var dayStr = String.format("{0}-{1}-{2}T{3}:00:00",nowTime.getFullYear(), nowTime.getMonth()+1, nowTime.getDate(), strWorkTime);
    var workStart = new Date(dayStr);
    var diff = (nowTime.getTime() - workStart.getTime());
    var moneyPerSec = diff*(payPerDay/(1000*60*60*(offWork - workTime)));


    //일정 시간동안 반복 호출 함수
    setInterval("dpTime()",1);
    function dpTime(){
      var now = new Date();
      day = now.getDay();
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
      if (hours < 10){
        hours = "0" + hours;
      } if (minutes < 10){
        minutes = "0" + minutes;
      } if (seconds < 10){
        seconds = "0" + seconds;
      }
      document.getElementById("dpTime").innerHTML = "The current time is "+ hours + ":" + minutes + ":" + seconds;

      if(isTodayWork(day, workingDay)){
        document.getElementById("payPerDay").innerHTML = "The daily wage is " + payPerDay + "won";

      if (hours < workTime){
        var diff2 = (workStart.getTime() - now.getTime());
        var hour2 = (diff2/(1000*60*60))%24 - ((diff2/(1000*60*60))%24)%1;
        var min2 = (diff2/(1000*60))%60 - ((diff2/(1000*60))%60)%1;
        var sec2 = (diff2/1000)%60;

        document.getElementById("moneyPerSec").innerHTML = "출근할 때까지 "+ String(hour2) + "시간" + String(min2) + "분" + String(sec2.toFixed(2)) + "초 남았당";
      }
      else{
      moneyPerSec +=  payPerDay/(1000*60*60*(offWork - workTime));
      document.getElementById("moneyPerSec").innerHTML = + moneyPerSec.toFixed(3) + "won earging today !!";
      }
      }

}

    var body = document.querySelector('body'),
        bar = document.querySelector('.progress-bar'),
        counter = document.querySelector('.count'),
        i = 0,
        throttle = 0.4; // 0-1
    (function draw() {
      var now = new Date();
      day = now.getDay();

      if(i <= 100) {
        requestAnimationFrame(draw);
        if(isTodayWork(day, workingDay) != true){
          bar.style.width = 0 + '%';
          counter.innerHTML = '오늘 쉬는날';
        }
      else {
        if(hours < workTime){
          bar.style.width = 0 + '%';
          counter.innerHTML = '출근 안했당';

        }
        else{
          i = (moneyPerSec / payPerDay) * 100;

        bar.style.width = i.toFixed(4) + '%';
        counter.innerHTML = i.toFixed(4) + '%';
        }
        //if(r < throttle) { // Simulate d/l speed and uneven bitrate
        //  i = i + r;
        //}
      }

      } else {;
        bar.className += " done";
      }
    })();
  </script>
</html>