一些基本功能的实现

Posted 2020-12-13 shine1234

 // 改变背景色

var text = document.getElementsByClassName(‘text‘)[0];
        var tit = document.getElementsByTagName(‘h2‘)[0];
        var oSpan = document.getElementsByClassName(‘oSpan‘);
        var len = oSpan.length;
        function getCol(cole, bj, a) {
            for (var i = 0; i < len; i++) {
                oSpan[i].style.border = ‘none‘;
            }
            if (cole == ‘#000‘) {
                text.style.color = ‘#999‘;
                tit.style.color = ‘#999‘;
            } else {
                text.style.color = ‘#535353‘;
                tit.style.color = ‘#535353‘;
            }
            document.body.style.background = cole;
            a.style.border = ‘1px solid‘ + bj;
        }

// 改变字体大小

 var size = $(‘.text‘).css(‘font-size‘);
        var cssHeight = $(‘.text‘).css(‘line-height‘);;
        var unit = size.slice(-2);
        var fontSize = parseFloat(size);
        var lineHeight = parseFloat(cssHeight);
        $(‘#plus‘).click(function () {
            if (fontSize >= 35) {
                return false;
            } else {
                fontSize = fontSize + 2;
                lineHeight = lineHeight + 2;
                $(".text").css(‘font-size‘, fontSize + unit);
                $(".text").css(‘line-height‘, lineHeight + unit);
            }
        })
        $(‘#reduce‘).click(function () {
            console.log(fontSize);
            if (fontSize <= 12) {
                return false;
            } else {
                fontSize = fontSize - 2;
                lineHeight = lineHeight - 2;
                $(".text").css(‘font-size‘, fontSize + unit);
                $(".text").css(‘line-height‘, lineHeight + unit);
            }
        })

//字体大小

$("#large").click(function () {
            $(".content .text").css("font-size", 26);
            $("#large").addClass("active").siblings().removeClass("active");
        });
        $("#medium").click(function () {
            $(".content .text").css("font-size", 22);
            $("#medium").addClass("active").siblings().removeClass("active");
        });
        $("#small").click(function () {
            $(".content .text").css("font-size", 16);
            $("#small").addClass("active").siblings().removeClass("active");
        })

 //护眼

 $("#protect").click(function () {
            $(".content").removeClass("n_bg");
            $(".chapters").removeClass("n_bg");
            $(".content").toggleClass("eye");
            $(".chapters").toggleClass("eye");
            $("#protect").toggleClass("active");
            $("#protect").addClass("active").siblings().removeClass("active");
        })

//开灯

 $("#off").click(function () {
            $(".content").removeClass("eye");
            $(".chapters").removeClass("eye");
            $(".content").toggleClass("n_bg");
            $(".chapters").toggleClass("n_bg");
            $("#off").siblings().removeClass("active");
            var btnText = $("#off").text();
            if (btnText == "关灯") {
                $("#off").text("开灯");
            } else {
                $("#off").text("关灯");
                $(".content").removeClass("n_bg");
                $(".chapters").removeClass("n_bg");
                $(".content").removeClass("eye");
                $(".chapters").removeClass("eye");
            }
        })

//返回到顶部

$(".top").hide();
        $(document).scroll(function () {
            var tHeight = $(document).scrollTop();
            if(tHeight > 150){
                $(".top").fadeIn(500);
            }else{
                $(".top").fadeOut(500);
            }
        });
        $(".top").click(function () {
            $(‘body,html‘).animate({scrollTop:0},300);
        });

// 左侧导航栏

$(function () {
    $(‘aside.slide-wrapper‘).on(‘touchstart‘, ‘li‘, function (e) {
        $(this).addClass(‘current‘).siblings(‘li‘).removeClass(‘current‘);
    });

    $(‘a.slide-menu‘).on(‘click‘, function (e) {
        var wh = $(‘div.wrapperhove‘ + ‘rtree‘).height();
        // console.log(wh);
        $(‘div.slide-mask‘).show();
        $(‘aside.slide-wrapper‘).css(‘height‘, wh).addClass(‘moved‘);
    });

    $(‘div.slide-mask‘).on(‘click‘, function () {
        $(‘div.slide-mask‘).hide();
        $(‘aside.slide-wrapper‘).removeClass(‘moved‘);
    });
});