【HTMLとCSSとJavaScript】月ごとに変わるお掃除当番表

しまうまくん

いろいろ参考にして、
月ごとに変動するお掃除当番表を作りました。
HTMLとCSSとJavaScriptを使用しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
    <title>今月のお掃除</title> 
</head>
<body>

<div>
<h2 style="text-align:center"><span id="kongetu"></span>月のお掃除</h2>

<div class="box">
    <div class="chart_souji_soto">
        <div class="label_shouji label_shouji-1">掃除1</div>
        <div class="label_shouji label_shouji-2">掃除2</div>
        <div class="label_shouji label_shouji-3">掃除3</div>
        <div class="label_shouji label_shouji-4">掃除4</div>
        <div class="label_shouji label_shouji-5">掃除5</div>
    </div>
    <div class="chart_souji">
    </div>
    <div class="chart_tantou">
    <!-- <div id="chart_tantou_css" class="chart_tantou"> -->
        <div class="label_tantou label_tantou-1"><ui id="pid0"></ui></div>
        <div class="label_tantou label_tantou-2"><ui id="pid1"></ui></div>
        <div class="label_tantou label_tantou-3"><ui id="pid2"></ui></div>
        <div class="label_tantou label_tantou-4"><ui id="pid3"></ui></div>
        <div class="label_tantou label_tantou-5"><ui id="pid4"></ui></div>
    </div>
</div>

<script src="touban.js"></script>

<script type="text/javascript">
    document.getElementById("kongetu").innerHTML = showDay();
    function showDay() {
        var now = new Date();
        let month = nowdate.getMonth() + 1
         ;
        return month;
    }
</script>

<link rel="stylesheet" href="touban.css">

</body>
</html>

CSS

:root {
  --r: 100px;
  --r_soto: 240px;
  --r_tantou: 75px;
 }

 body {
  font-family: "ＭＳ ゴシック" ;
  }
  

 .box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* 掃除内容の円の外側に凡例を置くための、透明の円のCSS */
.chart_souji_soto {
  position: relative;
   width: calc(var(--r_soto) * 4);
   height: calc(var(--r_soto) * 4);
   border-radius: 50%;
   background-image: conic-gradient(
     #009afa00 0% 20%,
     #2daaf800 20% 40%,
     #63c3ff00 40% 60%,
     #8fd3fd00 60% 80%,
     #bae5ff00 80% 100%
   );
}

/* 掃除内容の円のCSS */
.chart_souji {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--r) * 4);
height: calc(var(--r) * 4);
border-radius: 50%;
background-image: conic-gradient(
  #009afa 0% 20%,
  #2daaf8 20% 40%,
  #63c3ff 40% 60%,
  #8fd3fd 60% 80%,
  #bae5ff 80% 100%
);
}

/* 掃除内容のラベルのCSS */
.label_shouji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: calc(var(--r) * 0.25);
  color: midnightblue;
}

.label_shouji-1 {
  --start: 0;
  --end: 0.2;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_soto) - 50%) calc(sin(var(--deg)) * var(--r_soto)  - 50%) ;
}

.label_shouji-2 {
  --start: 0.2;
  --end: 0.4;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_soto) - 50%) calc(sin(var(--deg)) * var(--r_soto)  - 50%) ;
}

.label_shouji-3 {
  --start: 0.4;
  --end: 0.6;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_soto) - 50%) calc(sin(var(--deg)) * var(--r_soto)  - 50%) ;
}

.label_shouji-4 {
  --start: 0.6;
  --end: 0.8;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_soto) - 50%) calc(sin(var(--deg)) * var(--r_soto)  - 50%) ;
}

.label_shouji-5 {
  --start: 0.8;
  --end: 1;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_soto) - 50%) calc(sin(var(--deg)) * var(--r_soto)  - 50%) ;
}

