使用HTML/CSS/JS做一个恋爱计时小挂件

openjq

HTML代码

<html>
<link rel="stylesheet" href="你的样式文件名">
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-3 position-relative right d-none d-md-block">
                    <div class="sidebar-box couple"> <img class="pic" src="https://www.openjq.com/data/attachment/forum/202301/12/20170522_181739545.jpg" alt="博主"><img
                         class="couple-love" src="https://www.openjq.com/data/attachment/forum/202301/12/2023.01.13_love.jpg" alt="爱心"> <img class="pic" src="https://www.openjq.com/data/attachment/forum/202301/12/20170522_181907545.jpg"
                         alt="另一半">
                        <div id="our-company" data-start="2019-11-26"></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="你的JS文件名"></script>
        <script type="text/javascript" src="https://www.openjq.com/data/attachment/forum/202301/12/js/love_1.js"></script>
        <script>
        lanstar.init();
        </script>
        <script>
        lanstar.addCoupleTime();
        </script>
    </body>
</html>

CSS样式

.icon {
              width: 3em;
              height: 3em;
              vertical-align: middle;
              fill: currentColor;
              overflow: hidden;
            }
            
            @media screen and (max-width: 576px)  {
            
              .nav-search-btn {
                right: 0!important;
              }
            }
            .couple {
              text-align: center;
            }
            
            .info .pic,.couple .pic {
              border-radius: 50%;
              width: 5rem;
              background: #fff;
              padding: 2px;
            }
            
            .couple-love {
              width: 35px;
              margin: 20px 0;
              animation: heartbeat 1.33s ease-in-out infinite;
            }
            
            @keyframes heartbeat {
              0% {
                -webkit-transform: scale(1);
                transform: scale(1)
              }
              50% {
                -webkit-transform: scale(.8);
                transform: scale(.8)
              }
              to {
                -webkit-transform: scale(1);
                transform: scale(1)
              }
            }
            #our-company {
              text-align: center;
                font-size: 1.1rem;
            /*  color: #7d7474;
              background: aliceblue; */
              width: 100%;
              border-radius: 4px;
              padding: 0.5rem 0;
              user-select: none;
            }
            #our-company span {
              margin: 0 .25rem;
              vertical-align: middle;
            }

JS源码

eval(function (p, a, c, k, e, r) {
  e = function (c) {
    return c.toString(a)
  };
  if (!''.replace(/^/, String)) {
    while (c--) r[e(c)] = k[c] || e(c);
    k = [function (e) {
      return r[e]
    }];
    e = function () {
      return '\\w+'
    };
    c = 1
  }
  ;
  while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
  return p
}('a.f(\' %c 9 1 %c b://d.e/8/1\',\'2:#3;4:#5;6:7 0\',\'2:#5;4:#3;6:7\');', 16, 16, '|lanstar|color|444|background|eee|padding|5px|dyedd|Theme|console|https||github|com|log'.split('|'), 0, {}));


let lanstar = {
  init: function () {
    this.addCommentInit()
    this.addSearchEvent()
    this.addDarkMode()
    this.addMobileSwitch()
    this.addScroll()
    this.addArticleLike();
    this.addProcess();
    this.addInitTabs();
    this.addInitCollapse();
    this.addCarouselEnter();
    this.addMorePages();
    this.addEmoji()
    this.addHighLight();
    this.addComment();
    this.addPageLike();
    this.addArchiveToggle()
    this.addPostProtect();
    this.addCommentSecret();
  },
    addCoupleTime: () => {
    function secondToDate(second) {
      if (!second) {
        return 0;
      }
      const time = [0, 0, 0, 0, 0];
      if (second >= 365 * 24 * 3600) {
        time[0] = parseInt(second / (365 * 24 * 3600));
        second %= 365 * 24 * 3600;
      }
      if (second >= 24 * 3600) {
        time[1] = parseInt(second / (24 * 3600));
        second %= 24 * 3600;
      }
      if (second >= 3600) {
        time[2] = parseInt(second / 3600);
        second %= 3600;
      }
      if (second >= 60) {
        time[3] = parseInt(second / 60);
        second %= 60;
      }
      if (second > 0) {
        time[4] = second;
      }
      return time;
    }

    function setTime() {
      const startTime = document.getElementById('our-company').getAttribute('data-start');
      let create_time = Math.round(new Date(startTime).getTime() / 1000);
      let timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
      let currentTime = secondToDate((timestamp - create_time));
      document.getElementById('our-company').innerHTML = '<span>' + currentTime[0] + '</span>' + '<svg class="icon" aria-hidden="true">\n' +
        '<use xlink:href="#icon-huaban"></use>' +
        '</svg><span>' + currentTime[1] + '</span><svg class="icon" aria-hidden="true">' +
        '<use xlink:href="#icon-tian"></use>' +
        '</svg><span>'
        + currentTime[2] + '</span><svg class="icon" aria-hidden="true">' +
        '<use xlink:href="#icon-shi"></use>' +
        '</svg><span>' + currentTime[3] + '</span><svg class="icon" aria-hidden="true">' +
        '<use xlink:href="#icon-fen"></use>' +
        '</svg><span>' + currentTime[4]
        + '</span><svg class="icon" aria-hidden="true">' +
        '<use xlink:href="#icon-miao"></use>' +
        '</svg>';
    }

    setInterval(setTime, 1000);
  },


}

注意：以上代码中加载了本站的图片和JS文件，，如需要请自行下载到本地，，本站以开启了防盗功能不支持本地链接加载！

点击查看效果演示

[Html/CSS] 使用HTML/CSS/JS做一个恋爱计时小挂件

openjq LV9