给博客底部添加悬浮按钮

想要弄个开关来控制页面背景，于是便有了右下角的那个悬浮按钮，目前只弄成了开关功能，以后想把它扩展成一个设置按钮
感谢2Broear大佬的帮助，实现了背景改变的时候淡入淡出了~
// TODO: 需要将用户设置存入localstorage，否则一切换页面又恢复了 ~~咕咕咕~~

html代码

html代码并没有直接写死到页面上，毕竟不可能一个一个页面改...emmm...所以这里给出的其实是目标html代码，实际上是用js加入这些元素的

<div class="tools-btns" title="开启/关闭背景">
    <div onclick="toggleBg()">
        <i class="fa fa-cog fa-spin fa-5x" aria-hidden="true"></i> 
    </div>
</div>

js代码

js写到了一个文件里，使用的时候引入这个文件即可。里面有两个方法，第一个是在页面加载的时候把上面的元素加到页面上，第二个就是用来控制背景的开关了
因为有三层元素，偷了个懒，没有document.createElement()三次，内层的直接给它加字符串了=。=

addToolsBtns(); //页面加载时直接执行
// 插入右下角按钮
function addToolsBtns() {
    var tools_btns = document.createElement("div");
    tools_btns.setAttribute("class", "tools-btns");
    tools_btns.setAttribute("title", "开启/关闭背景");
    document.getElementsByTagName("body")[0].appendChild(tools_btns);
    var innerHTMLStr = "<div onclick='toggleBg()'><i class='fa fa-cog fa-spin fa-5x' aria-hidden='true'</i> </div>";
    document.getElementsByClassName("tools-btns")[0].innerHTML = innerHTMLStr;
}
// 切换背景
function toggleBg() {
    var site_main = document.getElementById("main");
    if (site_main.className === "site-main") {
        site_main.className = "site-main no-bg";
    } else {
        site_main.className = "site-main";
    }
}

CSS代码

CSS就不用多说了，啊我的CSS好渣啊~~虽然js也差不多~~...调个位置大小啥的调了半天TAT...

.tools-btns {
  position: fixed;
  bottom: 40px;
  right: 40px;
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 0.6rem;
  /* color: #ffaa00;  橙 */
  color: #FB7299; /* 粉 */
  visibility: visible;
  z-index: 999;
}
.tools-btns > div {
    cursor: pointer;
    transition: all 0.5s;
    background: #6666;
    border-radius: 25px;
}
.site-main.no-bg::after {
    opacity:0!important;    
}

然后放一下压缩后的css

.tools-btns{position:fixed;bottom:40px;right:40px;height:40px;width:40px;text-align:center;font-size:0.6rem;color:#FB7299;visibility:visible;z-index:999;}.tools-btns>div{cursor:pointer;transition:all 0.5s;background:#6666;border-radius:25px;}.site-main.no-bg::after{opacity:0!important;}

突然好像明白了那些页面上的小插件都是怎么来了的捏~ 反正我就createElement加进来就是了~