昨天在给主题配色的时候弄了一下背景色,但是我设置了一个昼夜模式(6-18点为白天),于是我就给黑夜页面也换了背景色,白天背景色再自动换回来。
嗯,,这是个死方法就是判断时间来使用相应时间的颜色。

演示(本站)

{cat_gallery}
黑夜模式
白天模式
{/cat_gallery}

使用(以sunny主题为例)

喵喵将sunny对自动昼夜设置的为6-18点为白天,我们这里也是同样,你可以根据实际调整时间段。
1.在主题后台设置添加自定义css
{cat_hide}

    /* 白天颜色 */
body.day {
    background-color: #ffffff;
}
/* 夜晚颜色 */
body.night {
    background-color: #000000;
}

{/cat_hide}

2.在主题后台设置添加自定义js
{cat_hide}

var currentHour = new Date().getHours();
if (currentHour >= 6 && currentHour < 18) {
    document.body.classList.add('day');
} else {
    document.body.classList.add('night');
}

{/cat_hide}

{cat_tips_info color=""}给自己的站点增添点小乐趣 ~ ~{/cat_tips_info}

演示

  1. 本站导航栏 ➜ 其他 ➜ 视频
  2. 图片演示

代码

{cat_hide}

<!DOCTYPE html>
<html>
<head>
<title>小姐姐视频</title>
<meta charset="utf-8">
</head>
<body>
<div style="display: flex; justify-content: center;">
    <div style="display: flex; flex-direction: column; justify-content: flex-start;">
        <button onclick="playRandomVideo()">随机播放</button>
        <p>首次打开本页面<br>请单击<br>上方按钮~</p>
    </div>
    <div style="display: flex; justify-content: center;">
        <?php
            $api_url = 'your_API';
            $video = file_get_contents($api_url);
            echo "<video width='640' height='360' src='$video' controls autoplay></video>";
        ?>
    </div>
</div>
<style>
    video {
        max-width: 100%;
        max-height: 100%;
    }
    button {
        font-size: 18px;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #333;
        color: #fff;
    }
    button:hover {
        background-color: #666;
    }
</style>
<script>
    var video = document.getElementsByTagName('video')[0];
    var isContinuous = true;
    video.addEventListener('ended', function() {
        if (isContinuous) {
            video.src = '<?php echo $api_url; ?>';
            video.play();
        }
    });
    
    function playRandomVideo() {
        video.src = '<?php echo $api_url; ?>';
        video.play();
    }
</script>
</body>
</html>

{/cat_hide}

使用

将代码中的{cat_copy text="your_API"}更换成自己将要使用的API即可!

更新

2024/1/28:<div style="display: flex; justify-content: center; margin-bottom: 20px;">段增加margin-bottom: 20px;让视频下方有点距离感。