js-制作日历插件

34次阅读

共计 15957 个字符，预计需要花费 40 分钟才能阅读完成。

js 制作日历插件

本文主要为自己日常学习的 js 代码时参考编写的，主要是看了 vue 的 element 的 ui 库的日历插件后，想要学习与使用，就利用空余时间进行编写，文章有很多不足，麻烦指出，会努力改正

定义对象

首先创建当前对应的日期时间，以及创建三个数组：[‘ 星期数组 ’,’ 月份数组 ’,’ 每个月最后一天是几号 ’]；

var date = new Date(); // 创建日期对象
var nowYear = date.getFullYear(); // 获取当前年份
var nowMonth = date.getMonth() + 1; // 获取当前月份
var nowDay = date.getDate(); // 获取当前天
var splitString = "-"; // 年月日之间的分隔符
var weekDays = new Array("日", "一", "二", "三", "四", "五", "六"); // 星期数组
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); // 月份数组
var lastDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // 每个月的最后一天是几号

// 变量保存，存储当前选择的年月
var checkYear = nowYear;
var checkMonth = nowMonth;

显示控件，并且设置日历显示的位置

function showDate() {createDate(nowYear, nowMonth);// 创建日历
    // 计算显示控件位置
    /////// 获取当前输入框的位置，在实际操作中需要修改此处 ID
    var x = document.getElementById('txt_calendar').offsetLeft;
    var y = document.getElementById('txt_calendar').offsetTop + 22;
    document.getElementById('dateOuter').style.left = x + "px";
    document.getElementById('dateOuter').style.top = y + "px";
    document.getElementById('dateOuter').style.display = "";
}

渲染日历

// 日历最外层 div 样式
var outerStyle = "display: none;position: absolute;width: 314px;margin-top:10px;border: 1px solid #F7F7F7;border-radius: 5px;background-color: #F7F7F7;color: #4eccc4;padding-bottom: 20px;";
// 日历控件最外层 div
document.write('<div style="' + outerStyle + '"id="dateOuter"></div>')

1. 创建日历样式，创建当前日期，删除，上一月，下一月，选择年月按钮

