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

发表评论
19 °

A+

摘要

QQ截图20230113132245.jpg 下载附件 3 天前上传

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/https://www.openjq.com/data/attachment/forum/202301/12/20170522_181739545.jpg" alt="博主"><img                          class="couple-love" src="https://www.openjq.com/https://www.openjq.com/data/attachment/forum/202301/12/2023.01.13_love.jpg" alt="爱心"> <img class="pic" src="https://www.openjq.com/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/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文件，，如需要请自行下载到本地，，本站以开启了防盗功能不支持本地链接加载！

点击查看效果演示

本文档由 openjq 于 3 天前反删除