右下角工具箱

• 展开隐藏，参考1，参考2
• 页面定制CSS代码

.d1{
    position: fixed;
    bottom: 10px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}

• 页首HTML代码

<div class='d1' id='div1' onclick='aclick()'><img src="https://pic.imgdb.cn/item/6590fe19c458853aeff43404.png" alt="展开" title="展开" /></div>
<div class='d1' id='div2' onclick='saclick()' style="display:none"><img src="https://pic.imgdb.cn/item/6591107dc458853aef386c54.png" alt="关闭"  title="关闭" /></div>

<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div2.style.display="none"; 
    div1.style.display=""; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
</script>

• 返回顶部，参考
• 页面定制CSS代码

.d3{
    position: fixed;
    bottom: 50px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}

• 页首HTML代码

<div class='d3' id='div3' style="display:none"><a href="#top"><img src="https://pic.imgdb.cn/item/65911142c458853aef3b3ef6.png" alt="回顶部"  title="回顶部" /></a></div>
<span id="top"></span>

<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div2.style.display="none"; 
    div1.style.display=""; 
    div3.style.display="none"; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
</script>

• 公告栏，参考1，参考2
• 页面定制CSS代码

.d4{
    position: fixed;
    bottom: 90px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
.dialog{
    background-color:white;
    position: fixed;
    top: 35%;
    left: 35%;
    width: 400px;
    height: 200px;
    border: 1px solid black;
    padding: 20px;
    display: none;
}

• 页首HTML代码

<div class='d4' id='div4' style="display:none"><img src="https://pic.imgdb.cn/item/65911fabc458853aef70d92d.png" alt="公告栏"  title="公告栏" /></div>
<div class="dialog">
    <button class="close1">关闭弹框</button>
</div>

<script type="text/javascript">
var div4 = document.getElementById('div4');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
    div4.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div2.style.display="none"; 
    div1.style.display=""; 
    div3.style.display="none"; 
    div4.style.display="none"; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}

const h = document.querySelector('.d4')
const Dialog = document.querySelector('.dialog')
const close1 = document.querySelector('.close1')
h.addEventListener('click', function(){
    Dialog.style.display = 'block'
})
close1.addEventListener('click', function(){
    Dialog.style.display = 'none'
})
/*点击对话框*/
Dialog.addEventListener('mousedown', function(e){
    //定义拖动函数(e是鼠标对象)
    function move(e){
        Dialog.style.top = e.pageY - 200 + 'px'
        Dialog.style.left = e.pageX - 200 + 'px'
    }
    //监听鼠标移动
    document.addEventListener('mousemove', move)
    //监听鼠标松开
    document.addEventListener('mouseup', function(){
        document.removeEventListener('mousemove', move)
    })
})
</script>

• 深色模式，参考
• 页面定制CSS代码

.d5{
    position: fixed;
    bottom: 130px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
body {
  background-color: white;
  color: black;
}
.dark-mode {
  background-color: black;
  color: white;
}

• 页首HTML代码

<div class='d5' id='div5' style="display:none" onclick="myFunction()"><img src="https://pic.imgdb.cn/item/65913099c458853aefac5f0f.png" alt="深色模式"  title="深色模式" /></div>

<script type="text/javascript">
var div5 = document.getElementById('div5');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
    div4.style.display=""; 
    div5.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div2.style.display="none"; 
    div1.style.display=""; 
    div3.style.display="none"; 
    div4.style.display="none"; 
    div5.style.display="none"; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>

• github
• 页面定制CSS代码

.d6{
    position: fixed;
    bottom: 170px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}

• 页首HTML代码

<div class='d6' id='div6' style="display:none"><a href="https://github.com/xxx"><img src="https://pic.imgdb.cn/item/65914586c458853aefef78bf.png" alt="github"  title="github" /></a></div>

<script type="text/javascript">
var div6 = document.getElementById('div6');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
    div4.style.display=""; 
    div5.style.display=""; 
    div6.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div2.style.display="none"; 
    div1.style.display=""; 
    div3.style.display="none"; 
    div4.style.display="none"; 
    div5.style.display="none"; 
    div6.style.display="none";
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
</script>

• bug

查看详情

• 侧边栏有文字时，点击效果不能使用，F12开发者模式下或鼠标划到下面空白区域才能点击
• 解决方案：将按钮放在最顶层，参考

<div class='d1' id='div1' onclick='aclick()' style="z-index:999"><img src="https://pic.imgdb.cn/item/6590fe19c458853aeff43404.png" alt="展开" title="展开" /></div>
<div class='d1' id='div2' onclick='saclick()' style="display:none;z-index:999"><img src="https://pic.imgdb.cn/item/6591107dc458853aef386c54.png" alt="关闭"  title="关闭" /></div>
<div class='d3' id='div3' style="display:none;z-index:999"><a href="#top"><img src="https://pic.imgdb.cn/item/65911142c458853aef3b3ef6.png" alt="回顶部"  title="回顶部" /></a></div>
<div class='d6' id='div6' style="display:none;z-index:999"><a href="https://github.com/xxx"><img src="https://pic.imgdb.cn/item/65914586c458853aefef78bf.png" alt="github"  title="github" /></a></div>