/* 担当者の円のCSS */
.chart_tantou {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--r_tantou) * 4);
  height: calc(var(--r_tantou) * 4);
  border-radius: 50%;
  background-image: conic-gradient(
    #ffffbc 0% 20%,
    #bcffbc 20% 40%,
    #bcffff 40% 60%,
    #bcbcff 60% 80%,
    #ffbcff 80% 100%
  );
}

/* 担当者のラベルのCSS */
.label_tantou {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: calc(var(--r_tantou) * 0.35);
  color: midnightblue;
}

.label_tantou-1 {
  --start: 0;
  --end: 0.2;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_tantou) - 50%) calc(sin(var(--deg)) * var(--r_tantou)  - 50%) ;
}

.label_tantou-2 {
  --start: 0.2;
  --end: 0.4;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_tantou) - 50%) calc(sin(var(--deg)) * var(--r_tantou)  - 50%) ;
}

.label_tantou-3 {
  --start: 0.4;
  --end: 0.6;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_tantou) - 50%) calc(sin(var(--deg)) * var(--r_tantou)  - 50%) ;
}

.label_tantou-4 {
  --start: 0.6;
  --end: 0.8;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_tantou) - 50%) calc(sin(var(--deg)) * var(--r_tantou)  - 50%) ;
}

.label_tantou-5 {
  --start: 0.8;
  --end: 1;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r_tantou) - 50%) calc(sin(var(--deg)) * var(--r_tantou)  - 50%) ;
}

JavaScript

//担当者を回していくためのスクリプト
let shoki_date =  "2024/4/1"; //掃除当番表を始める年月（1日始まりにする）
let tantou = ["担当1", "担当2", "担当3", "担当4", "担当5"]; //担当者の初期値
let r =  "100px";
let r_soto =  "240px";
let r_tantou =  "75px";

//担当者の色
let tantou_color = ['#ffffbc','#bcffbc','#bcffff','#bcbcff','#ffbcff'];

//ここで経過月を算出
//まずは今月の1日の日付取得
let nowdate = new Date();

let year = nowdate.getFullYear();
let month = nowdate.getMonth() + 1;
let day = nowdate.getDate();
let dayofweek = nowdate.getDay();

let noe_date_tuitati = new Date(year + '/' + month + '/1');

//「掃除当番表を始める年月」からの経過月を取得
let keikatuki =  funGetKeikaDate(shoki_date, noe_date_tuitati)

let new_tantou = new Array();
let new_tantou_color = new Array();
for (let i = 0; i < keikatuki; i++) {
    new_tantou = []
    for (let j = 4; j >= 0; j--) {
        new_tantou[j] =  tantou[j-1];
    }
    new_tantou[0] =  tantou[4]
    tantou = new_tantou;

    new_tantou_color = []
    for (let j = 4; j >= 0; j--) {
        new_tantou_color[j] =  tantou_color[j-1];
    }
    new_tantou_color[0] =  tantou_color[4]
    tantou_color = new_tantou_color;    
}


for (let i = 0; i <= 4; i++) {
    //担当者の円のラベルをHTMLに出力
    var span = document.createElement('span');
    span.className = 'circle_tantou';
    span.innerHTML     = tantou[i];
    document.getElementById('pid'+i ).appendChild(span);
}

//担当者の色をCSSに設定
document.querySelector('.chart_tantou').style.backgroundImage = 'conic-gradient('+ tantou_color[0] +' 0% 20%, '+ tantou_color[1] +' 20% 40%, '+ tantou_color[2] +' 40% 60%, '+ tantou_color[3] +' 60% 80%, '+ tantou_color[4] +' 80% 100%)';

//何月経ったかを算出
 function funGetKeikaDate(dt1, dt2) {

    const date1 = new Date(dt1)
    const date2 = new Date(dt2)

    let months
    months = (date2.getFullYear() - date1.getFullYear()) * 12
    months -= date1.getMonth() + 1
    months += date2.getMonth() + 1

    return months
  };


この記事が気に入ったらサポートをしてみませんか？