网站前端常用js效果整理【持续更新】

整理一些网站上常用到的js整理，原生js和jq的方法都有，大家用时自行判别

1. 判断页面加载是否完成

document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法.  
function loadingChange() {
    if (document.readyState == "complete") { //当页面加载状态为完全结束时进入   
        $(".loading").hide();//当页面加载完成后将loading页隐藏  
        window.location.href = "http://www.baidu.com";
    }
}

2. 禁止鼠标右键

$(document).ready(function () {
    $(document).on("contextmenu", function (e) {
        return false;
    });
});

3. 返回顶部

$('.top').hide();
$(window).scroll(function () {
    if ($(window).scrollTop() >= 100) {
        $('.top').fadeIn(300);
    } else { $('.top').fadeOut(300); }
});
$('.top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); });

4.点击锚点移动到对应的位置

$(".aa").click(function (event) {
    event.preventDefault(); //取消事件的默认动作。
    $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 800);
});

5.判断是否是ie浏览器

function isIE() { //ie?    
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
    } else {return false; }
}

6.进入全屏

function launchFullscreen(element) {
if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("id")); //某个元素进入全屏

7.退出全屏

function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
  } else if (document.msExitFullscreen) {
document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
  }
}

exitFullscreen();

8.全屏事件

document.addEventListener("fullscreenchange", function (e) {
if (document.fullscreenElement) {
console.log("进入全屏");
  } else {
console.log("退出全屏");
  }
});

9.tab切换

//tab切换js
function tabs(tabTit,on,tabCon){
    $(tabCon).children().eq(0).show().siblings().hide();
    $(tabTit).children().hover(function(){
        $(this).addClass(on).siblings().removeClass(on);
        var index = $(tabTit).children().index(this);
        $(tabCon).children().eq(index).show().siblings().hide();
    });
}
tabs(".tab-hd","active",".tab-bd");

10.获取当前时间

function calculateDate(){
    var date = new Date();
    var Month = date.getMonth()+1;
    if(Month<10){
        var Month = "0"+(date.getMonth()+1);
    }else{
        return true;
    }
    var weeks = ["日","一","二","三","四","五","六"];
    return date.getFullYear()+"年"+Month+"月"+date.getDate()+"日 星期"+weeks[date.getDay()];
}
document.getElementById('datetime').innerHTML = calculateDate();