編集履歴

質問編集履歴

コード、文章など

2019/11/21 23:39

投稿

yoshi.R

スコア13

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,14 +1,404 @@
-javaScript 　### 加算していく
+javaScript 　### 数値を加算していく
-forで動的に作ったIDを順番に取得して　値（set_num）は数値ですのでそれを加算していきたい。
-一度　一つの配列にいれていって、最後に合計を出すなど。
+見にくいコードですみません。
+練習でjavaScriptやってます。
+javaScriptのコード最後のwindow.onload時に、
+forで動的に作ったID（１１０行目あたり）のついた値（localStrageに保存した値（値は（set_num）数値）を取得して、それを月毎合計値を最終的には　表示したいです。
-方法は現状が良いのか他にあれば　指摘ください。
+日にちに保存した数値の合計方法がわかりません。
+よろしくお願いします。
+```HTML
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+　　<link rel="stylesheet" type="text/css" href="style3.css">
+    <script language="javascript" type="text/javascript"></script>
+  </head>
+  <body>
+　　<button id="prev" type="button">前の月</button>
+　　<button id="next" type="button">次の月</button>
+　　<div id = "calendar"></div>
+   <script src="main3.js"></script>
+  </body>
+</html>
+```
+```css
+#calendar {
+  height: 600px;
+  margin: 100px 0px 100px 0px;
+}
+h2 {
+    font-size: 50px;
+    text-align: center;
+    color: skyblue;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin-left: 100px;
+    margin-right: 100px;
+}
+td {
+    border: 1px solid #ddd;
+    padding: 10px;
+    font-size: 40px;
+    text-align: center;
+}
+td:first-child {
+    color: red;
+}
+td:last-child {
+    color: royalblue;
+}
+td.is-disabled {
+    color: #ccc;
+}
+.is-today {
+color: red;
+}
+.item {
+  background-color: #8ad3e3b3;
+}
+button#prev,#next {
+  font-size: 60px;
+  margin-right: 200px;
+  margin-top: 100px;
+  text-align: center;
+  color: #7a7f8b;
+}
+input {
+  width: 200px;
+  height: 60px;
+  margin-bottom: 10px;
+  text-align: center;
+  font-size: 40px;
+}
+p {
+  font-size: 50px;
+  margin-left: 80%;
+}
+```
 ```javaScript
+const weeks = ['日', '月', '火', '水', '木', '金', '土']
+const date = new Date();  //今日の日付
+let year = date.getFullYear();
+ //console.log(year)
+let month = date.getMonth() + 1;  //10(返される値)+1
+ //console.log(month)
+const config = {
+   show: 3,
+};
+function showCalendar(year, month) {
+    for ( i = 0; i < config.show; i++) {
+        const calendarHtml = createCalendar(year, month)
+        const sec = document.createElement('section')
+        sec.innerHTML = calendarHtml
+        document.querySelector('#calendar').appendChild(sec)
+        month++
+        if (month > 12) {
+            year++
+            month = 1
+        }
+    }
+};
+//---------------------------------------------------------------------
+function createCalendar(year, month) {
+　　const startDate = new Date(year, month - 1, 1)
+　　const endDate = new Date(year, month,  0) // 月の最後の日を取得
+　　const endDayCount = endDate.getDate() // 月の末日
+　　let year1 = date.getFullYear();
+　　let now = new Date();
+　　const todaymonth = now.getMonth() + 1;
+　　const lastMonthEndDate = new Date(year,month - 1,0)       // 前月の最後の日の情報
+　　const lastMonthendDayCount = lastMonthEndDate.getDate()   // 前月の末日
+　　const startDay = startDate.getDay() // 月の最初の日の曜日を取得
+    let dayCount = 1 // 日にちのカウント
+    let calendarHtml = '' // HTMLを組み立てる変数
+    calendarHtml += '<h2>' + year  + '/' + month + '</h2>'
+    calendarHtml += '<table id=month_id'+ year + month + '>'+ '<p id=' + year + month + '_sum>' + '合計'  + '</p>' + '<tbody>'
+    // 曜日の行を作成
+    for (let i = 0; i < weeks.length; i++) {
+        calendarHtml += '<td>' + weeks[i] + '</td>'
+    };
+//ここからカレンダー作成
+//---------------------------------------------------------------------
+for (let w = 0; w < 6; w++) {
+    calendarHtml += '<tr>'
+    for (let d = 0; d < 7; d++) {        //0~6まで　インクリメント ７日で繰り返す
+        if (w == 0 && d < startDay) {    //wが0かつ5より小さいとき空
+            // 1行目で1日の曜日の前
+         let num = lastMonthendDayCount - startDay + d + 1
+            calendarHtml += '<td class="is-disabled">' + num + '</td>'
+        } else if (dayCount > endDayCount) {
+            // 末尾の日数を超えた
+         let num = dayCount - endDayCount
+            calendarHtml += '<td class="is-disabled">' + num + '</td>'
+            dayCount++
+        } else {
+                  let   year1 = date.getFullYear();
+                  const startDate2 = new Date(year, month - 1, 1)
+                  const startDay2 = startDate2.getDay() // 月の最初の日の曜日を取得
+                  const todays2 = date.getDate();
+                  let   today_month2 = date.getMonth() + 1;
+                  let   today_c2 = (6+todays2 + startDay2)
+            calendarHtml += `<td id= `+ `"` + year1 + today_month2 + dayCount + `"` + ` ` + `class="calendar_td"` +
+             `daylength=${dayCount}>${dayCount}`+
+             '<br>'
+             +  '<input id="' + year1 + todaymonth + dayCount +'day_save"' + 'type = "text" name=""  value=""' + ' >' +
+             '<br/> '+
+             '<input id="' + year1 + todaymonth + dayCount +'dayoverTime"' + 'type = "number" name="in" step="0.5" value=""' + ' >' +
+             '<br/> '
+             +'  <input id="' + year1 + todaymonth + dayCount +'dayoverTime"'+' onclick="load_click(this.id);" class="btn1" type="button" value="読込" onclick="load();"/>'+
+             ' <input  id="' + year1 + todaymonth + dayCount +'day"'+' class="btn2" type="button" value="保存" onclick="reply_click(this.id);save()"/>'+
+             ' <br/><br/>'+
+             ' <button  type="button" class="btn btn-primary btn-block" id="' + year1 + todaymonth + dayCount +'dayoverTime"' + 'onclick="reset_click(this.id);">リセット</button>' + '</td>'
+            dayCount++
+        }
+    }
+    calendarHtml += '</tr>'
+};
+//ここまでカレンダー作成
+//---------------------------------------------------------------------
+  const todays = date.getDate();
+  let   today_month = date.getMonth() + 1;
+  let   today_c = (5+todays+startDay)
+  const year_index = '<h2>' + year  + '/' + (month-1) + '</h2>'
+　if(year_index == '<h2>' + year  + '/' + today_month + '<h2>' ) {
+  let cl = document.getElementsByTagName("td");
+      cl[today_c].classList.add('item');
+};
+//---------------------------------------------------------------------
+calendarHtml += '</tbody>' + '</table>'
+return calendarHtml //ここまでの処理結果を下のshowCalendarに返す
+};
+//---------------------------------------------------------------------
+function moveCalendar(e) {
+    document.querySelector('#calendar').innerHTML = ''
+    if (e.target.id === 'prev') {
+       month--
+        if (month < 1) {
+            year--
+            month = 12
+        }
+    }
+    if (e.target.id === 'next') {
+        month++
+        if (month > 12) {
+            year++
+            month = 1
+        }
+    }
+    showCalendar(year, month)
+};
+document.querySelector('#prev').addEventListener('click', moveCalendar)
+document.querySelector('#next').addEventListener('click', moveCalendar)
+showCalendar(year, month);
+  window.onload = function (){
+      let ret = document.getElementById("month_id"+ year1 +month)
+      .getElementsByTagName("td")
+      [today_c2].classList.add("item");
+　};
+  // 保存 id 201911day
+  function reply_click(clicked_id)
+    {
+      //alert(clicked_id);
+      let num_day = (clicked_id);
+     console.log(num_day);
+     save(num_day);
+　　　};
+  // 保存
+  function save(num_day) {
+    let mydata = document.getElementById(num_day+'overTime').value;
+    document.getElementById(num_day+'_save').value = mydata
+    console.log(mydata);
+    localStorage.setItem(num_day+'overTime', mydata);
+   };
+　　// 読込  id 201911dayoverTime
+    function load_click(clicked_id){
+      //alert(clicked_id);
+      let load_data = (clicked_id);
+       load(load_data);
+　　　};
+    // 読込
+    function load(load_data) {
+      let memo = 'メモ書きは,';
+      let mydata =  "";
+      if (!localStorage.getItem(load_data)) {
+        mydata = "データがありません";
+        console.log(`mydata= ${mydata}`);
+      } else {
+        mydata = load_data + '=' + localStorage.getItem(load_data);
+        console.log(`mydata= ${mydata}`);
+        var str = mydata;
+        console.log(str);
+      }
+　　}
+    //リセット
+    function reset_click(clicked_id){
+        console.log(clicked_id);
+      if (!localStorage.getItem(clicked_id)) {
+        r_mydata = "データがありません";
+        console.log(r_mydata);
+      } else {
+        r_mydata = clicked_id + '=' + localStorage.getItem(clicked_id);
+        console.log(r_mydata);
+        localStorage.removeItem(clicked_id,r_mydata);
+        console.log(clicked_id);
+      }
+  }
   window.onload  = function() {
     const date = new Date();  //今日の日付
     const year = date.getFullYear();
@@ -18,24 +408,14 @@
     const d = new Date(year, month, 0).getDate();
     console.log(d)
     for (let len = 0; len < d+1; len++){
+      var overvalue = (localStorage.getItem(year.toString()+month.toString()+len.toString()+'dayoverTime'));
+      var set_num = Number(overvalue);
+      }
-    var overvalue = (localStorage.getItem(year.toString()+month.toString()+len.toString()+'dayoverTime'));
+     const element_sum = document.getElementById('201911_sum');
+     element_sum.innerHTML = set_num;
-    var set_num = Number(overvalue);
+  };
- //ここで値を加算してみたが　これだと意味ないですが他に思いつきません
-   　  if (!isNaN(set_num)){
-   　   set_num += set_num;
-   　　 console.log(set_num)
- 　　　};
-    }
-    };
 ```