网站侧边栏小姐姐随机跳舞组件代码

在网站侧边添加一个小姐姐随机跳舞的可折叠组件，这个组件的特点是，当用户点击时，会随机播放小姐姐的舞蹈视频。这样的设计不仅可以增加网站的趣味性，也可以吸引更多的用户停留和浏览。

<section id="xiaojiejie">
			<div class="xiaojiejie">
					<style>
            #player { margin: 1px auto; max-width: 100%; border-radius: 10px; display:
            block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height:
            40px; border: none; background-color: #f95491; color: #fff; margin-top:
            1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition:
            0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp
            { width: 100%; display: flex; justify-content: space-between; } .kzsp>button
            { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color:
            #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer;
            } .kzsp>button:active { background-color: #e25a00; }
        </style>
					<button type="button" id="ckxjj">
							点我看小姐姐视频
					</button>
					<div id="xjjsp">
							<video id="player" src="http://v.nrzj.vip/video.php?_t=0.7043674648906169"
            controls="" alt="小姐姐视频">
							</video>
							<div class="kzsp">
									<button id="switch">
											连续: 开
									</button>
									<button id="next">
											下一个
									</button>
							</div>
							<button type="button" id="gbxjj">
									关闭视频
							</button>
					</div>
					<script>
            var player = document.getElementById('player');
            var bind = function(element, event, callback) {
                return element.addEventListener(event, callback);
            };
            var sp = 0;
            $(document).ready(function() {
                $('#ckxjj').click(() = >{
                    $('#ckxjj').hide();
                    $('#xjjsp').show();
                    if (sp == 0) {
                        randomm();
                        sp = null
                    }
                    player.onerror = () = >{
                        randomm()
                    }
                    player.play();
                });
                $('#gbxjj').click(() = >{
                    $('#ckxjj').show();
                    $('#xjjsp').hide();
                    player.pause();
                })
            });

            var get = function(id) {
                return document.getElementById(id);
            };

            var auto = true;
            // 生成播放视频
            function randomm() {
                player.src = 'http://v.nrzj.vip/video.php?_t=0.7043674648906169';
                player.play();
            };
            bind(get('next'), 'click', randomm);

            bind(get('switch'), 'click',
            function() {
                auto = !auto;
                this.innerText = '连续：' + (auto ? '开': '关');
            });
            bind(player, 'ended',
            function() {
                if (auto) randomm();
            });
            player.pause();
        </script>
			</div>
</section>

添加教程

以WordPress为例子，我们进入网站后台找到外观-小工具-自定义HTML，添加以下代码，如果不是WordPress，自己在想要的位置找到对应文件添加。