HTML网页版倒数日·Days Matter

已于 2024-04-10 13:09:55 修改
阅读量2.4k 收藏 33
点赞数 41
文章标签： html javascript css
于 2024-04-10 11:34:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51831991/article/details/137587555
版权

提示：本文案例为个人创作案例中分离出来的代码，本案例代码量较大，暂不做代码注释，仅供参考。

文章目录

HTML+CSS+JS原生代码实现的网页版倒数日·Days Matter，下为本案例运行操作视频

days_matter

案例说明

1.本案例页面图标全部采用阿里矢量图标库，图标svg代码

2.为了运行方便，本案例建议创建一个.html文件，将所有代码放到其中，将.html文件放置于桌面直接点击运行即可。

3.下图为本案例局部示例图，已经过去的日期后方数字为橙色，未到的日期后方数字为蓝色

此列表内特殊日期为自动生成，页面内无法手动修改

在这里插入图片描述

一、存储说明

案例采用LocalStorage本地存储的方式存储倒数日数据内容，页面刷新内容不会丢失。

提示：不可跨浏览器获取数据内容，浏览器之间localStorage本地存储空间相互独立。

提示：页面右上方删除按钮，点击后出现弹窗，该操作可删除本地存储的全部记事本数据内容，删除后无法恢复！

二、Days Matter说明

下图为手机 App 倒数日·Days Matter 示例图，本案例 Days Matter 参考该 App，实现网页版自定义局部功能，事件纪念日

三、代码部分

1.HTML代码

<header>
    MY DAYS_MATTER
    <span id="clearAll">
      <svg t="1704439198763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4779">
        <path
          d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
          fill="#ccc" p-id="4780"></path>
        <path
          d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
          fill="#ccc" p-id="4781"></path>
        <path
          d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
          fill="#ccc" p-id="4782"></path>
        <path
          d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
          fill="#ccc" p-id="4783"></path>
      </svg>
    </span>
  </header>
  <div class="matterbox">
    <div class="addbox">
      <div>
        <p class="input-1"><span>事件名称：</span><input type="text" placeholder="最多输入9个字符 (必填)" maxlength="9"></p>
        <p class="input-2"><span>起始日：</span><input type="date"></p>
        <button class="cancel">取消</button>
        <button class="certain">确定</button>
      </div>
    </div>
    <div class="matterlist">
      <p class="title">
        <span id="delbtn">
          <svg t="1704439198763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4779">
            <path
              d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
              fill="#fff" p-id="4780"></path>
            <path
              d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
              fill="#fff" p-id="4781"></path>
            <path
              d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
              fill="#fff" p-id="4782"></path>
            <path
              d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
              fill="#fff" p-id="4783"></path>
          </svg>
        </span>
        Days Matter List
        <span id="plus">
          <svg t="1707191230945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="10121">
            <path
              d="M906.212134 565.732986 565.732986 565.732986 565.732986 906.212134C565.732986 926.013685 541.666486 959.972 511.97312 959.972 482.297674 959.972 458.213254 926.013685 458.213254 906.212134L458.213254 565.732986 117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254L458.213254 458.213254 458.213254 117.734106C458.213254 97.950475 482.297674 63.97424 511.97312 63.97424 541.666486 63.97424 565.732986 97.950475 565.732986 117.734106L565.732986 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986Z"
              p-id="10122" fill="#ffffff"></path>
          </svg>
        </span>
      </p>
      <div class="list"></div>
    </div>
    <div class="matterdatabox"></div>
    <div class="clearNull">
      <div>
        <p>未检测到用户存储数据，本地存储数据为空！</p>
        <button class="nullEsc">确定</button>
      </div>
    </div>
    <div class="clearbox">
      <div>
        <p>删除的数据无法进行恢复，是否确定删除平台本地存储的所有用户数据？</p>
        <button class="clearF">取消</button>
        <button class="clearT" disabled>确定(10)</button>
      </div>
    </div>
  </div>
  <footer>
    <p> Create By No.ever.</p>
  </footer>

