清爽夏日，送你一款简约精美【日期+一言】小工具[小工具]

1 月 25, 2023

—

由

前言

我制作工具的宗旨是“做得越简单越好”，哈哈哈~~~，用过我写的小工具的伙伴都知道，我写小工具一般都采用HTML/JS/CSS来写，能不用后端语言就不用（主要是不太会，嘿嘿嘿）。【日期+一言】工具主要由ajax调用别人家的毒鸡汤——一言API（主要懒得写PHP代码和去网上找句子了，自己可以用自己的一言API，记得改相关代码就行），非常的简单实用。

在这清爽的夏日给你来一款粉色背景图的【日期+一言】HTML小工具，给你带来不一样的粉色心情。

食用教程

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]

HTML小工具没啥好说的，自己打开【网站后台】-【外观】-【小工具】-【自定义HTML】，放在侧边栏就OK了。把下面的代码放进去就大功告成啦！（不会的自己琢磨，太笨就算了）

<style>
  .wiui-rqyy-demo {
    width: 100%;
    height: 180px;
    position: relative;
  }

  .wiui-rqyy-item {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    background-image: url(https://img.wiiuii.cn/rqyy-imgs/rqyy-bg-5.png);
  }

  .wiui-rqyy-date {
    font-family: Arial, Helvetica, sans-serif;
  }

  .wiui-rqyy-day {
    font-size: 2.5rem;
    font-weight: 700;
  }

  .wiui-rqyy-month {
    font-weight: 700;
    font-size: 2rem;
  }

  .wiui-rqyy-month::before {
    content: "/";
    padding-right: 2px;
  }

  .wiui-rqyy-text {
    position: absolute;
    width: 90%;
    height: auto;
    line-height: 30px;
    font-family: "宋体";
    font-size: 1.5rem;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .wiiui-rqyy-yy::after {
    display: inline-block;
    content: "_";
    animation: fadeInHX 1s;
    animation-iteration-count: infinite;
  }

  @keyframes fadeInHX {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .wiui-rqyy-btn {
    display: inline-block;
    font-family: "新宋体";
    font-weight: 700;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 10px;
  }

  #wiui-yybtn {
    width: 100%;
    position: relative;
  }

  #wiui-yybtn:hover {
    color: #e99896;
  }

  #wiui-yybtn:hover > .wiui-rqyy-msg {
    visibility: unset;
  }

  .wiui-rqyy-icon {
    font-size: 18px;
  }

  .wiui-rqyy-msg {
    visibility: hidden;
    font-size: 10px;
    color: #9784a0;
    position: absolute;
    padding: 5px;
    top: -5px;
    left: -60px;
    border-radius: 2px;
    background: white;
    transition: all 0.2s;
  }

  .wiui-rqyy-msg::after {
    content: " ";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: white;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
    border-radius: 2px;
  }
</style>
<div class="wiui-rqyy-demo">
  <div class="wiui-rqyy-item">
    <div class="wiui-rqyy-date">
      <span class="wiui-rqyy-day">-</span>
      <span class="wiui-rqyy-month">-</span>
    </div>
    <div class="wiui-rqyy-text">
      <span class="wiiui-rqyy-yy">加载中...</span>
    </div>
    <div class="wiui-rqyy-btn">
      <div id="wiui-yybtn">
        <span class="wiui-rqyy-msg">换一句</span>
        <i class="fa fa-dot-circle-o wiui-rqyy-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    var myDate = new Date();
    var mon = myDate.getMonth() + 1;
    var day = myDate.getDate();
    var newMon = mon < 10 ? "0" + mon : mon;
    var newDay = day < 10 ? "0" + day : day;
    var rqyyLock = true;
    var randRYY = parseInt(Math.random() * 10);
    $(".wiui-rqyy-item").css(
      "background-image",
      "url(https://img.wiiuii.cn/rqyy-imgs/rqyy-bg-" + randRYY + ".png)"
    );
    $(".wiui-rqyy-day").html(newDay);
    $(".wiui-rqyy-month").html(newMon);
    $.extend({
      yyAjax: function () {
        $.ajax({
          // 链接
          url: "https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json",
          // 请求方法
          type: "GET",
          // 成功返回
          dataType: "json",
          success: function (e) {
            rqyyLock = false;
            var yiyanList = e.text.split("");
            var newYY = "";
            var yyIndex = 0;
            var timer = setInterval(function () {
              newYY += yiyanList[yyIndex];
              yyIndex++;
              if (yyIndex >= yiyanList.length) {
                clearInterval(timer);
                rqyyLock = true;
              }
              $(".wiiui-rqyy-yy").html(newYY);
            }, 150);
          }
        });
      }
    });
    $.yyAjax();
    $("#wiui-yybtn").click(function () {
      if (!rqyyLock) return;
      $.yyAjax();
    });
  });
  $(".wiui-rqyy-demo").parent().parent().css({
    padding: "0",
    overflow: "hidden"
  });
</script>

提示：自己有代码基础的小伙伴，自己可以修改或者完善一下代码。

[/hidecontent]