Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript:

document.body.clientWidth        //网页可见区域宽(body)
document.body.clientHeight //网页可见区域高(body)
document.body.offsetWidth //网页可见区域宽(body),包括border、margin等
document.body.offsetHeight //网页可见区域宽(body),包括border、margin等
document.body.scrollWidth //网页正文全文宽,包括有滚动条时的未见区域
document.body.scrollHeight //网页正文全文高,包括有滚动条时的未见区域
document.body.scrollTop //网页被卷去的Top(滚动条)
document.body.scrollLeft //网页被卷去的Left(滚动条)
window.screenTop //浏览器距离Top
window.screenLeft //浏览器距离Left
window.screen.height //屏幕分辨率的高
window.screen.width //屏幕分辨率的宽
window.screen.availHeight //屏幕可用工作区的高
window.screen.availWidth //屏幕可用工作区的宽

Jquery:

$(window).height()                 //浏览器当前窗口可视区域高度
$(document).height() //浏览器当前窗口文档的高度
$(document.body).height() //浏览器当前窗口文档body的高度
$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器当前窗口可视区域宽度
$(document).width() //浏览器当前窗口文档对象宽度
$(document.body).width() //浏览器当前窗口文档body的宽度
$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度 包括border padding margin

gulpfile.js

gulpfile.js放置在根目录下,
启动命令’gulp serve’

// 组件
gulp
browser-sync // 自动刷新

Read more

retinajs使用摘要

官方文档:retinajs

注:需要准备的图片名称格式

image.png
image@2x.png
image@3x.png

现在有4种实现方式:

  1. 自动交换“img”标签的”src”路径。
  2. 在内联样式中自动交换背景图像的网址。
  3. 手动指定一个高分辨率的图像不同位置。
  4. 自动创建CSS背景图像媒体查询。
Read more

jQuery插件的基本格式写法

(function($) {

// funName 是控件名称
$.fn.funName = function(options) {

// 设置默认值
var defaults = {
choose: 'red',
out: '#000'
}

// 如果options有的话就用options,或者使用default参数
var options = $.extend(defaults, options);

// 遍历 return 链式操作
return this.each(function() { // 这里的this是jQuery对象

var $this = $(this); // 这里的this是当前循环的dom

// 例当前dom和同级其它dom分别添加颜色属性
$this.css('color', options.choose).siblings().css('color', options.out);

});

}

})(jQuery);

$(function() {
// 调用
$('#demo').funName({'choose':'green', 'out':'#f00'});
});

fastclick.js插件使用简单说明

资源下载:fastclick.js

为什么存在延迟?

从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。

引入插件步骤

1.在HTML页面中添加

<script type='application/javascript' src='/path/to/fastclick.js'></script>

注:必须在页面所有Element之前加载脚本文件先实例化fastclick

2.在JS中添加fastclick的身体,推荐以下做法:

if ('addEventListener' in document) {  
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

如果你使用了JQuery,那么JS引入就可以改用下面的写法:

$(function() {  
FastClick.attach(document.body);
});

如果你使用Browserify或者其他CommonJS-style 系统,当你调用require('fastclick')时,FastClick.attach事件会被返回,加载FastClick最简单的方式就是下面的方法了:

var attachFastClick = require('fastclick');  
attachFastClick(document.body);

zepto判断左右滑动

var startPosition, endPosition, deltaX, deltaY, moveLength;
$(".content").bind('touchstart', function(e){
var touch = e.touches[0];
startPosition = {
x: touch.pageX,
y: touch.pageY
}
}) .bind('touchmove', function(e){
var touch = e.touches[0];
endPosition = {
x: touch.pageX,
y: touch.pageY
};

deltaX = endPosition.x - startPosition.x;
deltaY = endPosition.y - startPosition.y;
moveLength = Math.sqrt(Math.pow(Math.abs(deltaX), 2) + Math.pow(Math.abs(deltaY), 2));
}).bind('touchend', function(e){
if(deltaX < 0) { // 向左划动
console.log("向左划动");
} else if (deltaX > 0) { // 向右划动
console.log("向右划动");
}
});

jquery天时分秒倒计时

html

<div class="get-rt-time" data-time="2100-11-11 20:20:20"></div>
<div class="get-rt-time" data-time="2015-11-11 20:20:20"></div>

js

$(function(){
$.fn.funTime=function(msg){
var data="";
var _DOM=null;
var funDom = function(dom){
_DOM=dom;
data=$(dom).attr("data-time");
data = data.replace(/-/g,"/");
data = Math.round((new Date(data)).getTime()/1000);
var domTHML = '<em class="myday"></em><em class="split">天</em>'+
'<em class="myhour"></em><em class="split">时</em>'+
'<em class="mymin"></em><em class="split">分</em>'+
'<em class="mysec"></em><em class="split">秒</em>';
$(_DOM).append(domTHML);
funMsg(msg);
};
var funMsg = function(msg){
var range = data-Math.round((new Date()).getTime()/1000),
secday = 86400, sechour = 3600,
days = parseInt(range/secday),
hours = parseInt((range%secday)/sechour),
min = parseInt(((range%secday)%sechour)/60),
sec = ((range%secday)%sechour)%60;
if(hours < 10)
hours = "0" + hours;
if(min < 10)
min = "0" + min;
if(sec < 10)
sec = "0" + sec;
if(hours>0||min>0||sec>0){
$(_DOM).find(".myday").html(days);
$(_DOM).find(".myhour").html(hours);
$(_DOM).find(".mymin").html(min);
$(_DOM).find(".mysec").html(sec);
}else{
$(_DOM).hide();
$(_DOM).after(msg);
}
};
setInterval( funMsg,1000 );

return this.each(function(){
var $this = $(this);
funDom($this);
});
}

//应用
$(".get-rt-time").each(function(){
var msg='<div class="mask_end"><span>活动结束</span></div>';
$(this).funTime(msg);
});
});

jquery倒计时页面跳转

$(function(){
funTimeout(); //应用倒计时
})
//倒计时
var strTime = 10; //设置时间
var strTimeBox = $(".time-box"); //数字容器
function funTimeout() {
strTimeBox.html(strTime); //显示数字
strTime--;
if (strTime == 0) {
window.opener = null;
window.location.href = "http://www.baidu.com/";
}
else {
setTimeout("show()", 1000);
}
}

checkbox 全选 反选

//checkbox全选反选
function funCheckbox(){
var intListAll, intListChecked;
$(document).on("click","input[name='all']",function(){
if($(this).is(":checked")){
$("input[name='all']").prop("checked",true);
$("input[name='list']").prop("checked",true);
}else {
$("input[name='all']").prop("checked",false);
$("input[name='list']").prop("checked",false);
}
})
intListAll = $("input[name='list']").length;//获取列表的个数
$(document).on("click","input[name='list']",function(){
intListChecked = $("input[name='list']:checked").length;
if(intListChecked == intListAll){
$("input[name='all']").prop("checked",true);
}else {
$("input[name='all']").prop("checked",false);
}
})
}

监听textarea的值的变化"propertychange"

js示例

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)"></textarea>

jquery示例

function funTestarea(){
var $testarea = $(".textarea textarea");
var $b = $(".textarea b");
$testarea.on("input propertychange",function(){
var $this = $(this);
var strNum = $.trim($this.val()).length;
if(strNum>100){
$(this).val($(this).val().substr(0,100));
}else {
$b.text(strNum);
}
});
}