所有由yun1297发布的文章

为您的设计寻找,最专业的前端技术;

JS获取浏览器名称及版本信息

获取浏览器名称及版本信息,如果当前浏览器是IE,弹出浏览器版本,否则弹出当前浏览器名称和版本,详细实现代码请参考本文

// 获取浏览器名称及版本信息
function browserInfo() {
    var browser = {
            msie: false,
            chrome: false,
            firefox: false,
            opera: false,
            netscape: false,
            safari: false,
            appname: 'unknown',
            version: 0
        },
        userAgent = window.navigator.userAgent.toLowerCase();
    if (/(msie|chrome|firefox|opera|netscape)\D+(\d[\d.]*)/.test(userAgent)) {
        browser[RegExp.$1] = true;
        browser.appname = RegExp.$1;
        browser.version = RegExp.$2;
    } else if (/version\D+(\d[\d.]*).*safari/.test(userAgent)) { // safari
        browser.safari = true;
        browser.appname = 'safari';
        browser.version = RegExp.$2;
    }
    return browser;
}

var mybi = browserInfo(); // 调用示例
// 如果当前浏览器是IE,弹出浏览器版本,否则弹出当前浏览器名称和版本
if (mybi.msie) {
    document.writeln(mybi.version);
} else {
    document.writeln(mybi.appname + ' ' + mybi.version);
}

js判断移动终端

JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。

对于手机浏览器判断

如何判断是否为移动终端,利用正则 match
匹配navigator.userAgent是否含有字符串AppleWebKit***Mobile
安卓qq浏览器HD版 只有AppleWebKit

/*
 * 智能机浏览器版本信息:
 */
var browser = {
    versions: function() {
        var u = navigator.userAgent;
        return { //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1 //是否iPad
        };
    }()
};
document.writeln('是否为移动终端: ' + browser.versions.mobile + '<br>');
document.writeln('ios终端: ' + browser.versions.ios + '<br>');
document.writeln('android终端: ' + browser.versions.android + '<br>');
document.writeln('是否为iPhone: ' + browser.versions.iPhone + '<br>');
document.writeln('是否iPad: ' + browser.versions.iPad);

比较特别的地方

UC浏览器没有安卓报头,只返回:linux ,这里粗略的根据 linux 来判断是安卓(前提必须满足是移动终端,UC这点是满足的)
安卓 QQ浏览器HD版 检测的结果是:mac, Safari,这个很是变态,自己看着处理吧

JS split() 方法使用

split 方法用于把一个字符串分割成字符串数组。

在本例中,我们将分割结构更为复杂的字符串:

var json = "name: 'John', lang: 'JS'".split(',');
$.each(json, function (index, el) {
    alert('索引:' + index + '  內容:' + el);
});

使用下面的代码,可以把句子分割成单词:

var str = "How are you doing today?";
str = str.split(' ');
/* 或者使用正则表达式作为分离器:*/
// str = str.split(/\s+/);
$.each(str, function (index, el) {
    alert('索引:' + index + '  內容:' + el);
});

更详尽的方法请参考:
http://www.w3school.com.cn/jsref/jsref_split.asp

jQuery 键盘事件

一、首先需要知道的是:

1、keydown()
keydown 事件会在键盘按下时触发。

2、keypress()
keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。

3、keyup()
keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件。

二、获得键盘上对应的 ascII 码:

//键码获取
$(document).keydown(function (event) {
    alert(event.keyCode);
});

上面例子中,event.keyCode 就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是 ascII 码,比如说上下左右键,分别是38,40,37,39;

三、实例:

比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;
按 ctrl+enter 实现表单提交(以此提高用户体验);
如果我们要实现 ctrl+enter 提交表单,可以这样:

//键盘操作
$(document).keydown(function (event) {
    if (event.ctrlKey && event.keyCode == 13) {
        alert('Ctrl+Enter');
    };
    switch (event.keyCode) {
    case 37:
        alert('方向键-左');
        break;
    case 39:
        alert('方向键-右');
        break;
    };
    return false;
});

JS 时间相减得出天数

var date = new Date();
var y = date.getFullYear();
var m = date.getMonth();
var d = date.getDate();

var endDate = '2013-01-04';
var array = endDate.split("-");
var endTime = new Date(parseInt(array[0]), parseInt(array[1]) - 1, parseInt(array[2]));
var nowTime = new Date(parseInt(y), parseInt(m), parseInt(d));
var day = (Number(nowTime) - Number(endTime)) / (1000 * 60 * 60 * 24);

