珍藏多年的JS

这些都是工作中用到的比较常用或者有意思的js函数,持续更新中…

截取浏览器地址栏中的url

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getUrlVars(){ 
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');
  for(var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
return vars;
}
var params = getUrlVars();
var cateId = params[params[0]]; //0是第一个
var cateId = parseInt(cateId); //字符串转数字
var type = typeof(cateId); //查看数据类型
console.log(cateId);
console.log(type);

方法二

1
2
3
var str= window.location.href;
var cateId = str.slice(-11);
console.log(cateId);

方法三

1
2
3
4
5
6
7
function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
var cateId= GetQueryString("cateId");
console.log(cateId);

根据地址栏获取某个参数(post和get形式都可以)

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
/**
* TP分页时,获取地址栏中为以下两种形式的某个参数
* http://localhost/index.php/Personal/userInfo/type/ref/p/20.html
* http://localhost/index.php/Personal/userInfo?type=refAll/p/2.html
*/
$(function(){
function getUrlVars(){
var vars = [], hash;
var hashes=window.location.href.slice(window.location.href.indexOf('?')+1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var broswerUrl = location.href;
var re = broswerUrl.indexOf("?");
var type = '';
if(re == -1){ //-1:未查询到
var arr = broswerUrl.split("/");//split:使用一个指定的分隔符把一个字符串分割存储到数组
type = arr[7];//查看数组得知,需要的字符串下标为7
}else{
var params = getUrlVars();
type = params[params[0]];
}
console.log(type);
});

时间戳转换成时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* 将时间戳转换成时间:若不传参,获取当前时间戳
* @param times number 时间戳
* @returns {string} 年-月-日 时:分:秒
*/
function getdate(times) {
if(times){
var time =Number(times +'000'); //将传入的时间戳增加3个0,变成微秒
var now = new Date(time);
}else{
var now = new Date();
}
var y,m,d;
y = now.getFullYear();
m = now.getMonth() + 1;
d = now.getDate();
return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
}

jQuery生成二维码

1:先引入jQuery插件文件

1
<script type="text/JavaScript" src="../../public/js/jquery.qrcode.min.js"></script>

2:生成可以保存的二维码图片和不可保存的二维码

1
2
3
4
5
6
7
8
9
10
11
$(function() {
var str = window.location.href;
var payUrl = str.slice(-35); //获取微信支付的url
//不生成二维码
$('#qrcode').qrcode(payUrl);
$(".qrcodes").hide();
//生成二维码图片,可保存至本地
var qrcode= $('#qrcode').qrcode(payUrl).hide();
var canvas=qrcode.find('canvas').get(0);
$('#imgOne').attr('src',canvas.toDataURL('image/jpg'))
});

生成可保存至本地二维码图片的html

1
<img id='imgOne' src="">

使用prompt和confirm进行简单的页面交互

1
2
3
4
5
6
7
8
9
10
11
12
function rec() {
var name = prompt("请输入姓名", "");
if(name != null){
var sures = confirm('刚输入的姓名是:'+name);
if(sures == true){
alert('已记录');
}else{
alert('您已取消,请重新输入');
}
}
}
rec();

防止浏览器的返回上一页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在不可返回的页面添加下面这段JS
$(document).ready(function(e) {
var counter = 0;
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
window.history.pushState('forward', null, '#');
window.history.forward(1);
alert("不可回退");
});
}

window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
window.history.forward(1);
});

获取验证码倒计时

1
<input class="weui-btn weui-btn_warn" id="getVerify" type="button" value="获取验证码" onclick="sendCode(this)">
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
36
37
38
39
function sendCode(thisBtn){
var clock = '';
var nums = 60;
var btn;
var mobile = $("#tel").val();
if(mobile == '' || mobile.length != 11){
weui.alert('请先输入正确的手机号');
}else{
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = '重新获取('+nums+')';
clock = setInterval(doLoop, 1000); //一秒执行一次
//调用接口
$.ajax({
url:"/api/app/user/getVerifyCode",
type:"post",
dataType:"json",
data:{phone:mobile},
success:function (data) {
if(data['status'] == 1){
weui.toast(data['msg']);
}else{
weui.alert(data['msg']);
}
}
});
}
function doLoop(){
nums--;
if(nums > 0){
btn.value = '重新获取('+nums+')'
}else{
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '获取验证码';
nums = 60; //重置时间
}
}
}

图片上传

1
2
<input id="upFile" class="weui-uploader__input" type="file" accept="image/*" multiple/>
<img src="./src/images/pic_user_default.png" id="logo">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#upFile").on("change",function () {
var formData = new FormData();
formData.append("file",$("#upFile")[0].files[0]);
$.ajax({
url: "/api/app/uploadFile",
type: "post",
dataType: "json",
contentType: false, // 注意这里应设为false
processData: false,
cache: false,
data: formData,
success: function (data) {
if(data["status"] == 1){
var imgUrl = "http://106.14.148.77/api"+data["data"];
$("#logo").attr("src",imgUrl);
}
}
})
});

js判断复选框是被选中

1
<input type="checkbox" checked class="weui-agree__checkbox">
1
2
var check   = $('input[class="weui-agree__checkbox"]').is(':checked');
alert(check == ture ? 'yes' : 'no');

js判断几个复选框被选中

1
2
3
4
5
6
7
8
<input type="checkbox" value="1" class="test">11
<input type="checkbox" value="2" class="test">21
<input type="checkbox" value="3" class="test">31
<input type="checkbox" value="4" class="test">41
<input type="checkbox" value="5" class="test">51
<input type="checkbox" value="6" class="test">61
<input type="checkbox" value="7" class="test">71
<button id="btn">OK</button>
1
2
3
4
5
6
7
8
9
10
11
12
 $("#btn").click(function(){
var chk_value = [];
$('input[class="test"]:checked').each(function() {
chk_value.push($(this).val());
});
if(chk_value.length == 0){
alert('你还没有选择任何内容!');
}else{
alert(chk_value);
}
// alert(chk_value.length == 0 ? '你还没有选择任何内容!': chk_value);
});