js及jquery常用代码

1、获取屏幕尺寸

document.documentElement.scrollWidth;
document.documentElement.scrollHeight;
$(window).width();
$(window).height();

2、页面加载完成执行代码块及DOM加载完毕之后执行

$(document).ready(function(){
    //脚本
});

$().ready(function() {
    //脚本
})

$(function() {
    //脚本
})

3、页面分辨率改变后执行

window.onresize=function(){
    //脚本
}
$(window).resize(function(){
   //脚本
});

4、定时器

setInterval(, 0)

5、点击跳转页面

<li onclick="window.open('xxx.html','_self')"></li>

6、遍历所有td2类里的数值，根据数值大小改变数值颜色

for (var i = 0; i < $('.td2').length; i++) {
    var reference = $('.td2').eq(i).text();
    if (reference < 50) {
        $('.td2').eq(i).css({
            color: '#007DFF',
        });
    } else if (reference >= 50 && reference < 100) {
        $('.td2').eq(i).css({
            color: '#15C046',
        });
    }else if (reference >= 100 && reference < 200) {
        $('.td2').eq(i).css({
            color: '#FFC000',
        });
    } else {
        $('.td2').eq(i).css({
            color: '#FF0909',
        });
    }
}

7、返回顶部

$('.class').on('click',function(){
  $('body,html').animate({
    scrollTop: 0
  },500);
  return false;
})

8、判断某个标签是否含有某个类

$(this).hasClass('box-show')

9、隐藏多余的内容

// each遍历
$('.li-out').each(function() {
    var words = $(this).text().length;
        if (words > 96) {
            $(this).text($(this).text().slice(0, 96) + "...");
        }
});

10、获取当前时间自己写格式

var date = new Date;
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = (month < 10 ? "0" + month : month);
var day = date.getDate();
day = (day < 10 ? "0" + day : day);
var week_number = date.getDay();
var week;
switch (week_number) {
    case 0:
        week = "星期日";
        break;
    case 1:
        week = "星期一";
        break;
    case 2:
        week = "星期二";
        break;
    case 3:
        week = "星期三";
        break;
    case 4:
        week = "星期四";
        break;
    case 5:
        week = "星期五";
        break;
    case 6:
        week = "星期六";
        break;
}
$('.get_year').text(year);
$('.get_month').text(month);
$('.get_day').text(day);

11、点击空白区域下拉菜单收回

$("body").click(function(event) {
    if ($(event.target).parents(".select").length === 0) {
        $(".select ul").hide();
    }
});

12、阻止冒泡

even.stopPropagation()
//ie 阻止冒泡
even.cancelBubble = true

13、菜单切换

$('.top-li').click(function(event){
$(this).addClass('active').siblings().removeClass('active').parent().parent().next('.llnconter').children('.con-ul').eq($(this).index()).show().siblings('.con-ul').hide()
});

14、点击展开隐藏div

$('.class').click(function() {
    $(this).toggleClass('class');    //按钮变化效果
        $('.class').animate({    //需要隐藏展开的div
            width: 'toggle'
        }, 350)    //动画时间
}); 

15、echarts图表中在legend里带入数据和百分比占比

legend: {
    orient: 'vertical',
    right: 0 *scale,
    top: 30 *scale,
    height: 150 *scale,
    itemWidth: 9 * scale,
    itemHeight: 9 * scale,
    itemGap: 18 * scale,
    data: ['诊查1收入占比', '诊查2收入占比', '诊查3收入占比', '诊查4收入占比', '诊查5收入占比', '挂号1收入占比', '挂号2收入占比', '挂号3收入占比', '挂号4收入占比', '挂号5收入占比'],
    formatter: function (e) {
        var total = 0
        for (var i = 0; i < llnoption6.series[0].data.length; i++) {
        total += llnoption6.series[0].data[i].value
        }
        for (i = 0; i < llnoption6.series[0].data.length; i++) {
            var ePercent = (llnoption6.series[0].data[i].value / total * 100).toFixed(2) + '%'
            if (llnoption6.series[0].data[i].name === e) {
                return '{a|'+ e +'}{b| ￥'+ llnoption6.series[0].data[i].value + '}{c'+i+'| '+ ePercent +'}            '
            }
        }
    },
    textStyle:　{
        rich: {
            a: {
                color: '#999',
                fontSize: 12 * scale
            },
            b: {
                color: '#333',
                fontSize: 12 * scale
            },
            c0: {
                color: '#44ABFF',
            },
            c1: {
                color: '#31D1F7',
            },
            c2: {
                color: '#20C9C6',
            },
            c3: {
                color: '#3BDA97',
            },
            c4: {
                color: '#73DF6D',
            },
            c5: {
                color: '#D5DA37',
            },
            c6: {
                color: '#F6C541',
            },
            c7: {
                color: '#FE9C56',
            },
            c8: {
                color: '#F96A6A',
            },
            c9: {
                color: '#FB7AA2',
            },
        }
    }
},

legend

16、