김유현 / How much are you earning now

Go to a project
Toggle navigation Toggle navigation pinning
김유현
2787fe1b 1 parent 1868d85c

Modify graph

Inline Side-by-side
Showing 2 changed files with 67 additions and 14 deletions
...@@ -20,7 +20,7 @@ app.get('/graph', function(req, res){ ...@@ -20,7 +20,7 @@ app.get('/graph', function(req, res){
20 var workDay = req.query.workDay 20 var workDay = req.query.workDay
21 var workTime = req.query.workTime 21 var workTime = req.query.workTime
22 var offWork = req.query.offWork 22 var offWork = req.query.offWork
23 - console.log(payDay, salary,workDay,workTime, offWork); 23 + //console.log(payDay, salary,workDay,workTime, offWork);
24 res.sendFile(__dirname + '/public/graph.html'); 24 res.sendFile(__dirname + '/public/graph.html');
25 //res.send(`payDay : ${payDay}, salary : ${salary}, workDay : ${workDay}, workTime : ${workTime}, offWork : ${offWork}`); 25 //res.send(`payDay : ${payDay}, salary : ${salary}, workDay : ${workDay}, workTime : ${workTime}, offWork : ${offWork}`);
26 }) 26 })
......
1 <html> 1 <html>
2 + <head>
3 + <meta charset="utf-8">
4 + </head>
2 <body> 5 <body>
3 <link rel="stylesheet" href="css/graph_style.css"> 6 <link rel="stylesheet" href="css/graph_style.css">
4 - <div id = "dpTime"></div> 7 + <div style = "padding: 20px" class="out">
8 + <div id = "dpTime" class="in"></div>
9 + <br>
10 + <div id = "salary" class="in"></div>
11 + <br>
12 + <div id = "moneyPerSec" class="in"></div>
13 + </div>
5 <div class="progress-bar"></div> 14 <div class="progress-bar"></div>
6 <h1 class="count"></h1> 15 <h1 class="count"></h1>
7 </body> 16 </body>
8 - <script> 17 + <script charset="utf-8">
9 - var body = document.querySelector('body'), 18 + function getParam(sname) {
10 - bar = document.querySelector('.progress-bar'), 19 + var params = location.search.substr(location.search.indexOf("?") + 1);
11 - counter = document.querySelector('.count'), 20 + var sval = "";
12 - i = 0, 21 + params = params.split("&");
13 - throttle = 0.4; // 0-1 22 + for (var i = 0; i < params.length; i++) {
23 + temp = params[i].split("=");
24 + if ([temp[0]] == sname) { sval = temp[1]; }
25 + }
26 + return sval;
27 + }
14 28
29 + //document.getElementById("payDay").innerHTML = "pay day : " + getParam("payDay");
30 + var salary = Number(getParam("salary"));
31 + var workTime = Number(getParam("workTime"));
32 + var offWork = Number(getParam("offWork"));
33 + var workingDayNum = getParam("workDay").length / 9;
34 + document.getElementById("salary").innerHTML = "salary : " + salary;
35 + //document.getElementById("workDay").innerHTML = "working day : " + getParam("workDay");
36 + //document.getElementById("workTime").innerHTML = "working time : " + workTime;
37 + //document.getElementById("offWork").innerHTML = "time of work : " + offWork;
38 + //document.getElementById("workedHour").innerHTML = "worked hour : " + String(offWork - workTime);
39 +
40 +
41 + var moneyPerSec = 0;
15 setInterval("dpTime()",1); 42 setInterval("dpTime()",1);
16 function dpTime(){ 43 function dpTime(){
17 var now = new Date(); 44 var now = new Date();
...@@ -31,19 +58,45 @@ ...@@ -31,19 +58,45 @@
31 } if (seconds < 10){ 58 } if (seconds < 10){
32 seconds = "0" + seconds; 59 seconds = "0" + seconds;
33 } 60 }
34 - document.getElementById("dpTime").innerHTML = ampm + hours + ":" + minutes + ":" + seconds; } 61 + document.getElementById("dpTime").innerHTML = "현재 시간 : "+ ampm + hours + ":" + minutes + ":" + seconds;
62 + if (hours < workTime){
63 + document.getElementById("moneyPerSec").innerHTML = "출근할 때 까지 " + String(workTime -hours) + "시간 남았당";
64 + }
65 + else{
66 + moneyPerSec += salary/(60*60*(offWork - workTime)*workingDayNum*30);
67 + document.getElementById("moneyPerSec").innerHTML = moneyPerSec.toFixed(3) + "원 버는중..";
68 + }
69 + }
35 70
71 +
72 + //document.getElementById("workedHour").innerHTML = "Hours worked : " + parseInt(Number(getParam("offWork")))-parseInt(Number(getParam("workTime")));
73 +
74 + //document.getElementById("workTime").innerHTML = "working time : " + escape(getParam("workTime"));
75 + //document.getElementById("offWork").innerHTML = "time of work : " + getParam("offWork");
76 +
77 + var body = document.querySelector('body'),
78 + bar = document.querySelector('.progress-bar'),
79 + counter = document.querySelector('.count'),
80 + i = 0,
81 + throttle = 0.4; // 0-1
36 (function draw() { 82 (function draw() {
37 if(i <= 100) { 83 if(i <= 100) {
38 - var r = Math.random(); 84 + //var r = Math.random();
39 85
40 requestAnimationFrame(draw); 86 requestAnimationFrame(draw);
41 - bar.style.width = i + '%'; 87 + if(hours < workTime){
42 - counter.innerHTML = Math.round(i) + '%'; 88 + bar.style.width = 0 + '%';
89 + counter.innerHTML = '출근 안했당';
43 90
44 - if(r < throttle) { // Simulate d/l speed and uneven bitrate
45 - i = i + r;
46 } 91 }
92 + else{
93 + bar.style.width = i + '%';
94 + counter.innerHTML = i.toFixed(4) + '%';
95 + i = moneyPerSec / salary * 100
96 + }
97 + //if(r < throttle) { // Simulate d/l speed and uneven bitrate
98 + // i = i + r;
99 + //}
47 } else {; 100 } else {;
48 bar.className += " done"; 101 bar.className += " done";
49 } 102 }
......