网站美化-侧边栏随机一言[网站美化]

温馨提示:本文最后更新于2024-09-17 09:33:15,某些文章具有时效性,若有错误或已失效,请联系星雨站长

前言

原创是星语的小木屋,不过因为站长已经关站了,所以某些内容也就失效了,今天把这个模块重新整理优化了一下,需要的自取!

演示效果

d2b5ca33bd20240822190946

部署教程

HTML代码

<div class="wiui-rqyy-demo">
    <div class="wiui-rqyy-item">
        <!-- 星雨 -->
        <div class="wiui-rqyy-date">
            <span class="wiui-rqyy-day">12</span>
            <span class="wiui-rqyy-month">03</span>
        </div>
        <!-- wniui.com -->
        <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>
<!-- wniui.com -->
<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-demo").css("background-image", "url(https://www.wniui.com/wp-content/uploads/2024/08/e445ceae7220240822184200.webp"); $(".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>
© 版权声明
THE END
喜欢就支持一下吧!
点赞19赞赏 分享