simple-tool-pages
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Time progress.</title>
  <style>
    * {
      text-shadow: rgba(0, 0, 0, .2) 0 0 0, rgba(0, 0, 0, .1) 0 0 .1px, rgba(0, 0, 0, .05) 0 0 .2px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    html,
    body {
      margin: 0;
      padding: 0;
      background: #22272b;
      font-size: 14px;
      font-family: 'Microsoft YaHei';
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    #content {
      position: absolute;
      z-index: 1;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-content: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    #content > .progress-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .8);
      padding-bottom: 4px;
      position: relative;
    }
    #content > .progress-box > .progress-name {
      width: 0vw;
      min-width: 10rem;
      max-width: 20rem;
      font-size: 1rem;
      color: rgba(255, 255, 255, .8);
      font-weight: 200;
    }
    #content > .progress-box > .progress-bar {
      width: 28vw;
      height: 12px;
      background: rgba(0, 0, 0, .3);
      border: 1px solid rgba(0, 0, 0, .6);
      border-radius: 10px;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3);
      position: relative;
    }
    #content > .progress-box > .progress-bar::before {
      content: attr(data-progress);
      position: absolute;
      z-index: 9;
      left: 5px;
      width: 28vw;
      height: 12px;
      text-align: left;
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      font-weight: 200;
      text-shadow: rgba(0, 0, 0, .8) 0 0 1px;
    }
    #content > .progress-box > .progress-bar > .bar {
      position: absolute;
      top: 0;
      right: 0;
      width: 10vw;
      height: 12px;
      border-radius: 10px;
      box-shadow: inset -2px 2px 2px 2px rgba(255, 255, 255, .3);
    }
    #year-progress > .bar { background: rgb(59, 128, 255); }
    #month-progress > .bar { background: rgb(255, 209, 59); }
    #day-progress > .bar { background: rgb(154, 255, 59); }
    #hour-progress > .bar { background: rgb(255, 59, 75); }

    #content > .progress-box > #time {
      position: absolute;
      top: -10rem;
      color: rgba(255, 255, 255, .3);
      font-size: 5rem;
    }
    #content > .progress-box > #time> .nosep {
      opacity: 0;
    }
    #content > .progress-box > #title {
      position: absolute;
      top: -12rem;
      background: rgba(255, 255, 255, .3);
      color: #22272b;
      font-size: 4rem;
    }
    #content > .progress-box > #desc {
      position: absolute;
      top: -6rem;
      color: rgba(255, 255, 255, .3);
      font-size: 1.8rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="content">
    <div class="progress-box">
      <div id="time"></div>
      <div id="title"></div>
      <div id="desc"></div>
      <div class="progress-name">Year Progress</div>
      <div class="progress-bar" id="year-progress"><div class="bar"></div></div>
    </div>
    <div class="progress-box">
      <div class="progress-name">Month Progress</div>
      <div class="progress-bar" id="month-progress"><div class="bar"></div></div>
    </div>
    <div class="progress-box">
      <div class="progress-name">Day Progress</div>
      <div class="progress-bar" id="day-progress"><div class="bar"></div></div>
    </div>
    <div class="progress-box">
      <div class="progress-name">Hour Progress</div>
      <div class="progress-bar" id="hour-progress"><div class="bar"></div></div>
    </div>
  </div>
  <canvas id="bg-stars"></canvas>
  <script>
    window.onload = ()=>{
      // 获取基础参数
      const vars = {};
      const parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (m,key,value)=>{ vars[key] = value })
      if(vars.mode==='title'){
        document.querySelector('#title').innerHTML = decodeURIComponent(vars.title)
        document.querySelector('#desc').innerHTML = decodeURIComponent(vars.desc)
      }
      // 初始化进度
      const progressArray = [
        { name:'year-progress', progress: 0},
        { name:'month-progress', progress: 0},
        { name:'day-progress', progress: 0},
        { name:'hour-progress', progress: 0},
      ]
      // 初始化画布
      const starsCanvas = document.getElementById('bg-stars')
      starsCanvas.width = window.innerWidth
      starsCanvas.height = window.innerHeight
      const ctx = starsCanvas.getContext('2d');
      let starsCount = 0
      const starsCountWanted = Number(window.innerWidth * window.innerHeight / 1000).toFixed(0)
      // 画杂色的函数，我们管杂色叫星星
      const drawStar = ()=>{
        if(starsCount<+starsCountWanted){
          const x = Number(Math.random()*window.innerWidth).toFixed(0)
          const y = Number(Math.random()*window.innerHeight).toFixed(0)
          ctx.beginPath()
          ctx.arc(x, y, .5, 0, Math.PI*2, true)
          ctx.lineWidth = 0
          ctx.strokeStyle = "rgba(255, 255, 255, 0)"
          ctx.fillStyle = "rgba(255, 255, 255, .15)"
          ctx.fill()
          starsCount++
          window.setTimeout(drawStar, 25)
        }else{
          console.log('Stars are drawed!')
        }
      }
      // 时间更新函数
      const refreshProgress = (time)=>{
        const nowTime = new Date(time)
        const year = nowTime.getFullYear()
        const yearLong = new Date(year+1,0,1) - new Date(year,0,1)
        const month = nowTime.getMonth()
        const monthLong = month === 11 ? new Date(year+1,0,1) - new Date(year,11,1) : new Date(year,month+1,1) - new Date(year,month,1)

        const doubleNumber = (a)=>{ return a<10 ? '0'+a : a }
        const hour   = doubleNumber(nowTime.getHours())
        const minute = doubleNumber(nowTime.getMinutes())
        const second = doubleNumber(nowTime.getSeconds())

        if(vars.mode==='time'){
          document.querySelector('#time').innerHTML = hour+':'+minute+(nowTime.getSeconds()%2 ? ':' : '<span class="nosep">:</span>')+second
        }

        const yearProgress = Number(
            (nowTime.getTime()
              -nowTime.getTimezoneOffset()*60000
              -(new Date(year,0,1)).getTime())
            /yearLong
          ).toFixed(4)
        const monthProgress = Number(
            (nowTime.getTime()
              -nowTime.getTimezoneOffset()*60000
              -(new Date(year,month,1)).getTime())
            /monthLong
          ).toFixed(4)
        const dayProgress = Number((nowTime.getTime()-nowTime.getTimezoneOffset()*60000)%(24*3600*1000)/(24*3600*1000)).toFixed(4)
        const hourProgress = Number((nowTime.getTime()-nowTime.getTimezoneOffset()*60000)%(3600*1000)/(3600*1000)).toFixed(4)
        const nowArray = [yearProgress, monthProgress, dayProgress, hourProgress]
        for(let i=0; i<4; i++){
          if(+progressArray[i].progress === +nowArray[i]){ continue }
          progressArray[i].progress = +nowArray[i]
          const barWidth = 28*(1-nowArray[i])
          document.querySelector('#'+progressArray[i].name+' > .bar').style = 'width: '+barWidth+'vw'
          const progressToShow = +nowArray[i]<0.1 ? '0'+((+nowArray[i])*100).toFixed(0) : ((+nowArray[i])*100).toFixed(0)
          document.querySelector('#'+progressArray[i].name).dataset.progress = progressToShow+'%'
        }
      }
      // 启动
      // drawStar()
      // 定时更新任务
      let time
      decodeURIComponent(vars.time).replace( /^\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}$/, (m)=>{ time = m } )
      if(time){
        const timeArray = time.split(/-| |:/g)
        time = Date.UTC(timeArray[0], timeArray[1], timeArray[2], timeArray[3], timeArray[4])+(new Date()).getTimezoneOffset()*60000
        refreshProgress(time)
      }else{
        time = Date.now()
        refreshProgress(time)
        window.setInterval(()=>{
          refreshProgress(time)
        }, 1000)
      }

      // 窗口尺寸变化重新画
      window.onresize = ()=>{
        starsCanvas.width = window.innerWidth
        starsCanvas.height = window.innerHeight
        starsCount = 0
      }
    }
  </script>
</body>
</html>