js常用小方法
1.时间格式化
a.需要熟悉Date对象的方法;
b.使用 getFullYear(),getMonth(),getDate()等方法获取年份，月份等时间数据，然后根据所需要的时间格式可以自行拼接
demo：
下面以 这种格式为例：2017-09-15 15:10:06，
function format(timestamp) { // 获取时间戳 Date.parse(new Date()); //timestamp是整数，否则要parseInt转换,不会出现少个0的情况 var time = new Date(timestamp); var year = time.getFullYear(); var month = time.getMonth() + 1; var date = time.getDate(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); return year + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds); } //当月份，日期，时分秒小于10时前面加0 function add0(m) { return m < 10 ? '0' + m : m }
2.移动端页面中出现弹出框(模态框，提示框)时禁止底层页面滚动
a.出现弹出框时：body添加overflow:hidden,同时阻止其默认是事件
b.关闭弹出框时：body的overflow值置为auto,并启用默认事件使body可以正常滚动;
// 出现弹出框时 $("body").css("overflow", "hidden"); $('body').bind("touchmove", function (e) { e.preventDefault && e.preventDefault(); }); //关闭弹出框时 $("body").css("overflow-y", "auto"); $("body").unbind("touchmove");
3.无缝滚动(新闻，中奖信息等)
html
<div class="award-items-state"> <ul id="award-items-con" class="award-items-con"></ul> <ul id="award-items-con-clone" class="award-items-con"></ul> </div>
css
.award-items-state {
width: 5.5rem;
height: 1.8rem;
overflow: hidden;
margin: 0 auto;
line-height: 1.2;
}
js
var state = $('.award-items-state');//获取滚动内容的外部容器，需要定高，超出隐藏 var con = $('#award-items-con');// 滚动内容的容器，滚动的数据 var con_clone = $('#award-items-con-clone'); // 存放复制内容的容器 function listScroll() { //state.scrollTop() ：该元素中的内容向上卷进去的高度 //con.get(0).offsetHeight：该元素的整体高度 if (state.scrollTop() >= con.get(0).offsetHeight) { state.scrollTop(0); } else { state.scrollTop(state.scrollTop() + 1); } } //使用setInterval 实现滚动效果 setInterval(listScroll, 40);
有关scrollTop ,offsetHeight可以参照下图：
4.页面设置不缓存
<meta http-equiv="pragma" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache"/> <meta http-equiv="expires" content="0"/> <meta http-equiv="keywords" content=""/> <meta http-equiv="description" content=""/>
5.jquery监测radio变化事件
$("input[name='tourism']").change(function () {
var tourism_val = $("input[name='tourism']:checked").val();
console.log('选中的值：' + tourism_val);
})
6.jQuery去除字符串的前后空格
var str = ' 会捕鼠的鱼 '; var other = $.trim(str);
7.button,input等禁用和启用
// button，input 禁用 $("#submit-question").attr('disabled', true); // button，input 启用 $("#submit-question").attr('disabled', false);
8.正则匹配中英文的逗号(,)，分号(;)
var other = 'a,b，c;d；' industry = other.replace(/(,)|(，)|(;)|(；)/g, "-");
9.判断设备类型及判断iphone手机型号(iphone6,iphone6 s等等)
1).判断设备类型
var os = function () { var ua = navigator.userAgent.toLowerCase(), isAndroid = /(?:android)/.test(ua), isTablet = /(?:ipad|playbook)/.test(ua) || (isAndroid && !/(?:mobile)/.test(ua)), isPhone = /(?:iphone)/.test(ua) && !isTablet, isPc = !isPhone && !isAndroid && !isTablet; return { isTablet: isTablet, isPhone: isPhone, isAndroid: isAndroid, isPc: isPc }; }();
console.log(os);
2).判断iphone手机型号
a.根据userAgent判断是否是iphone
b.根据屏幕的宽高判断iphone的具体型号
var isPhone6p = (function () { var h = window.innerHeight, w = window.innerWidth, ua = navigator.userAgent.toLowerCase(), isP6p = false; if (ua.match(/mobile/i) !== null && ua.match(/iphone/i) !== null && ( h > w ? (Math.abs(w - 414) < 10 && h <= 736) : (Math.abs(w - 736) < 10) && h <= 414)) { isP6p = true; } return isP6p; })();
10.页面简单适配
7.5为 设计图 除以100
var html = document.querySelector("html"); var rem = html.offsetWidth / 7.5; html.style.fontSize = rem + "px";
11.html模板插入dom
方法1：
var alertHtml = [ '<section class="alert-main" id="alertMain">', '<div class="alert-mask li-opacity" id="alertMask"></div>', '<div class="alert-content" id="alertContent"></div>', '</section>' ]; $('body').append(alertHtml.join(''));
方法2：
var alertHtml = [ '<section class="alert-main" id="alertMain">'+'<div class="alert-mask li-opacity" id="alertMask"></div>'+'<div class="alert-content" id="alertContent"></div>'+'</section>' ]; $('body').append(alertHtml);
12.删除带有img标签的字符串
var htmlContent = "<div id='test'><img src='aaa' width='100%'></img></div>";
var data = htmlContent.replace(/<img.*>.*<\/img>/ig,""); //过滤如<img></img>形式的图片元素 data = data.replace(/<img.*\/>/ig, ""); //过滤如<img />形式的元素
console.log(htmlContent);
console.log(data);
13.实时监测input值得变化
使用jquery：
$('input').bind('input porpertychange', function () {
var val = $.trim($('#cdk').val());
console.log(val);
})
14.匹配链接后的参数
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var result = window.location.search.substr(1).match(reg); if (result) return result[2];
return null;
}
正则匹配(^|&) : 匹配字符串的任意开头或&
url： https://www.baidu.com/?username=123456
window.location ： 获取当前链接 -> https://www.baidu.com/?username=123456&password=654321
window.location.search : 获取当前链接的参数 -> ?username=123456&password=654321
window.location.search.substring(1) : 获取当前链接？后的参数, substr(1)从索引1开始截取 -> username=123456&password=654321
result[2] :返回参数名称的值
15.获取当前点击元素的自定义的属性
<span data-id="39286" onclick="goToConsumeCoupon(event)">兑换</span> function goToConsumeCoupon(e) { var id = e.currentTarget.dataset.id; location.href = 'https://www.baidu.com/'; }
注：在使用e.target.dataset获取属性的时候偶尔会出现undefined;
16.解决 触发元素点击事件时，元素出现半透明的灰色背景色
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
17.操作json
大多浏览去提供JSON.parse()方法解析JSON，提供JSON.stringify()方法生成JSON，可以使用这两个方法！为了防止JSON.parse()对对象抛异常，可以稍加处理，如下：
var str = '{ "name": "会捕鼠的鱼", "age": "18" }'; function jsonParse(data) { if (typeof(data) === 'string') { return JSON.parse(data); } else { return data; } } var jsonData = jsonParse(str);
18.禁止保存图片
对图片添加属性，但是有兼容性
img { pointer-events: none; }
如有错误还望指出^-^
