graph.html 3.56 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 = "salary" class="in"></div>
    <br>
      <div id = "moneyPerSec" class="in"></div>
    </div>
    <div class="progress-bar"></div>
    <h1 class="count"></h1>
  </body>
  <script charset="utf-8">
    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;
      }

    //document.getElementById("payDay").innerHTML = "pay day : " + getParam("payDay");
    var salary = Number(getParam("salary"));
    var workTime = Number(getParam("workTime"));
    var offWork =  Number(getParam("offWork"));
    var workingDayNum = getParam("workDay").length / 9;
    document.getElementById("salary").innerHTML = "salary : " + salary;
    //document.getElementById("workDay").innerHTML = "working day : " + getParam("workDay");
    //document.getElementById("workTime").innerHTML = "working time : " + workTime;
    //document.getElementById("offWork").innerHTML = "time of work : " + offWork;
    //document.getElementById("workedHour").innerHTML = "worked hour : " + String(offWork - workTime);


    var moneyPerSec = 0;
    setInterval("dpTime()",1);
    function dpTime(){
      var now = new Date();
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
      if (hours > 12)
      { hours -= 12;
        ampm = "오후 ";
      }else
      { ampm = "오전 ";
      }
      if (hours < 10){
        hours = "0" + hours;
      } if (minutes < 10){
        minutes = "0" + minutes;
      } if (seconds < 10){
        seconds = "0" + seconds;
      }
      document.getElementById("dpTime").innerHTML = "현재 시간 : "+ ampm + hours + ":" + minutes + ":" + seconds;
      if (hours < workTime){
        document.getElementById("moneyPerSec").innerHTML = "출근할 때 까지 " + String(workTime -hours) + "시간 남았당";
      }
      else{
      moneyPerSec +=  salary/(60*60*(offWork - workTime)*workingDayNum*30);
      document.getElementById("moneyPerSec").innerHTML = moneyPerSec.toFixed(3) + "원 버는중..";
      }
      }


    //document.getElementById("workedHour").innerHTML = "Hours worked : " + parseInt(Number(getParam("offWork")))-parseInt(Number(getParam("workTime")));

    //document.getElementById("workTime").innerHTML = "working time : " + escape(getParam("workTime"));
    //document.getElementById("offWork").innerHTML = "time of work : " + getParam("offWork");

    var body = document.querySelector('body'),
        bar = document.querySelector('.progress-bar'),
        counter = document.querySelector('.count'),
        i = 0,
        throttle = 0.4; // 0-1
    (function draw() {
      if(i <= 100) {
        //var r = Math.random();

        requestAnimationFrame(draw);
        if(hours < workTime){
          bar.style.width = 0 + '%';
          counter.innerHTML = '출근 안했당';

        }
        else{
        bar.style.width = i + '%';
        counter.innerHTML = i.toFixed(4) + '%';
        i = moneyPerSec / salary * 100
        }
        //if(r < throttle) { // Simulate d/l speed and uneven bitrate
        //  i = i + r;
        //}
      } else {;
        bar.className += " done";
      }
    })();
  </script>
</html>