function createDate(thisYear, thisMonth) {
    var createDoc = '<div style="height: 30px;">';
    // 当前年月日，点击此处日历自动跳到当前日期
    createDoc += '<p style="width: 100%;height: 30px;text-align: center;color: #999;"onclick="getThisDay()"> 当前日期' + nowYear + "年" + nowMonth + "月" + nowDay + "号";
    // 关闭日历显示
    createDoc += '<span id="closeDate"onClick="hidDate()"style="float: right;font-size: 25px;margin: -20px 3px 0 0;cursor: pointer;">×</span></p></div>';;
    createDoc += '<div style="margin-bottom: 8px;">';
    // 上一月
    createDoc += '<span id="lastMonth"onclick="lastMonthClick()"style="margin: 0 20px 0 25px;cursor:pointer;"><</span>';
    // 创建年份下拉框 [1900-2099] 年
    createDoc += '<select id ="selectYear"class="selectStyle"onchange="changeYearAndMonth()">';
    for(var i = 1900; i <= 2099; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
    createDoc += "</select> 年";
    // 创建月份下拉框
    createDoc += '<select id ="selectMonth"class="selectStyle"onchange="changeYearAndMonth()">';
    for(var i = 1; i <= 12; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
    createDoc += "</select> 月";
    // 下一月
    createDoc += '<span id="nextMonth"onClick="nextMonthClick()"style="float: right;margin-right: 25px;cursor:pointer;">></span></div>';
    // 创建星期
    createDoc += '<div class="everyWeekDay">';
    for(var i = 0; i < weekDays.length; i++) {if(weekDays[i] == "日" || weekDays[i] == "六") {createDoc += '<span class="weekday"style="color:red;">' + weekDays[i] + '</span>'
        } else {createDoc += '<span class="weekday">' + weekDays[i] + '</span>'
        }
    }
    createDoc += '</div>';

2. 创建每月天数：如果当前不是星期天，会自动创建空白位，修改优化后改为前一个月日期

createDoc += '<div class="everyDay"><div class="marginTop">'; // 日期样式 DIV
    var thisWeek = getThisWeekDay(thisYear, thisMonth, 1); // 算出当前年月 1 号是星期几
    /*
     * 如果当前不是星期天, 创建空白日期占位
     * 若是星期天，则循环输出当月天数
     * 待修改优化，后期改为变色的前一个月日期
     */
    if(thisWeek != 0) {for(var i = 0; i < thisWeek; i++) {createDoc += '<span class="days"></span>';}
    }
    // 循环输出当月天数
    //getThisMonthDay()获取当月天数
    for(var i = 1; i < getThisMonthDay(thisYear, thisMonth) + 1; i++) {if(thisYear==nowYear && thisMonth == nowMonth && i== nowDay){
            // 今天的显示
            if(getThisWeekDay(thisYear,thisMonth,i) == 6 || getThisWeekDay(thisYear,thisMonth,i) == 0){
                // 今天是周末
                createDoc+='<span onclick="setInput('+i+')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">'+i+'</span>';  
            }else{createDoc+='<span onClick="setInput('+i+')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">'+i+'</span>';  
            }  
        }else{  
             // 周末变为红色
            if(getThisWeekDay(thisYear,thisMonth,i)==6 || getThisWeekDay(thisYear,thisMonth,i)==0){createDoc+='<span id="weekends"onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="color:red;cursor:pointer;">'+i+'</span>';
            }else{createDoc+='<span onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="cursor:pointer;">'+i+'</span>';
            }
        }
        // 星期六换行
        if(getThisWeekDay(thisYear,thisMonth,i)==6){createDoc+="</tr>";}  
    }
    createDoc += '</div></div>';

监听事件

1. 跳转到当前日

// 跳转到当前日  
function getThisDay(){  
    checkYear = nowYear;
    checkMonth = nowMonth;
    createDate(checkYear,checkMonth);
}

2. 跳转上一个月

// 上一个月
function lastMonthClick(){
    // 若当前是 1 月份，年份减一，月份变为 12
    if(checkMonth == 1){
        checkYear = checkYear - 1;
        checkMonth = 12;
    }else{checkMonth = checkMonth - 1;}
    // 创建当前月份日期
    createDate(checkYear,checkMonth);
}

3. 跳转下一个月

// 下一月
function nextMonthClick(){
    // 若当前是 12 月份，年份加 1，月份变为 1
    if(checkMonth == 12){
        checkYear = checkYear + 1;
        checkMonth = 1;
    }else{checkMonth = checkMonth + 1;}
    // 创建当前月份日期
    createDate(checkYear,checkMonth);
}

4. 年月下拉框

function changeYearAndMonth(){checkYear = document.getElementById('selectYear').value;  
    checkMonth = document.getElementById('selectMonth').value;  
    createDate(checkYear,checkMonth);  
}

5. 判断是否为闰年（闰年可以被 4 整除且不能被 100 整除，或者能整除 400）

function isLeapYear(year) {
    var isLeap = false;
    if(0 == year % 4 && ((year % 100 != 0) || (year % 400 == 0))) {
        // 闰年可以被 4 整除且不能被 100 整除，或者能整除 400
        isLeap = true;
    }
    return isLeap;
}

6. 获取某月份的总天数

function getThisMonthDay(year, month) {var thisDayCount = lastDays[month - 1]; // 获取当前月份的天数
    if((month == 2) && isLeapYear(year)) {
        // 若当前月份为 2 月，并且是闰年，天数加 1
        thisDayCount++;
    }
    return thisDayCount;
}

7. 计算某天是星期几

function getThisWeekDay(year, month, date) {
    // 将年月日创建 Date 对象，返回当前星期几
    var thisDate = new Date(year, month - 1, date);
    return thisDate.getDay();}

8. 鼠标的移入移出

// 鼠标移进时
function mouseOver(obj){if(obj.id == "weekends"){
        // 若为周末，边框样式为红色
        obj.style.border="1px solid red"; 
    }else{obj.style.border="1px solid #4eccc4";}
}
// 鼠标移出时，边框恢复原色
function mouseOut(obj){obj.style.border="1px solid #F7F7F7";}

8. 关闭日历

function hidDate(){document.getElementById('dateOuter').style.display = "none";
}

9. 键盘操作，左右控制年份，空格返回当前月份

document.onkeydown=function(e){
    /*
     * 浏览器兼容性
     * ie 的 document 对象有一个 all 属性，它的里面存放了页面的所有标签，而其它浏览器是没有的，所以在 ie 中，事件对象的传播会绑定在全局的 windows 上，所以 ie 浏览器肯定是都支持 window.event
     * firefox 只支持事件对象作为参数传入，而这又恰恰是 ie6/ie7/ie8 所无法实现的，所以可以成功的区分这两类
     * ie9/chrome/opera/safari，则两种方式都支持
     * var e = event?event||window.event 可以保证各浏览器的兼容的
     */
    var thisEvent = e || window.event;  
    var keyCode = thisEvent.keyCode || thisEvent.which;  
    // 若控件是隐藏状态  
    if(document.getElementById('dateOuter').style.display == "none"){return false;}
    switch(keyCode){  
        case 32:// 空格，返回当前日期
        getThisDay();break;
        case 27://Esc，关闭日历插件
        hiddenCal();break;
        case 37://left，向左
        lastMonthClick();break;
        case 39://right，向右
        nextMonthClick();break;}
}

10. 模拟 windows7 日历 鼠标滑轮滚动翻页

主要火狐浏览器与其他内容浏览器不同点在于【e || window.event;】；

  • Firefox 接收 +3 和 -3
  • 其他浏览器接收 +120 和 -120
  • 其中 + 数表示鼠标向上滑动，- 数表示向下滑动
var direct;
var scrollFunc=function(e){
    // 浏览器兼容
    var thisEvent = e || window.event;
    //IE,Opera,Chrome,safari
    if(thisEvent.wheelDelta){direct = thisEvent.wheelDelta;}
    else if(thisEvent.detail){
        //Firefox
        direct = thisEvent.detail;
    }
    // 如果控件是隐藏状态
    if(document.getElementById('dateOuter').style.display == "none"){return false;}
    /*
     * Firefox 接收 +3 和 -3
     * 其他浏览器接收 +120 和 -120
     * 其中 + 数表示鼠标向上滑动，- 数表示向下滑动
    */
    // 向上滑动，调用上一个月
    if(direct=="120" || direct=="3"){lastMonthClick();
    // 向下滑动，调用下一个月
    }else if(direct=="-120" || direct=="-3"){nextMonthClick();
    }
}

注册监听事件

if(document.addEventListener){if(myBrowser() == "FF"){
        //Firefox,DOMMouseScroll 滚动事件只有 Firefox 适用
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }else{
        //Chrome,360,safari,Opera 适用 mousewheel 滚动事件
        document.addEventListener('mousewheel',scrollFunc,false);
    }
}else{
    // 兼容 IE，测试 IE8 可以兼容
    document.onmousewheel = scrollFunc;
}

// 判断浏览器类型
function myBrowser(){
    var userAgent = navigator.userAgent; // 取得浏览器的 userAgent 字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {return "Opera"}; // 判断是否 Opera 浏览器
    if (userAgent.indexOf("Firefox") > -1) {return "FF";} // 判断是否 Firefox 浏览器
    if (userAgent.indexOf("Chrome") > -1){return "Chrome";}
    if (userAgent.indexOf("Safari") > -1) {return "Safari";} // 判断是否 Safari 浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}; // 判断是否 IE 浏览器
    if (userAgent.indexOf("Trident") > -1) {return "Edge";} // 判断是否 Edge 浏览器
}

这个就是实现了日历插件的实现，但是未完成封装，后续会进行封装后在写一篇记录开发流程。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 日历显示 </title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .everyWeekDay .weekday, .everyDay .days { /* 解决 span 不支持 width 属性 */
        display: -moz-inline-box;
        display: inline-block;
        margin: 5px 0 0 20px;
        text-align: center;
        width: 20px;
        border: 1px solid #F7F7F7;
        cursor: pointer;
    }

    .marginTop {margin-top: 5px;}

    .selectStyle {
        padding-left: 10px;
        border: none;
        border-radius: 3px;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        margin: 0 10px 0 10px;
        width: 60px;
        border-color: #0FB9EF;
        color: #0FB9EF;
    }
</style>
<body>
<input type="text" id="txt_calendar"
       style="margin-left: 20px;margin-top: 20px;background-color: #cfcfcf;border: none;border-radius: 5px;height: 25px;padding-left: 10px;outline:none;"
       readonly="readonly" onfocus="showDate()"/>
</body>
<script type="text/javascript">
    /**
     * js 生成日历
     */
    var date = new Date(); // 创建日期对象
    var nowYear = date.getFullYear(); // 获得当前年份
    var nowMonth = date.getMonth() + 1; // 获得当前月份
    var nowDay = date.getDay(); // 当天
    var splitString = '-'; // 分隔符
    var weekDays = new Array('日','一','二','三','四','五','六'); // 星期数组
    var months = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');// 月份数组
    var lastDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // 每个月最后一天是几号


//  变量保存，存储当前选择的年月
    var checkYear = nowYear;
    var checkMonth = nowMonth;


//    将选择的日期添加到输入框
    function setInput(selectDay) {document.getElementById('txt_calendar').value = checkYear + splitString + checkMonth + splitString + selectDay;
    }

    // 显示控件
    function showDate() {createDate(nowYear,nowMonth); // 创建日历
        // 显示控制位置
        var x = document.getElementById('txt_calendar').offsetLeft;
        var y = document.getElementById('txt_calendar').offsetTop + 22;
        document.getElementById('dateOuter').style.left = x + "px";
        document.getElementById('dateOuter').style.top = y + "px";
        document.getElementById('dateOuter').style.display = "";
    }

    /**
     * 拼接日历框, 并且定位日历框
     */
//    最外层样式
    var outetStyle = 'display: none;position: absolute;width: 314px;margin-top:10px;border: 1px solid #F7F7F7;border-radius: 5px;background-color: #F7F7F7;color: #4eccc4;padding-bottom: 20px;';
//    日历外层
    document.write('<div style="'+ outetStyle+'"id="dateOuter"></div>');
//    创建日历样式
    function createDate(thisYear,thisMonth) {
        var createDoc = '<div style="height: 30px;">';
        // 当前年月日，点击此处日历自动跳到当前日期
        createDoc += '<p style="width: 100%;height: 30px;text-align: center;color: #999;"onclick="getThisDay()"> 当前日期' + nowYear + "年" + nowMonth + "月" + nowDay + "号";
        // 关闭日历显示
        createDoc += '<span id="closeDate"onClick="hidDate()"style="float: right;font-size: 25px;margin: -20px 3px 0 0;cursor: pointer;">×</span></p></div>';
        createDoc += '<div style="margin-bottom: 8px;">';

        // 上个月
        createDoc += '<span id="lastMonth"onclick="lastMonthClick()"style="margin: 0 20px 0 25px;cursor:pointer;"><</span>';
        // 创建年份下拉框 [1900-2099] 年
        createDoc += '<select id ="selectYear"class="selectStyle"onchange="changeYearAndMonth()">';
        for(var i = 1900; i <= 2099; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
        createDoc += "</select> 年";
        // 创建月份下拉框
        createDoc += '<select id ="selectMonth"class="selectStyle"onchange="changeYearAndMonth()">';
        for(var i = 1; i <= 12; i++) {createDoc += "<option value=" + i + ">" + i + "</option>";}
        createDoc += "</select> 月";
        // 下一月
        createDoc += '<span id="nextMonth"onClick="nextMonthClick()"style="float: right;margin-right: 25px;cursor:pointer;">></span></div>';
        // 创建星期
        createDoc += '<div class="everyWeekDay">';
        for(var i = 0; i < weekDays.length; i++) {if(weekDays[i] == "日" || weekDays[i] == "六") {createDoc += '<span class="weekday"style="color:red;">' + weekDays[i] + '</span>'
            } else {createDoc += '<span class="weekday">' + weekDays[i] + '</span>'
            }
        }
        createDoc += '</div>';
        // 创建每天天数
        createDoc += '<div class="everyDay"><div class="marginTop">'; // 日期样式 DIV
        var thisWeek = getThisWeekDay(thisYear, thisMonth, 1); // 算出当前年月 1 号是星期几
        /*
     * 如果当前不是星期天, 创建空白日期占位
     * 若是星期天，则循环输出当月天数
     * 待修改优化，后期改为变色的前一个月日期
     */
        if(thisWeek != 0) {for(var i = 0; i < thisWeek; i++) {createDoc += '<span class="days"></span>';}
        }

        // 循环输出当月天数
        //getThisMonthDay()获取当月天数
        for(var i = 1; i < getThisMonthDay(thisYear, thisMonth) + 1; i++) {if (thisYear == nowYear && thisMonth == nowMonth && i == nowDay) {if (getThisWeekDay(thisYear, thisMonth, i) == 6 || getThisWeekDay(thisYear, thisMonth, i) == 0) {
                    // 今天是周末
                    createDoc += '<span onclick="setInput('+ i +')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">' + i + '</span>';
                } else {createDoc += '<span onClick="setInput('+ i +')"class="days"style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">' + i + '</span>';
                }
            }else {
                // 周末变为红色
                if(getThisWeekDay(thisYear,thisMonth,i)==6 || getThisWeekDay(thisYear,thisMonth,i)==0){createDoc+='<span id="weekends"onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="color:red;cursor:pointer;">'+i+'</span>';
                }else{createDoc+='<span onClick="setInput('+i+')"class="days"onmouseover="mouseOver(this);"onmouseout="mouseOut(this)"style="cursor:pointer;">'+i+'</span>';
                }
            }
            // 星期六换行
            if(getThisWeekDay(thisYear,thisMonth,i)==6){createDoc+="</tr>";}
        }
        createDoc += '</div></div>';
        // 将创建好的控件字符串添加到 div 中
        document.getElementById('dateOuter').innerHTML = createDoc;
        // 默认选择当前年份
        document.getElementById('selectYear').value = thisYear;
        // 默认选择当前月
        document.getElementById('selectMonth').value = thisMonth;
    }

    // 跳转到当前日
    function getThisDay(){
        checkYear = nowYear;
        checkMonth = nowMonth;
        createDate(checkYear,checkMonth);
    }

    // 上一个月
    function lastMonthClick(){
        // 若当前是 1 月份，年份减一，月份变为 12
        if(checkMonth == 1){
            checkYear = checkYear - 1;
            checkMonth = 12;
        }else{checkMonth = checkMonth - 1;}
        // 创建当前月份日期
        createDate(checkYear,checkMonth);
    }

    // 下一月
    function nextMonthClick(){
        // 若当前是 12 月份，年份加 1，月份变为 1
        if(checkMonth == 12){
            checkYear = checkYear + 1;
            checkMonth = 1;
        }else{checkMonth = checkMonth + 1;}
        // 创建当前月份日期
        createDate(checkYear,checkMonth);
    }

    // 年月下拉框
    function changeYearAndMonth(){checkYear = document.getElementById('selectYear').value;
        checkMonth = document.getElementById('selectMonth').value;
        createDate(checkYear,checkMonth);
    }

    // 判断是否为闰年
    function isLeapYear(year) {
        var isLeap = false;
        if(0 == year % 4 && ((year % 100 != 0) || (year % 400 == 0))) {
            // 闰年可以被 4 整除且不能被 100 整除，或者能整除 400
            isLeap = true;
        }
        return isLeap;
    }

    // 获取某月份的总天数
    function getThisMonthDay(year, month) {var thisDayCount = lastDays[month - 1]; // 获取当前月份的天数
        if((month == 2) && isLeapYear(year)) {
            // 若当前月份为 2 月，并且是闰年，天数加 1
            thisDayCount++;
        }
        return thisDayCount;
    }

    // 计算某天是星期几
    function getThisWeekDay(year, month, date) {
        // 将年月日创建 Date 对象，返回当前星期几
        var thisDate = new Date(year, month - 1, date);
        return thisDate.getDay();}

    // 鼠标移进时
    function mouseOver(obj){if(obj.id == "weekends"){
            // 若为周末，边框样式为红色
            obj.style.border="1px solid red";
        }else{obj.style.border="1px solid #4eccc4";}
    }
    // 鼠标移出时，边框恢复原色
    function mouseOut(obj){obj.style.border="1px solid #F7F7F7";}

    // 关闭日期选择框
    function hidDate(){document.getElementById('dateOuter').style.display = "none";
    }

    // 控制键盘操作，左右控制月份，空格返回当前日期
    document.onkeydown=function(e){
        /*
         * 浏览器兼容性
         * ie 的 document 对象有一个 all 属性，它的里面存放了页面的所有标签，而其它浏览器是没有的，所以在 ie 中，事件对象的传播会绑定在全局的 windows 上，所以 ie 浏览器肯定是都支持 window.event
         * firefox 只支持事件对象作为参数传入，而这又恰恰是 ie6/ie7/ie8 所无法实现的，所以可以成功的区分这两类
         * ie9/chrome/opera/safari，则两种方式都支持
         * var e = event?event||window.event 可以保证各浏览器的兼容的
         */
        var thisEvent = e || window.event;
        var keyCode = thisEvent.keyCode || thisEvent.which;
        // 若控件是隐藏状态
        if(document.getElementById('dateOuter').style.display == "none"){return false;}
        switch(keyCode){
            case 32:// 空格，返回当前日期
                getThisDay();break;
            case 27://Esc，关闭日历插件
                hidDate();break;
            case 37://left，向左
                lastMonthClick();break;
            case 39://right，向右
                nextMonthClick();break;}
    }
    /* 模拟 windows7 日历 鼠标滑轮滚动翻页 */
    var direct;
    var scrollFunc=function(e){
        // 浏览器兼容
        var thisEvent = e || window.event;
        //IE,Opera,Chrome,safari
        if(thisEvent.wheelDelta){direct = thisEvent.wheelDelta;}
        else if(thisEvent.detail){
            //Firefox
            direct = thisEvent.detail;
        }
        // 如果控件是隐藏状态
        if(document.getElementById('dateOuter').style.display == "none"){return false;}
        /*
         * Firefox 接收 +3 和 -3
         * 其他浏览器接收 +120 和 -120
         * 其中 + 数表示鼠标向上滑动，- 数表示向下滑动
        */
        // 向上滑动，调用上一个月
        if(direct=="120" || direct=="3"){lastMonthClick();
            // 向下滑动，调用下一个月
        }else if(direct=="-120" || direct=="-3"){nextMonthClick();
        }
    };

    // 注册监听事件
    if(document.addEventListener){if(myBrowser() == "FF"){
            //Firefox,DOMMouseScroll 滚动事件只有 Firefox 适用
            document.addEventListener('DOMMouseScroll',scrollFunc,false);
        }else{
            //Chrome,360,safari,Opera 适用 mousewheel 滚动事件
            document.addEventListener('mousewheel',scrollFunc,false);
        }
    }else{
        // 兼容 IE，测试 IE8 可以兼容
        document.onmousewheel = scrollFunc;
    }


    // 判断浏览器类型
    function myBrowser(){
        var userAgent = navigator.userAgent; // 取得浏览器的 userAgent 字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {return "Opera"}; // 判断是否 Opera 浏览器
        if (userAgent.indexOf("Firefox") > -1) {return "FF";} // 判断是否 Firefox 浏览器
        if (userAgent.indexOf("Chrome") > -1){return "Chrome";}
        if (userAgent.indexOf("Safari") > -1) {return "Safari";} // 判断是否 Safari 浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}; // 判断是否 IE 浏览器
        if (userAgent.indexOf("Trident") > -1) {return "Edge";} // 判断是否 Edge 浏览器
    }
</script>
</html>

github 地址：https://github.com/panpanxiong3/Front-end-effect-link
里面有许多自我练习的 js 方法，主要从网络上收集，并且参考动手制作，并添加注释，来提高自己的能力

正文完
发表至： javascript
2019-10-25
 0
前端实习面试记录（一）
关于javascript:js执行机制
h5视频播放
bootstrap-table实现表头固定以及列固定