alert(endDate + ' 距今已过 ' + day + ' 天');

jQuery 获取 iframe 父页面与子页面的元素和方法

1)在页面中查找 iframe 页面元素:
$(‘#iframe’).contents().find(‘#id’)

2)在 iframe 中查找父页面元素:
$(‘#id’, parent.document)

3)在 iframe 中调用父页面中定义的方法和变量:
parent.method
parent.value

父页面

<div id="div">div element</div>

<iframe id="iframe" src="page.html" frameborder="0"></iframe>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function ($) {
    //在页面中查找 iframe 页面元素
    var p = $('#iframe').contents().find('#p').text();
    alert(p);
});

//自定义变量
var hello = 'hello';

//自定义方法
function getHelloWorld() {
    alert('hello world');
}
</script>

子页面

<p id="p">p element</p>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function ($) {
    //在 iframe 中查找父页面元素
    alert($('#div', parent.document).text());
    //在 iframe 中调用父页面中定义的方法
    parent.getHelloWorld();
    //在 iframe 中调用父页面中定义的变量
    alert(parent.hello);
});
</script>

jQuery 实现滚动页面固定 div 元素

和大家分享一下我写的一个滚动页面且固定 div 元素的例子,现在很多网站都用到了这样的效果。

CSS Code:

.fixed, #scrollarea {
	background-color: #F0F0F0;
	height: 210px;
	margin-bottom: 10px;
	width: 280px;
}
#scrollarea {
	height: 630px;
}
.move {
	background-color: #F00;
	color: #FFF;
	height: 210px;
	position: absolute;
	width: 280px;
}
.scroll {
	background-color: #00F;
	position: fixed;
	top: 0;
}

HTML Code:

<div class="fixed"> 1 </div>
<div class="fixed"> 2 </div>
<div id="scrollarea">
  <div class="move" id="scroll">我现在是红色,现在还没固定。</div>
</div>
<div class="fixed"> 3 </div>
<div class="fixed"> 4 </div>
<div class="fixed"> 5 </div>

jQuery Code:

$(function ($) {
    var loaded = true;
    var scroll_height = $("#scrollarea").height() - $("#scroll").height();
    var start_top = $("#scroll").offset().top;
    var stop_top = $("#scrollarea").offset().top + scroll_height;
    scrollfixed();

    function scrollfixed() {
        var scrolltop = $(window).scrollTop();
        var start_cha = start_top - scrolltop;
        var stop_cha = stop_top - scrolltop;
        if (loaded && start_cha <= 0 && start_cha >= -scroll_height) {
            $("#scroll").removeAttr("style");
            $("#scroll").addClass("scroll");
            $("#scroll").html("我现在是蓝色,现在已经固定。");
            loaded = false;
        }
        if (!loaded && stop_cha <= 0) {
            $("#scroll").removeClass("scroll");
            $("#scroll").css('top', stop_top);
            loaded = true;
        }
        if (!loaded && start_cha > 0) {
            $("#scroll").removeClass("scroll");
            $("#scroll").html("我现在是红色,现在还没固定。");
            loaded = true;
        }
    }
    $(window).scroll(scrollfixed);
});

查看 Demo

jQuery 获取浏览器窗口可视区域的高度和宽度及滚动条高度

在前端交互设计中,当需要获取用户浏览器窗口的可视区域时,常碰到浏览器兼容问题,幸好 jquery 解决了这个问题。

jQuery Code:

//浏览器时下窗口可视区域的高度
alert($(window).height()); 

//浏览器时下窗口文档的高度
alert($(document).height()); 

//浏览器时下窗口文档 body 的高度
alert($(document.body).height()); 

//浏览器时下窗口文档 body 的总高度,包括边框和内外边距高度
alert($(document.body).outerHeight(true)); 

//浏览器时下窗口可视区域的宽度
alert($(window).width()); 

//浏览器时下窗口文档的宽度
alert($(document).width()); 

//浏览器时下窗口文档 body 的宽度
alert($(document.body).width()); 

//浏览器时下窗口文档 body 的总宽度,包括边框和内外边距宽度
alert($(document.body).outerWidth(true)); 

//获取滚动条到顶部的垂直高度
alert($(document).scrollTop()); 

//获取滚动条到左边的垂直宽度
alert($(document).scrollLeft());