2.CSS代码

    * {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
    }
    header {
      position: relative;
      width: 100%;
      height: 50px;
      color: rgb(175, 171, 171);
      background-color: rgb(27, 27, 27);
      transition: all .5s;
      z-index: 999;
      text-align: center;
      line-height: 50px;
      letter-spacing: 3px;
    }
    #clearAll {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 20px;
      top: 10px;
      cursor: pointer;
    }
    #clearAll path {
      fill: #ccc;
    }
    #clearAll:hover path {
      fill: #fff;
    }
    .matterbox {
      width: 100%;
      height: calc(100vh);
      background: #cccccc7f;
      position: relative;
    }
    @media screen and (min-device-width:1500px) {
      .matterbox {
        height: calc(120vh);
      }
    }
    @media screen and (min-device-width:1900px) {
      .matterbox {
        height: calc(100vh);
      }
    }
    .matterdatabox {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      overflow: hidden;
      margin-left: 33.33%;
    }
    .addbox {
      width: 100%;
      height: 100%;
      background: rgba(55, 55, 55, .6);
      position: relative;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      display: none;
    }
    .addbox div {
      width: 60%;
      height: 350px;
      background: rgb(255, 255, 255);
      position: relative;
      border-radius: 8px;
      margin: 300px auto;
    }
    @media screen and (min-device-width:1500px) {
      .addbox div {
        width: 70%;
      }
    }
    @media screen and (min-device-width:1900px) {
      .addbox div {
        width: 60%;
      }
    }
    .addbox div p {
      width: 40%;
      height: 40px;
      line-height: 40px;
      float: left;
      margin-top: 60px;
    }
    .addbox div p {
      margin-top: 80px;
    }
    .addbox .input-1 {
      margin-left: 10%;
    }
    .addbox .input-2 {
      margin-left: 2.5%;
    }
    .addbox div p span {
      float: left;
      width: 20%;
      height: 100%;
      text-align: left;
    }
    .addbox .two span {
      margin-left: 10%;
    }
    input[type='text'] {
      width: 50%;
      outline: none;
      height: 40px;
      background: #c0bebe5d;
      padding-left: 15px;
      margin-left: 5%;
      float: left;
    }
    input[type='date'] {
      width: 70%;
      height: 40px;
      background: #c0bebe5d;
      color: #fff;
      text-align: center;
      cursor: pointer;
      outline: none;
      font-size: 25px;
    }
    .cancel,
    .certain {
      width: 15%;
      height: 40px;
      position: absolute;
      bottom: 50px;
      cursor: pointer;
      border-radius: 8px;
      font-size: 15px;
    }
    .cancel:hover,
    .certain:hover {
      background: #ccccccad;
    }
    .cancel {
      left: 30%;
    }
    .certain {
      right: 30%;
    }
    .matterlist {
      width: 480px;
      height: 80%;
      background: rgba(216, 216, 216, 0.577);
      float: left;
      margin-top: 5%;
      margin-left: 78px;
    }
    .title {
      width: 100%;
      height: 70px;
      background: #317CBD;
      text-align: center;
      line-height: 70px;
      color: #fff;
      font-size: 25px;
      position: relative;
    }
    #plus,
    #delbtn {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 5px;
      cursor: pointer;
    }
    #plus:hover path {
      fill: #000;

    }
    #delbtn:hover path {
      fill: red;
    }
    #delbtn {
      left: 20px;
    }
    #plus {
      right: 20px;
      top: 7px;
    }
    .list {
      width: 100%;
      height: 90%;
      overflow-y: auto;
    }
    .list ul {
      position: relative;
      width: 80%;
      height: 40px;
      line-height: 40px;
      margin-top: 30px;
      margin-left: 8%;
      transition: all .5s;
    }
    #topbtn {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      right: -40px;
      top: 5px;
      text-align: center;
      cursor: pointer;
    }
    #delmatter {
      position: absolute;
      width: 0;
      height: 30px;
      left: -40px;
      top: 5px;
      cursor: pointer;
      transition: all .5s;
    }
    #topbtn svg {
      width: 20px;
      height: 20px;
    }
    #topbtn:hover path {
      fill: #000;
    }
    .list ul li {
      float: left;
      height: 100%;
      background: #fff;
    }
    .name {
      width: 63%;
      font-weight: 600;
      padding-left: 5%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      position: relative;
    }
    #show {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 5px;
      right: 20px;
    }
    .list .day {
      width: 22%;
      background: rgb(244, 148, 48);
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
    }
    .list .last {
      width: 10%;
      background: rgb(240, 119, 40);
      color: #fff;
      text-align: center;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    .matters {
      width: 480px;
      margin: 0 75px;
    }
    .matterCon {
      width: 480px;
      height: 170px;
      background: #ffffff87;
      float: left;
      position: relative;
    }
    .matterCon li {
      background: red;
      border-radius: 5px;
      position: absolute;
      right: 10px;
      top: 50px;
      color: #fff;
      padding: 2px 5px;
    }
    .matterTitle {
      text-align: left;
      margin-top: 60px;
      padding-left: 15px;
      font-size: 17px;
      font-weight: bold;
    }
    .matterTitle span {
      margin-left: 10px;
    }
    .startTime {
      text-align: left;
      color: #939292;
      padding-left: 15px;
      margin-top: 5px;
    }
    .dayTime {
      font-weight: bold;
      position: absolute;
      right: 65px;
    }
    #soubtn-off,
    #soubtn {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      bottom: 5px;
      cursor: pointer;
      z-index: 99;
    }
    #soubtn-off {
      display: none;
    }
    .soutitle {
      width: 30%;
      height: 40px;
      background: rgb(241, 118, 33);
      color: #fff;
      font-weight: 600;
      position: absolute;
      /* top: 130px; */
      bottom: 0;
      left: 35%;
      text-align: center;
      line-height: 40px;
      opacity: 0;
      transition: all .5s;
    }
    #soubtn-off:hover path,
    #soubtn:hover path {
      fill: #000;
    }
    .fontSize-1 {
      font-size: 70px;
      top: 35px;
    }
    .fontSize-2 {
      font-size: 65px;
      top: 37px;
    }
    .fontSize-3 {
      font-size: 58px;
      top: 42px;
    }
    .souvenir {
      width: 100%;
      height: 0;
      background: rgba(235, 234, 233, 0.799);
      float: left;
      transition: all .5s;
      opacity: 0;
      overflow-y: scroll;
    }
    .souvenir div {
      width: 95%;
      height: 60px;
      margin-left: 2.5%;
      position: relative;
    }
    .souvenir div::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 2%;
      width: 96%;
      height: 1px;
      background: #ccc;
      opacity: .8;
    }
    .souvenir div p:first-child {
      font-weight: bold;
      font-size: 15px;
      float: left;
      width: 70%;
      margin-top: 10px;
    }
    .souvenir div p:nth-child(2) {
      font-size: 13px;
      width: 70%;
      float: left;
      color: #939292;
      margin-top: 3px;
    }
    .souvenir div p:nth-child(3) {
      font-size: 27px;
      position: absolute;
      right: 0;
      top: 5px;
    }
    .soucolor-1 {
      color: rgba(13, 71, 246, 0.694);
    }
    .soucolor-2 {
      color: rgb(249, 113, 16);
    }
    .souvenir div li {
      font-size: 10px;
      float: left;
      position: absolute;
      right: 3px;
      color: #939292;
      bottom: 5px;
    }
    ::-webkit-datetime-edit-year-field {
      color: rgb(5, 192, 220);
    }
    ::-webkit-datetime-edit-month-field {
      color: rgb(240, 196, 52);
    }
    ::-webkit-datetime-edit-day-field {
      color: chocolate;
    }
    .clearNull,
    .clearbox {
      width: 100%;
      height: 100%;
      background: rgba(55, 55, 55, .6);
      position: relative;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      display: none;
    }
    .clearNull div,
    .clearbox div {
      width: 60%;
      height: 400px;
      background: rgb(255, 255, 255);
      border-radius: 8px;
      margin: 150px auto;
      position: relative;
    }
    .clearNull div p,
    .clearbox div p {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: red;
      font-weight: 600;
      letter-spacing: 3px;
      margin-top: 80px;
      float: left;
    }
    .clearbox button {
      width: 15%;
      height: 40px;
      cursor: pointer;
      border-radius: 8px;
      font-size: 15px;
      position: absolute;
      bottom: 80px;
    }
    .clearbox .clearF {
      left: 30%;
    }
    .clearbox .clearT {
      right: 30%;
      background: black;
      color: #fff;
    }
    .clearbox .clearT:hover {
      background: rgba(255, 0, 0, 0.804);
    }
    .clearbox button:hover {
      background: #ccccccad;
    }
    .clearNull button {
      width: 15%;
      height: 40px;
      cursor: pointer;
      border-radius: 8px;
      font-size: 15px;
      position: absolute;
      bottom: 80px;
      left: 42.5%;
      background: #000;
      color: #fff;
    }
    .clearNull button:hover {
      background: #464545aa;
    }
    footer {
      width: 100%;
      height: 50px;
      color: rgb(175, 171, 171);
      background-color: rgb(27, 27, 27);
      text-align: center;
      line-height: 50px;
      letter-spacing: 3px;
    }

