<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(http://yuanma.yt3166.com/ymbg-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(http://yuanma.yt3166.com/ymbg-" + 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>