前端技巧方法集合整理

发表于

手机号码正则验证方法

1
2
3
4
5
// 验证手机号方法
function isPhoneNo(phone) { 
  var pattern = /^1[34578]\d{9}$/; 
  return pattern.test(phone); 
}

发送验证码倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var intDiff = parseInt(60);	//倒计时时总秒数量
function timer(intDiff){
  $(".yzm-btn").html("重发获取("+intDiff+")").addClass("gray");
  var times = setInterval(function(){
      intDiff--;
      $(".yzm-btn").html("重发获取("+intDiff+")");
      if(intDiff<=0){
          clearInterval(times);
          $(".yzm-btn").html("重新获取").on("click",get_yzm).removeClass("gray");
      }
  }, 1000);
}
// 验证码方法
function get_yzm(){
  if($(".phone-login input[type='tel']").val() == ""){
    $(".phone-error").show();
    setTimeout(function(){
      $(".phone-error").hide();
    },1000)
    return;
  }
  if(!isPhoneNo($('.phone-login input[type="tel"]').val())){
    $(".phone-error").show();
    setTimeout(function(){
      $(".phone-error").hide();
    },2000)
    return;
  }
  $(".yzm-btn").off("click");
  timer(intDiff);
}
// 点击获取验证码
$(".yzm-btn").on("click",get_yzm);

监听input改变

1
2
3
4
5
6
7
8
// 监听手机登录的input改变
$('.phone-login input').on('input propertychange', function() {  
    if($(this).val()!=""){
      $(".next-btn a").addClass("canAble").off("click").on("click",nextStepFun);    //按钮变亮可点击
    }else{
      $(".next-btn a").removeClass("canAble").off("click");    //按钮变灰不可点击
    }
});

元素滚动到顶部固定定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//元素滚动跟随
var eleTop = $(".details_title").offset().top;	//获取元素距离顶部的距离
$(window).scroll(function (){
    if (eleTop <= $(window).scrollTop()){
        $(".details_title").addClass("fixed");	// 如果元素到达顶部添加定位
        $(".comment_list").addClass("pt4");	// 下面的元素增加与定位元素高度的距离
    } else {
        $(".details_title").removeClass("fixed");
        $(".comment_list").removeClass("pt4");
    }
});
------------------------------------------------------------------------
方法2：
var elHeight = $(".classification").outerHeight();	//获取元素的高度
$(window).scroll(function(){
	if($(window).scrollTop() >= elHeight){
		$(".classification").addClass("fixed");
		$(".classification-list").addClass("mart");
	}else{
		$(".classification").removeClass("fixed");
		$(".classification-list").removeClass("mart");
	}
});

顶部导航滚动条 iScroll插件滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="header" id="wrapper1">
    <ul class="category-nav">	//设置高度样式
        <!-- <li>导航分类</li> -->
    </ul>
</div>
// js
$(".category-nav").append(str);	//ajax获取添加到分类列表中
var all_width = document.getElementsByClassName('category-nav')[0].scrollWidth;	//获取当前实际宽度
$('.category-nav').css({
    'width':all_width + 'px'
});
var myscroll= new iScroll("wrapper1",{	//初始化滚动条
    scrollX: true,  
    scrollY: false, 
    hScrollbar:false,
    vScrollbar : false,
    vScroll:false
});

时间戳转换格式函数 00:00

1
2
3
4
5
function stom(t) {
    var m = Math.floor(t / 60);
    m < 10 && (m = '0' + m);
    return m + ":" + (t % 60 / 100).toFixed(2).slice(-2);
}

时间戳转换日期格式函数 // 2017-10-11

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function formatDate(dt){
  if(!dt){
    dt = new Date();
  }
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var date = dt.getDate();
  if(month < 10){
    month = '0' + month;
  }
  if(date < 10){
    date = '0' + date;
  }
  return year + '-' + month + '-' + date
}
var dt = new Date();
console.log(formatDate(dt));  // 2017-10-11