ajax 请求
$.ajax({
type: 'POST',
url: '',
data: {
postVar1: 'theValue1',
postVar2: 'theValue2'
},
beforeSend: function() {
// this is where we append a loading image
// 在这里我们展示 loading 信息（图片或者文字）
$('#ajax-panel').html('
');
},
success: function(data) {
if (data.status) {
// 返回数据正常
// 删除 loading 效果并处理数据 data.data
} else {
// 返回数据异常
// 删除 loading 效果并给予用户适当反馈信息
console.log('返回数据异常');
}
},
error: function() {
// failed request; give feedback to user
// 数据请求失败，给用户适当的反馈信息
console.log('数据请求失败');
$('#ajax-panel').html('Oops! Try that again in a few moments.
');
},
dataType: 'json'
});
// minimal
$.ajax({
type: 'POST',
url: '',
data: {
postVar1: 'theValue1',
postVar2: 'theValue2'
},
success: function(data) {
if (data.status) {
// 返回数据正常
} else {
// 返回数据异常
console.log('返回数据异常');
}
},
error: function() {
// failed request; give feedback to user
// 数据请求失败，给用户适当的反馈信息
console.log('数据请求失败');
},
dataType: 'json'
});
json 格式
{
"status": 1,
"info": "",
"data": [……]
}
{
status: 0,
info: "",
data: []
}
回到上一页
图片占位背景色
var w = $(document.body).width()*0.455;
$('.benefits_list .col-6 a').width(w);
$('.benefits_list .col-6 a').height(w*450/960);
default btn
.btn{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default{
color: #333;
background-color: #fff;
border-color: #ccc;
}
计算时间差（天）
/*-------------------判断时间差 start---------------------*/
// From 2016-09-30 10:33 to "09/30/2016"(mm/dd/yyyy)
function dateFormat(someday){
var date = someday.split(' ')[0];
var dateArr = date.split('-');
var result = [];
result[0] = dateArr[1];
result[1] = dateArr[2];
result[2] = dateArr[0];
return result.join('/');
}
// a and b are javascript Date objects
function dateDiffInDays(a, b) {
var _MS_PER_DAY = 1000 * 60 * 60 * 24;
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}
// 判断相差几天？今天或者7天前
// 今天 today：var today = new Date();
// 某天 before：2016-09-30 10:33
function dateDiff(today,before){
var someday = new Date(dateFormat(before));
return dateDiffInDays(someday,today);
}
/*-------------------判断时间差 end---------------------*/
判断当前时间在指定时间的前后
var nowDate=new Date();
var now = nowDate.getTime();
var endDate = '2016/8/10 09:39:00';
var end = new Date(endDate).getTime();
if(end<=now){
...
}else{
...
}
sticky footer
function sticky($footer){
var offset = $footer.offset();
var windowH = $(window).height();
var footerH = $footer.height();
if((offset.top+footerH) < windowH){
var diff = windowH - (offset.top+footerH);
var top = (parseInt($footer.css('top')) + diff) + "px";
$footer.css('top', top);
}
}
动态添加的内容渐显
html
css
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
js
setTimeout(function(){
$('.fade').addClass('in');
},100);
function showFeedback(txt, duration){
$('.modal-fb-tip').text(txt);
$('.modal-fb').removeClass('hidden');
setTimeout(function(){
$('.modal-fb.fade').addClass('in');
},100);
setTimeout(function(){
$('.modal-fb.fade.in').removeClass('in');
setTimeout(function(){
$('.modal-fb').addClass('hidden');
},100);
},duration);
}
判断是否是数字，且满足某个区间
How do I check that a number is float or integer?
// check for a remainder when dividing by 1:
function isInt(n) {
return n % 1 === 0;
}
//If you don't know that the argument is a number you need two tests:
function isInt(n){
return Number(n) === n && n % 1 === 0;
}
function isFloat(n){
return Number(n) === n && n % 1 !== 0;
}
parseInt("a")
==> NaN
isNaN(parseInt("a"))
true
isNaN(parseInt("1"))
false
replace broken img
onerror="this.onerror=null;this.src='imagefound.gif';"
绑定 input file 的 change 事件
document.getElementById('upload-file').addEventListener('change', function(){
previewFile($('.action-upload-view img')[0], $('#upload-file')[0]);
})
file 类型的 input 只接受图片类文件
How to allow to accept only image files
获取当前时间
Getting current date and time in JavaScript
// For the time now
Date.prototype.timeNow = function(){ return ((this.getHours() < 10)?"0":"") + ((this.getHours()>12)?(this.getHours()-12):this.getHours()) +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds() + ((this.getHours()>12)?('PM'):'AM'); };
// For todays date;
Date.prototype.today = function () {
return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
}
var newDate = new Date();
var datetime = "LastSync: " + newDate.today() + " @ " + newDate.timeNow();
// Output: "LastSync: 18/10/2016 @ 09:10:35AM"
-----------------------------------------------
-----------------------------------------------
// For the time now
Date.prototype.timeNow = function() {
return ((this.getHours() < 10) ? "0" : "") + this.getHours() + ":" + ((this.getMinutes() < 10) ? "0" : "") + this.getMinutes() + ":" + ((this.getSeconds() < 10) ? "0" : "") + this.getSeconds(); };
// For todays date;
Date.prototype.today = function() {
return this.getFullYear() + "-" + (((this.getMonth() + 1) < 10) ? "0" : "") + (this.getMonth() + 1) + "-" + ((this.getDate() < 10) ? "0" : "") + this.getDate();
}
var newDate = new Date();
var datetime = newDate.today() + " " + newDate.timeNow();
// Output: "2016-10-18 09:18:04"
图片加载错误
jQuery/JavaScript to replace broken images
// 图片加载错误
function imgError(image) {
image.onerror = "";
image.src = "../img/default.jpg";
return true;
}
onerror="imgError(this);"
移动端 input 框清除内阴影
box-shadow: none;
border: 0;
outline: 0;*
Get URL parameters using jQuery
// Get URL parameters using jQuery
// example.com?param1=name¶m2=&id=6
// $.urlParam('param1'); // name
// $.urlParam('id'); // 6
// $.urlParam('param2'); // null
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results == null) {
return null;
} else {
return results[1] || 0;
}
}