3.JS代码

    let matterData = []
    let daysmatter = JSON.parse(localStorage.getItem('daysmatter'))

    const matterAddbox = document.querySelector('#plus')
    const matterDelete = document.querySelector('#delbtn')
    const matterdataBox = document.querySelector('.matterdatabox')
    const matterAdd = document.querySelector('.addbox')
    const mattercertainBtn = document.querySelector('.certain')
    const mattercancelBtn = document.querySelector('.cancel')
    const mattereventValue = document.querySelector('input[type=text]')
    const matterDate = document.querySelector('input[type=date]')
    const matterlistdata = document.querySelector('.list')
    if (daysmatter === null) {
      localStorage.setItem('daysmatter', JSON.stringify(matterData))
      daysmatter = JSON.parse(localStorage.getItem('daysmatter'))
    } else {
      matterCommon()
    }

    function matterCommon() {
      matterlistdata.innerHTML = ''
      for (let i = 0; i < daysmatter.length; i++) {
        const now = +new Date()
        const last = +new Date(`${daysmatter[i].startTime} 00:00:00`)
        const count = (now - last) / 1000
        let d = parseInt(count / 3600 / 24) + 1
        matterlistdata.innerHTML += `
        <ul>
          <span id="delmatter" title="删除">
            <svg t="1707197981813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11195" data-spm-anchor-id="a313x.search_index.0.i14.7cff3a815Dl4fw" ><path d="M512 32C251.4285715625 32 32 251.4285715625 32 512s219.4285715625 480 480 480 480-219.4285715625 480-480-219.4285715625-480-480-480z m205.7142853125 617.142856875c20.5714284375 20.5714284375 20.5714284375 48 0 61.714286249999994-20.5714284375 20.5714284375-48 20.5714284375-61.714285312499996 0l-137.142856875-137.1428578125L374.857143125 717.7142853125c-20.5714284375 20.5714284375-48 20.5714284375-68.5714284375 0s-20.5714284375-54.857143125 0-68.5714284375l144-144-137.1428578125-137.142856875c-20.5714284375-13.714285312500001-20.5714284375-41.142856875 0-61.714285312499996 20.5714284375-20.5714284375 48-20.5714284375 61.714286249999994 0l137.142856875 137.142856875 144-144c20.5714284375-20.5714284375 48-20.5714284375 68.5714284375 0 20.5714284375 20.5714284375 20.5714284375 48 0 68.5714284375L580.5714284375 512l137.142856875 137.142856875z" fill="#fb290e" p-id="11196" data-spm-anchor-id="a313x.search_index.0.i15.7cff3a815Dl4fw" class=""></path></svg>
           </span>
          <li class="name">${daysmatter[i].eventName} 第
            <span id="show"title="页面右侧显示">
              <svg t="1707285211623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10220"><path d="M960 80H64c-35.3 0-64 28.6-64 64v576c0 35.3 28.7 64 64 64h312c4.4 0 8 3.6 8 8v84c0 2.2-1.8 4-4 4h-60c-17.7 0-32 14.3-32 32v32h448v-32c0-17.7-14.3-32-32-32h-60c-2.2 0-4-1.8-4-4v-84c0-4.4 3.6-8 8-8h312c35.3 0 64-28.7 64-64V144c0-35.4-28.7-64-64-64zM576 876c0 2.2-1.8 4-4 4H452c-2.2 0-4-1.8-4-4v-52c0-4.4 3.6-8 8-8h112c4.4 0 8 3.6 8 8v52z m384-172c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-44c0-2.2 1.8-4 4-4h888c2.2 0 4 1.8 4 4v44z" p-id="10221" fill="#afabab"></path></svg>
              </span>
            </li>
          <li class="day">${d}</li>
          <li class="last">天</li>
          <span id="topbtn" title="置顶">
            <svg t="1707184896991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5928"><path d="M536.677 215.067l0.338 0.398 0.336 0.408 310.035 383.19a16 16 0 0 1 3.561 10.063c0 8.732-6.994 15.83-15.685 15.997l-0.315 0.003H660.473v256c0 17.673-14.326 32-32 32h-232c-17.672 0-32-14.327-32-32v-256H190.001a16 16 0 0 1-9.745-3.31l-0.32-0.251c-6.776-5.483-7.902-15.362-2.596-22.222l0.222-0.28 310.035-383.19a32 32 0 0 1 4.75-4.749c13.465-10.895 33.088-9.07 44.33 3.943zM855.99 112c4.45 0 8.009 3.41 8.009 7.579v56.842c0 4.168-3.56 7.579-8.009 7.579H168.009c-4.45 0-8.009-3.41-8.009-7.579V119.58c0-4.168 3.56-7.579 8.009-7.579z" p-id="5929" fill="#afabab"></path></svg>  
          </span>
        </ul>
       `
        if (i > 3) {
          const shows = document.querySelectorAll('#show')
          shows[i].style.display = 'none'
        }
      }
      matterdataBox.innerHTML = ''
      daysmatter.length = daysmatter.length > 4 ? 4 : daysmatter.length
      const souTimeArray = [100, 200, 300, 1, 500, 520, 600, 2, 999, 1314, 5, 10, 15, 20, 25, 30, 50, 60, 70, 80, 90, 100]
      const souDayArray = [' 100 天', ' 200 天', ' 300 天', ' 1周年', ' 500 天', ' 520 天', ' 600 天', ' 2周年', ' 999 天', ' 1314 天', ' 5周年', ' 10周年',' 15周年', ' 20周年',' 25周年',' 30周年', ' 50周年',' 60周年',' 70周年',' 80周年',' 90周年', ' 100周年']
      const weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
      for (let i = 0; i < daysmatter.length; i++) {
        const now = +new Date()
        const last = +new Date(`${daysmatter[i].startTime} 00:00:00`)
        const count = (now - last) / 1000
        let d = parseInt(count / 3600 / 24) + 1
        let content = ''
        for (let i = 0; i < souTimeArray.length; i++) {
          if (i < souTimeArray.length - 1 && souTimeArray[i] >= 100) {
            let time = (souTimeArray[i] - 1) * 24 * 3600 + last / 1000
            let timestr = new Date(parseInt(time) * 1000);
            let year = timestr.getFullYear();
            let month = timestr.getMonth() + 1;
            let date = timestr.getDate();
            month = month < 10 ? '0' + month : month
            date = date < 10 ? '0' + date : date
            let datetime = year + "." + month + "." + date
            let dateweek = year + "-" + month + "-" + date
            const week = weekArray[new Date(dateweek).getDay()]
            let mileage = '第' + souDayArray[i]
            const date1 = new Date()
            const Y = date1.getFullYear()
            let M = date1.getMonth() + 1
            let D = date1.getDate()
            let nowT1 = `${Y}-${M}-${D}`
            const nowT = +new Date(`${nowT1} 00:00:00`)
            const lastT = +new Date(`${datetime} 00:00:00`)
            const countT = (nowT - lastT) / 1000
            let dT = parseInt(countT / 3600 / 24)
            let color = dT < 0 ? 1 : 2
            let state = dT < 0 ? '还有' : '已经'
            dT = dT < 0 ? Math.abs(dT) : dT
            content += `
          <div>
            <p> ${mileage}${state}</p>  
            <p>${datetime}  ${week}</p>  
            <p class="soucolor-${color}">${dT}</p>
            <li>DAYS</li>  
          </div>
          `
          } else {
            let mileage = '距离' + souDayArray[i]
            let time = last / 1000
            let timestr = new Date(parseInt(time) * 1000);
            let year = timestr.getFullYear() + souTimeArray[i];
            let month = timestr.getMonth() + 1;
            let date = timestr.getDate();
            month = month < 10 ? '0' + month : month
            date = date < 10 ? '0' + date : date
            let datetime = year + "." + month + "." + date
            let dateweek = year + "-" + month + "-" + date
            const week = weekArray[new Date(dateweek).getDay()]
            const date1 = new Date()
            const Y = date1.getFullYear()
            let M = date1.getMonth() + 1
            let D = date1.getDate()
            let nowT1 = `${Y}-${M}-${D}`
            const nowT = +new Date(`${nowT1} 00:00:00`)
            const lastT = +new Date(`${datetime} 00:00:00`)
            const countT = (nowT - lastT) / 1000
            let dT = parseInt(countT / 3600 / 24)
            let color = dT < 0 ? 1 : 2
            let state = dT < 0 ? '还有' : '已经'
            dT = dT < 0 ? Math.abs(dT) : dT
            content += `
          <div>
            <p>${mileage}${state}</p>  
            <p>${datetime} ${week}</p>  
            <p class="soucolor-${color}">${dT}</p>
            <li>DAYS</li>  
          </div>
          `
          }
        }
        matterdataBox.innerHTML += `
        <div class="matters">
          <div class="matterCon">
            <p class="matterTitle">${daysmatter[i].eventName}<span>第</span></p>
            <p class="startTime">起始日：${daysmatter[i].startTime} ${daysmatter[i].week}</p>
            <p class="dayTime">${d}</p>
            <li>Days</li>
            <span id="soubtn">
              <svg t="1707038458721" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8451"><path d="M251.74016 801.38752c-88.38144 0-160 35.88096-160 80 0 44.19072 71.61856 80 160 80 88.36096 0 159.97952-35.80928 159.97952-80 0.00512-44.12416-71.61856-80-159.97952-80z m-0.00512 119.89504c-54.26176 0-98.23744-15.03232-98.23744-39.89504 0-24.82176 43.97056-39.88992 98.23744-39.88992 54.25664 0 98.2272 15.06816 98.2272 39.88992 0 24.86272-43.97056 39.89504-98.2272 39.89504z" p-id="8452" fill="#afabab"></path><path d="M290.36032 877.98272s4.35712 17.05472-28.28288 22.81472c-29.63968 5.22752-34.95424-12.97408-34.95424-12.97408l-45.90592-295.12704 54.62016-44.93312 54.52288 330.21952zM889.82528 89.1136l-68.56192 408.27392-8.54016 5.69344c-3.24096 2.19136-80.36352 53.56032-171.30496 35.77344-34.00192-6.656-65.43872-17.27488-95.71328-27.68384-40.192-13.65504-78.08512-26.5472-113.60256-26.5472-124.9792 0-195.56352 62.5152-196.26496 63.14496l-54.62016 44.93312L109.03552 128.9728c0-9.84064 9.66656-21.36576 17.54624-29.38368 33.15712-33.73568 184.832-51.02592 299.8016-51.02592 71.56224 0 120.69376 36.60288 160.18432 65.96608 23.35744 17.3312 45.37344 33.6896 65.31072 37.73952 59.90912 11.96544 155.79136-24.3456 187.65824-39.424l50.28864-23.7312z m-71.56224 83.72736c-47.74912 16.79872-121.0368 36.21888-180.06016 24.3456-34.1248-6.84544-61.32736-27.04896-90.12736-48.42496-35.6352-26.50112-72.35584-53.84704-121.90208-53.84704-127.1808 0-232.46336 22.272-243.24608 31.81056-6.06208 5.38112-6.94784 9.61024-6.94784 11.27936l0.4352 4.59776L228.93056 483.2256c40.40704-21.48352 118.43072-44.96896 203.17184-44.96896 46.83776 0 91.97568 15.32416 135.5008 30.15168 28.27264 9.7024 57.52832 19.64032 87.10144 25.40544 48.57856 9.50272 94.86336-11.53024 113.23904-21.41696l50.31936-299.55584z" p-id="8453" fill="#afabab"></path></svg>
            </span>
            <span id="soubtn-off">
              <svg t="1707118119163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4291"><path d="M251.74016 801.38752c-88.38144 0-160 35.88096-160 80 0 44.19072 71.61856 80 160 80 88.36096 0 159.97952-35.80928 159.97952-80 0.00512-44.12416-71.61856-80-159.97952-80z m-0.00512 119.89504c-54.26176 0-98.23744-15.03232-98.23744-39.89504 0-24.82176 43.97056-39.88992 98.23744-39.88992 54.25664 0 98.2272 15.06816 98.2272 39.88992 0 24.86272-43.97056 39.89504-98.2272 39.89504z" p-id="4292" fill="#ffffff"></path><path d="M290.36032 877.98272s4.35712 17.05472-28.28288 22.81472c-29.63968 5.22752-34.95424-12.97408-34.95424-12.97408l-45.90592-295.12704 54.62016-44.93312 54.52288 330.21952zM889.82528 89.1136l-68.56192 408.27392-8.54016 5.69344c-3.24096 2.19136-80.36352 53.56032-171.30496 35.77344-34.00192-6.656-65.43872-17.27488-95.71328-27.68384-40.192-13.65504-78.08512-26.5472-113.60256-26.5472-124.9792 0-195.56352 62.5152-196.26496 63.14496l-54.62016 44.93312L109.03552 128.9728c0-9.84064 9.66656-21.36576 17.54624-29.38368 33.15712-33.73568 184.832-51.02592 299.8016-51.02592 71.56224 0 120.69376 36.60288 160.18432 65.96608 23.35744 17.3312 45.37344 33.6896 65.31072 37.73952 59.90912 11.96544 155.79136-24.3456 187.65824-39.424l50.28864-23.7312z m-71.56224 83.72736c-47.74912 16.79872-121.0368 36.21888-180.06016 24.3456-34.1248-6.84544-61.32736-27.04896-90.12736-48.42496-35.6352-26.50112-72.35584-53.84704-121.90208-53.84704-127.1808 0-232.46336 22.272-243.24608 31.81056-6.06208 5.38112-6.94784 9.61024-6.94784 11.27936l0.4352 4.59776L228.93056 483.2256c40.40704-21.48352 118.43072-44.96896 203.17184-44.96896 46.83776 0 91.97568 15.32416 135.5008 30.15168 28.27264 9.7024 57.52832 19.64032 87.10144 25.40544 48.57856 9.50272 94.86336-11.53024 113.23904-21.41696l50.31936-299.55584z" p-id="4293" fill="#ffffff"></path></svg>
            </span>
            <p class="soutitle">${daysmatter[i].eventName} | Big Day</p>
          </div>
          <div class="souvenir">${content}</div>
      </div>
        `
        const matters = document.querySelectorAll('.matterbox .matters')
        matters[i].style.margin = `0 ${(document.body.clientWidth - 1440) / 6}px`
      }

      const matterlist = document.querySelector('.matterbox .matterlist')
      const widthmatter = (document.body.clientWidth - 1440) / 6
      matterdataBox.style.width = document.body.clientWidth - 480 - widthmatter * 2
      matterlist.style.marginLeft = `${widthmatter}px`
      const dayTime = document.querySelectorAll('.matterbox .matterdatabox .dayTime')
      for (let i = 0; i < dayTime.length; i++) {
        if (+dayTime[i].innerHTML > 999 && +dayTime[i].innerHTML < 9999) {
          dayTime[i].classList.add('fontSize-2')
        } else if (+dayTime[i].innerHTML > 9999) {
          dayTime[i].classList.add('fontSize-3')
        } else {
          dayTime[i].classList.add('fontSize-1')
        }
      }
    }

    const topbtn = document.querySelectorAll('#topbtn')
    for (let i = 0; i < topbtn.length; i++) {
      topbtn[i].addEventListener('click', () => {
        daysmatter = JSON.parse(localStorage.getItem('daysmatter'))
        daysmatter.unshift(daysmatter.splice(i, 1)[0])
        localStorage.setItem('daysmatter', JSON.stringify(daysmatter))
        window.location.reload()
      })
    }

    const soubtn = document.querySelectorAll('#soubtn')
    const soubtnoff = document.querySelectorAll('#soubtn-off')
    const souvenir = document.querySelectorAll('.matterbox .matterdatabox .souvenir')
    const soutitle = document.querySelectorAll('.matterbox .matterdatabox .matterCon .soutitle')
    for (let i = 0; i < soubtn.length; i++) {
      soubtn[i].addEventListener('click', () => {
        soubtn[i].style.display = 'none'
        soubtnoff[i].style.display = 'block'
        souvenir[i].style.height = '430px'
        souvenir[i].style.opacity = 1
        soutitle[i].style.opacity = 1
        soutitle[i].style.left = 0
        soutitle[i].style.width = '100%'
        setTimeout(() => {
          for (let j = 0; j < soubtn.length; j++) {
            if (j == i) continue
            soubtnoff[j].click()
          }
        }, 500);
        if (soubtn.length == 4 && i < 2) {
          soubtnoff[2].click()
          soubtnoff[3].click()
        } else if (soubtn.length == 3 && i < 2) {
          soubtnoff[2].click()
        } else if (i >= 2) {
          soubtnoff[0].click()
          soubtnoff[1].click()
        }
      })
      soubtnoff[i].addEventListener('click', () => {
        soubtn[i].style.display = 'block'
        soubtnoff[i].style.display = 'none'
        souvenir[i].style.height = '0px'
        souvenir[i].style.opacity = 0
        soutitle[i].style.opacity = 0
        soutitle[i].style.left = '35%'
        soutitle[i].style.width = '30%'
      })
    }

    matterAddbox.addEventListener('click', () => {
      matterAdd.style.display = 'block'
    })

    const delmatter = document.querySelectorAll('#delmatter')
    const matterul = document.querySelectorAll('.matterlist .list ul')
    let delkey = 0
    matterDelete.addEventListener('click', () => {
      delkey++
      delkey = delkey == 2 ? 0 : 1
      for (let i = 0; i < delmatter.length; i++) {
        matterul[i].style.marginLeft = delkey == 0 ? '8%' : '10%'
        delmatter[i].style.width = delkey == 0 ? 0 : '30px'
      }
    })
    for (let i = 0; i < delmatter.length; i++) {
      delmatter[i].addEventListener('click', () => {
        daysmatter = JSON.parse(localStorage.getItem('daysmatter'))
        daysmatter.splice(i, 1)
        localStorage.setItem('daysmatter', JSON.stringify(daysmatter))
        window.location.reload()
      })
    }
    mattercancelBtn.addEventListener('click', () => {
      matterAdd.style.display = 'none'
      mattereventValue.value = ''
      matterDate.value = ''
    })

    //获取创建事件时的时间
    const date = new Date()
    const Y = date.getFullYear()
    let M = date.getMonth() + 1
    let D = date.getDate()
    M = M < 10 ? '0' + M : M
    D = D < 10 ? '0' + D : D
    //事件取值范围
    matterDate.min = `1949-10-01`
    matterDate.max = `${Y}-${M}-${D}`

    mattereventValue.addEventListener('input', () => {
      mattereventValue.value = mattereventValue.value.replace(/\s*/g, "")
    })
    mattercertainBtn.addEventListener('click', () => {
      const weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
      let eventName = mattereventValue.value.replace(/\s*/g, "")
      let startTime = matterDate.value
      const week = weekArray[new Date(startTime).getDay()]
      let matterObj = {
        eventName: eventName,
        startTime: startTime,
        week: week
      }
      if (eventName === '') {
        alert('事件名称不能为空！！！')
      } else if (startTime === '') {
        alert('起始日不能为空！！！')
      } else {
        daysmatter = JSON.parse(localStorage.getItem('daysmatter'))
        daysmatter.push(matterObj)
        localStorage.setItem('daysmatter', JSON.stringify(daysmatter))
        matterCommon()
        matterAdd.style.display = 'none'
        mattereventValue.value = ''
        matterDate.value = ''
        window.location.reload()
      }
    })

    //全部删除本地存储数据
    const clearAll = document.querySelector('#clearAll')
    const clearbox = document.querySelector('.clearbox')
    const clearF = document.querySelector('.clearbox .clearF')
    const clearT = document.querySelector('.clearbox .clearT')
    const clearNull = document.querySelector('.clearNull')
    const nullEsc = document.querySelector('.clearNull .nullEsc')
    let cleartime = 10
    let cleardata = 0
    clearAll.addEventListener('click', () => {
      daysmatter = JSON.parse(localStorage.getItem('daysmatter'))
      if (daysmatter.length == 0) {
        clearNull.style.display = 'block'
        nullEsc.addEventListener('click', () => {
          clearNull.style.display = 'none'
        })
      } else {
        clearbox.style.display = 'block'
        clearT.style.pointerEvents = 'none'
        clearTimeout(cleardata)
        cleardata = setInterval(() => {
          cleartime--
          clearT.innerHTML = `确定(${cleartime})`
          if (cleartime < 0) {
            clearTimeout(cleardata)
            clearT.innerHTML = '确定'
            clearT.disabled = false
            clearT.style.pointerEvents = 'auto'
          }
        }, 1000)
        clearF.addEventListener('click', () => {
          clearbox.style.display = 'none'
          cleartime = 10
          clearT.innerHTML = '确定(10)'
          clearTimeout(cleardata)
        })
        clearT.addEventListener('click', () => {
          localStorage.clear()
          clearbox.style.display = 'none'
          cleartime = 10
          clearT.innerHTML = '确定(10)'
          clearTimeout(cleardata)
          window.location.reload()
        })
      }
    })

