简单的签到--点击按钮和圆点都签到

html

<div class="signHead">
      <div class="signAllBox">本月签到<span class="allNum">0</span>天</div>
      <div class="signNowBox">本周连续签到<span class="lastNum">0</span>天</div>
    </div>
    <div class="signMain">
      <!-- gm动态添加gm -->
    </div>
    <div class="signBtnBox">
      <!-- gm签到按钮gm -->
    </div>

js–按周连续签到,setSign中>8的判断是无用的,如果不按周显示如图3的效果

let allNum = 23 //本月签到时间
    let lastNum = 28 //连续签到时间
    let isSign = false //今天是否签到
    let lastHtml = ''
    let showArr = [1, 2, 3, 4, 5, 6, 7]
    let ab_str = (lastNum / 7).toString() //连续签到几周的时候
    let signWeek =
      lastNum % 7 === 0
        ? lastNum / 7
        : parseInt(ab_str.substring(0, ab_str.indexOf('.'))) //连续签到几周了
    console.log(signWeek)
    console.log(ab_str)
    //设置点亮的部分动态添加--gm
    function setSign() {
      lastHtml = '' //先清空
      $('.signMain').html(lastHtml)
      showArr.map((item, index) => {
        if (lastNum < 8) {
          lastHtml += `<div class="signPart">
          <div class="signLine ${lastNum > index ? 'active' : ''}">
            <span class="signTips ${index == 0 ? 'hide' : 'show'}"></span>
            <div class="signLi" data-signnum="${item}">+${item}<image class="surePic" src="sureIcon.png"></div>
          </div>
          <div class="signText">第${item}天</div>
        </div>`
        } else {
          if (item + 7 * signWeek < 32) {
            //每个月最多31天
            lastHtml += `<div class="signPart">
              <div class="signLine ${
                lastNum - 7 * signWeek > index ? 'active' : ''
              }">
                <span class="signTips ${index == 0 ? 'hide' : 'show'}"></span>
                <div class="signLi" data-signnum="${item}">+${item}<image class="surePic" src="sureIcon.png"></div>
              </div>
              <div class="signText">第${item + 7 * signWeek}天</div>
            </div>`
          }
        }
      })
      $('.signMain').html(lastHtml) //签到点亮
      $('.allNum').html(allNum) //本月签到天数
      $('.lastNum').html(lastNum) //本月签到天数
    }
    setSign() //初始化调用数据
    //签到按钮
    let btnHtml = ''
    btnHtml = `<button class="${isSign ? 'greyBg' : ''}">${
      isSign ? '已签到' : '立即签到'
    }</button>`
    $('.signBtnBox').html(btnHtml)
    //签到调用的函数
    function signFun() {
      isSign = !isSign
      btnHtml = `<button class="${isSign ? 'greyBg' : ''}">${
        isSign ? '已签到' : '立即签到'
      }</button>`
      $('.signBtnBox').html(btnHtml)
      allNum = ++allNum //本月签到时间
      lastNum = ++lastNum //连续签到时间
      setSign() //重新调用
    }
    //没有签到时点击签到按钮,天数加一同时重新调用--gm
    $('.signBtnBox').on('click', 'button', function () {
      if (isSign == false) {
        signFun() //签到函数
      } else {
        alert('今日已签到')
      }
    })
    //点击圆点签到
    $('.signMain').on('click', '.signLi', function (e) {
      //e.currentTarget.dataset中是标签自定义的属性
      console.log(lastNum, e.currentTarget.dataset.signnum)
      console.log(lastNum - 6 - 7 * (signWeek - 1))
      console.log(lastNum - 7 * signWeek + 1)
      if (lastNum > 7) {
        if (
          lastNum - 6 - 7 * (signWeek - 1) == e.currentTarget.dataset.signnum &&
          isSign == false
        ) {
          signFun() //签到函数
        }
      } else {
        if (lastNum + 1 == e.currentTarget.dataset.signnum && isSign == false) {
          signFun() //签到函数
        }
      }
    })

css

html,
      body {
        font-size: 0.2rem;
      }
      .signHead {
        display: flex;
        justify-content: space-between;
        padding: 20px;
      }
      .show {
        display: block;
      }
      .hide {
        display: none;
      }
      .signMain {
        display: flex;
        justify-content: space-around;
        margin-right: 3%;
      }
      .signPart {
        flex: 1;
      }
      .signLine {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .signLi {
        position: relative;
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 0.8rem;
        background: #eee;
        text-align: center;
        color: #666;
      }
      .signTips {
        flex: 1;
        height: 0.1rem;
        background: #eee;
      }
      .signText {
        width: 0.8rem;
        text-align: center;
        float: right;
      }
      .surePic {
        display: none;
        width: 60%;
        height: 60%;
        position: absolute;
        top: 20%;
        left: 20%;
      }
      .active .signTips {
        background: #e90;
      }
      .active .signLi {
        background: #e90;
        color: #e90;
      }
      .active .surePic {
        display: block;
      }
      .signBtnBox {
        display: flex;
        justify-content: center;
        margin: 0.3rem;
      }
      .signBtnBox button {
        width: 60%;
        height: 0.8rem;
        line-height: 0.8rem;
        background: #e90;
        color: #fff;
        border: none;
      }
      .signBtnBox .greyBg {
        background: #ccc;
        color: #666;
      }

移动端控制字体大小js

setHtml()
window.addEventListener('resize', function () {
  setHtml()
})
function setHtml() {
  var width = document.documentElement.clientWidth
  if (width < 750) {
    document
      .getElementsByTagName('html')[0]
      .setAttribute(
        'style',
        'font-size: ' + (width / 750) * 100 + 'px !important'
      )
  } else {
    document
      .getElementsByTagName('html')[0]
      .setAttribute('style', 'font-size:100px !important')
  }
}