总结

以上为本案例所有内容，本案例是从作者个人创作案例中分离出来的子功能模块，js代码部分未做代码精简优化，案例仅供参考交流学习。

No.ever.
关注
  • 41
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html倒计时小工具
09-29
canvas绘制的炫酷倒计时工具，可以自定义倒计时分钟数。
倒数日及日程管理Android版本
12-05
【倒数日及日程管理Android版本】是一款专为Android用户设计的应用程序，它整合了倒数日提醒和日程管理两大核心功能，旨在帮助用户更有效地规划和追踪生活中的重要事件。这款应用具备以下几个关键知识点： 1. **...
浏览器网页小工具----计时器
一学就会小小王的博客
09-20 2206
一个小小的计时器，按秒计时，点击开始开始计时，点击停止，则停止计时，点击复位，则重置计时器并停止计时。
js网页倒计时功能（天，时，分，秒）
weixin_30785593的博客
07-29 529
给定任何一个时间，然后实现现在到那个时间的倒计时。 下面的例子是显示现在到2019年8月1号0时0分的倒计时： <div class="list"> <span id='day'></span>天 <span id='hours'></span>时 <span...
daysmatter安卓版_倒数日daysmatter软件下载-倒数日days matter安卓版软件 v0.6.7-乖乖手游网...
weixin_39578867的博客
12-20 490
倒数日daysmatter软件是一款非常好用的记录工具，他能帮助你很好的进行记录时间，在关键时刻还能提醒你，让你不错过每一个重要的节日，在忙碌的生活中，我们总会有遗忘，但是有了它就会不一样了，你会发现他简直就是你的智能小助手，随时随地都能按照你的设定来提醒你。软件优势：1.支持添加桌面挂件2.重要日期醒目置顶支持，支持时间远近排序3.历史上的今天与明天4.三种默认分类：纪念日、工作、生活，支持自定...
daysmatter安卓版_倒数日days matter下载-倒数日days 安卓版v1.0.2-PC6安卓网
weixin_39616477的博客
12-20 1015
倒数日daysmatter软件是一款方便的倒数日记时软件，倒数日daysmatter安卓版美观大气，用户可以在倒数日days添加重要的日期，倒数日day会为你进行倒数日提醒，不让你错过重要的日子。软件介绍倒数日days是一款日历倒计时提醒软件，到数日包含日历、时间规划、倒计时、倒数日、纪念日、恋爱记、计时器、提醒事项，还有考试倒计时、记忆日、日期计算器、生日提醒，帮您记录生活中重要的日子，主要以文...
android 日倒计时计算器,Days Matter倒数日app下载安装
weixin_42476888的博客
05-27 886
Days Matter倒数日app下载安装介绍「倒数日 · Days Matter」是一个帮你记录生活中重要日子的小工具，例如:恋人生日还有多少天?还信用卡还有多少天?发工资还有多少天?宝宝出生已经多少天?距离世界末日还有多少天……有了倒数计日小工具，您将不再错过下个生日、周年纪念、考试或棒球比赛。 倒数计日会提醒生活中的要事，您无须劳心计算剩馀的天数。我们专为Android手机和平板精心打造，以...
daysmatter安卓版_days matter最新版下载-Days Matter倒数日软件下载v2.2.1 安卓版-单机手游网...
weixin_39625563的博客
12-20 961
days matter倒数日软件上面是可以记录一些重要的东西的，比如说生日、还有一些比较重要的会议等，然后到时间后就会提醒你，这样你就不会忘记了啊，还挺好用的，简单有效的时间管理软件。days matter最新版介绍帮你记录生日、纪念日、倒数日、恋爱纪念日、结婚纪念日、正数日、高考倒计时、大姨妈周期、记忆日、经期记录、日程计划提醒、时间规划、恋爱中重要日子的倒计时和计时器小助手。days matt...
daysmatter安卓版_days matter
weixin_39915267的博客
12-20 386
days matter是一款非常好用的日程计划管理软件，它支持多种及时方式，正数日、倒数日，都可以快速设置所需要记录的内容，如果设置了提醒功能，它就会在手机主页上提醒，非常方便。该软件可以让我们的生活更有规划，更加充实，喜欢的朋友们快来下载使用吧！days matter功能解锁了密码保护功能。去除首次使用的导航页。去广告。days matter特色事件支持高级重复，可设置每 X 周月年日的事件重复...
daysmatter安卓版_days matter安卓版
weixin_39968640的博客
12-20 782
days matter是一款非常具有意义价值的日历软件，其中文名为倒数日，正如其名所言，帮助每位用户记录每一个即将来临的日期。在首页中，app为用户带来了全部、纪念日、工作、生活共四个内容块。其中全部界面显示的是新年的倒数时间，还有软件推出时间，目前已有三千三百三十天，由2011年正式推出。其他界面大部分是空白的，因为各种事项都需要用户手动添加上去，比如与女朋友在一起的纪念日，孩子出生的纪念日，成...
倒数日与日程管理Window版本
12-04
在Windows平台上，倒数日与日程管理工具的使用对于个人和团队的效率提升具有重要意义。这类工具通常提供直观的用户界面，以便用户轻松跟踪重要日期、设定提醒以及规划日常任务。"倒数日与日程管理Window版本"是专为...
微信小程序--倒数日和天气预报
06-04
在这个名为"微信小程序--倒数日和天气预报"的项目中，开发者结合了倒数日功能和实时天气预报，为用户提供了一种便捷的生活助手。 倒数日功能通常用于记录重要的日期，如生日、纪念日或者特定事件的来临，用户可以...
手机倒数日
05-28
手机倒数日app，能够记录时间还有多少天以及各种节日的计算。
倒数日计算 计算今天到未来某一天共有多少天
05-26
在IT领域，倒数日计算是一种常见的需求，例如在纪念日、生日或者重要事件的提醒中。本项目是一个由C#编程语言实现的倒数日计算工具，它能够帮助用户计算从当前日期到未来特定日期的天数，同时也能反向计算过去某一天...
daysmatter安卓版_倒数日DaysMatter
weixin_39603397的博客
12-20 558
倒数日DaysMatter是一款帮助记录人生重要日子的小工具软件。软件不仅有助于记录重要日期，进行智能通知，还可以在不同的日子设置不同的通知方式，设置不同的主题等，设置不同的通知方式。同时，数天的应用程序下载支持农历、日期计算、万年历等，通过很多细心的小功能，在关键时刻不会出错，看起来很有意义。倒数日DaysMatter特色1、进入反软件几天的主界面，界面分为上下两部分，上半部分显示重要日子的细节...
Python爬虫技术 第14节 HTML结构解析
hummhumm的专栏
07-25 1155
HTML 结构解析是 Web 爬虫中的核心技能之一，它允许你从网页中提取所需的信息。Python 提供了几种流行的库来帮助进行 HTML 解析，其中最常用的是和lxml。
Vue3中的pinia的使用及组合写法与普通写法的区别
最新发布
m0_62626838的博客
07-30 210
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 274
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
用js实现倒数日的代码
05-28
以下是用 JavaScript 实现倒数日的代码： ```javascript // 目标日期（示例为2022年元旦） const targetDate = new Date("2022-01-01T00:00:00"); // 获取倒数日信息的函数 function getCountdown() { // 当前日期 const currentDate = new Date(); // 计算时间差（单位：毫秒） const timeDiff = targetDate.getTime() - currentDate.getTime(); // 判断是否已过期 if (timeDiff < 0) { return "已过期"; } // 计算剩余天数、小时数、分钟数、秒数 const days = Math.floor(timeDiff / (24 * 60 * 60 * 1000)); const hours = Math.floor((timeDiff / (60 * 60 * 1000)) % 24); const minutes = Math.floor((timeDiff / (60 * 1000)) % 60); const seconds = Math.floor((timeDiff / 1000) % 60); // 返回倒数日信息 return `${days}天${hours}小时${minutes}分钟${seconds}秒`; } // 每隔1秒更新一次倒数日信息 setInterval(() => { const countdown = getCountdown(); console.log(countdown); }, 1000); ``` 该代码通过 `getCountdown` 函数计算目标日期与当前日期的时间差，进而计算出剩余天数、小时数、分钟数、秒数。然后通过 `setInterval` 函数每隔1秒更新一次倒数日信息。你可以将目标日期修改为任何你想要的日期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值