分类目录归档：前端

video 配置详细参数

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg"  // 视频封面
  preload="auto" 
  webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  // IOS微信浏览器支持小窗内播放
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  // 启用H5播放器,是wechat安卓版特性
  x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
  x5-video-orientation="portraint" // 播放器的方向， landscape横屏，portraint竖屏，默认值为竖屏
  style="object-fit:fill">
</video>

本条目发布于2023-09-30。属于Div+CSS分类。

js弹出遮罩层，禁止滚动条滚动，隐藏遮罩层，允许滚动条滚动

记事本 > Javascript

//禁止滚动条滚动
stopScroll:function(){
document.documentElement.style.overflow=‘hidden’;
document.body.style.position=‘fixed’;
document.body.style.top=‘0px’;
document.body.style.width=“100%”;
},
//允许滚动条滚动
openScroll:function(){
document.documentElement.style.overflow=‘scroll’;
document.body.style.position=‘static’;
}

本条目发布于2023-08-25。属于Javascript分类。

jquery中ajax回调函数使用this

记事本 > Javascript
ajax中的回调函数（success等）直接用this不灵，解决办法是使用bind(this)绑定this到当前事件。
```
$.ajax({type: 'GET',
    url: "/flag/",
    data: dat,
    success:function(){
        $(this).prevAll('p').css("text-decoration","line-through");
    }.bind(this)
});
```
本条目发布于2023-08-20。属于Javascript分类。

微信公众号调用扫一扫功能

记事本 > Javascript

<script>
  $(document).ready(function () { 
    $.get("后台接口，返回签名信息", function(obj){
      wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: obj.appId, // 必填，公众号的唯一标识
        timestamp: obj.timestamp, // 必填，生成签名的时间戳    <%= Html.Encode(ViewData["timestamp" ]) %>
        nonceStr: obj.nonceStr, // 必填，生成签名的随机串
        signature: obj.signature, // 必填，签名
        jsApiList: ['checkJsApi','scanQRCode'] // 必填，需要使用的JS接口列表, 这里只需要调用扫一扫
      }); 
    });   
    
    wx.ready(function(){
      wx.checkJsApi({  //判断当前客户端版本是否支持指定JS接口
        jsApiList: ['scanQRCode'],
        success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
            if(res.checkResult.scanQRCode != true){
                alert('抱歉，当前客户端版本不支持扫一扫');
            }
        },
        fail: function (res) { //检测getNetworkType该功能失败时处理
            alert('checkJsApi error');
        }
      }); //wx.checkJsApi结束
      
      // 调起企业微信扫一扫接口
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult : 1,  // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
        success : function(res) {
            console.log("调用扫描成功",res);
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            $("#codeValue").val(result);//显示结果
            // alert("扫码结果为：" + result);
        },
        error:function(res){
            console.log(res)
            if (res.errMsg.indexOf('function_not_exist') > 0) {
                alert('版本过低请升级')
            }
        }
      }); //wx.scanQRcode结束
 
    }); //wx.ready结束
    wx.error(function(res){
      alert("错误信息:"+JSON.stringify(res));
    });        
  }); 
 
  //点击按钮进行扫码
  $("#scanQRCode").click(function(event){
    wx.ready(function(){
      wx.scanQRCode({
          desc: 'scanQRCode desc',
          needResult : 1,  // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
          scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
          success : function(res) {
              console.log("调用扫描成功",res);
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              $("#codeValue").val(result);//显示结果
              alert("扫码结果为：" + result);
          },
          error:function(res){
              console.log(res)
              if (res.errMsg.indexOf('function_not_exist') > 0) {
                  alert('版本过低请升级')
              }
          }
      }); //wx.scanQRcode结束
    }); 
  });
 
</script>

本条目发布于2023-02-25。属于Javascript分类。

JQ节点关系

记事本 > Javascript
一、children()
    1、描述：获取当前jq对象的子节点
    2、语法：jq对象.children()
    3、PS：
    ①当children（）不写参数的时候获取的是所有的孩子
    ②当children（'孩子的选择器'）获取的是指定的孩子
    ③children（）只能选择直接孩子不能选择孙子元素
    4、eg：
```
$('button:first').click(function () {
	//选择指定的孩子
	$('.box').children('.s1').css('background-color','red');
	//选择所有的孩子
	$('.box').children().css('background-color','red');
})
```
二、find()
    1、描述：获取指定的孩子
    2、语法：jq对象.find('孩子的选择器')
    3、PS：
    ①不能空参使用，不能获取所有的孩子
    ②只要是孩子元素，就能使用find（）
    4、eg：
```
$('button:first').click(function () {
	console.log('666');
	$('.box').find('.s2').css('backgroundColor','red');
});
```
三、parent()/parents()
    1、描述：查找当前jq对象的父节点/所有的父节点直到祖先节点
    2、语法：jq对象.parent()/parents()
    3、eg：
```
$('button:first').click(function () {
	//$('.p0').parent().css('background-color','red');
	$('.p0').parents().css('background-color','red');
});
```
四、siblings()
    1、描述：获取所有的兄弟节点
    2、语法：jq对象.siblings(选择器)
    3、PS：
    ①不写参数，获取的是所有的兄弟
    ②写参数，获取的是满足选择器要求的兄弟
    4、eg：
```
$('button:first').click(function () {
	$('.p0').siblings('.p1').css('background-color', 'red');
});
$('p').click(function () {
	$(this).html('很开心').siblings().html('很开心').parent().siblings().children().html('不开心');
});
```
五、next()
    1、描述：获取下一个兄弟节点
    2、语法：jq对象.next()
    3、eg：
```
$('p').click(function () {
	$(this).next().css('background-color','red');
})
```
六、nextAll()
    1、描述：获取后面所有的兄弟节点
    2、语法：jq对象.nextAll()
    3、eg：
```
$('p').click(function () {
	$(this).nextAll().css('background-color', 'red');
});
```
七、prev()
    1、描述：获取当前节点的前一个兄弟节点
    2、语法：jq对象.prev()
    3、eg：
```
$('p').click(function () {
	$(this).prev().css('background-color', 'red');
});
```
八、prevAll()
    1、描述：获取当前节点前面的所有兄弟节点
    2、语法：jq对象.prevAll()
    3、eg：
```
$('p').click(function () {
	$(this).prevAll().css('background-color', 'red');
});
```
本条目发布于2023-02-13。属于Javascript分类。
JQ判断INPUT是否正在读取

记事本 > Javascript
```
	if($(":input[name=piclist]").length <= 0){
		return false;
	}
```
本条目发布于2023-02-13。属于Javascript分类。

JQ判断radio是否选中

记事本 > Javascript

	if (!$(":radio[name=sex]").is(":checked")){
		alert("请选择性别");
		$("#sex").focus();
		return false;
	}

本条目发布于2023-02-13。属于Javascript分类。

邮箱和身份证验证

记事本 > Javascript

function ISmobile(str){
	var p=/^1[3|4|5|6|7|8][0-9]\d{7,8}$/;
	if(str.match(p)!=null) {
		return true;
	}
	return false;
}
function IScard(str){
	var p=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	if(str.match(p)!=null) {
		return true;
	}
	return false;
}

本条目发布于2022-12-15。属于Javascript分类。

使用jQuery通过身份证号获取籍贯、生日、年龄、性别

记事本 > Javascript

<script type="text/javascript">
	//给身份证文本框添加一个失去焦点事件：  
	$("#idNumber").blur(function() {  
	    //获取身份证号码，例如：412702199301010000，这里不再判断身份证号是否合法 
	    var idNumber = $("#idNumber").val(); 
	    //定义籍贯、出生日期、性别、年龄等变量
	    var provinces,province,birthday,currDate,month,date,age,sex;  
		
	    //一、获取籍贯，由于数据量比较大，所以这里只获取到省：  
	    //定义地区数组    
	    provinces = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };  
	    province = provinces[parseInt(idNumber.substr(0, 2))];  
	    //二、出生日期   
	    birthday = idNumber.substring(6, 10) + "-" + idNumber.substring(10, 12) + "-" + idNumber.substring(12, 14);  
	    //三、计算年龄  
	    currDate = new Date();  
	    month = currDate.getMonth() + 1;  
	    date = currDate.getDate();  
	    age = currDate.getFullYear() - idNumber.substring(6, 10) - 1;  
	    //判断年龄  
	    if (idNumber.substring(10, 12) < month || (idNumber.substring(10, 12) == month && idNumber.substring(12, 14) <= date)) {  
	        age++;  
	    }  
	    //四、获取性别  
	    if (parseInt(idNumber.substr(16, 1)) % 2 == 1) {  
	        //男  
	        sex = "man";  
	    } else {  
	        //女  
	        sex = "woman";  
	    }  
	    
	    //赋值  
	    $("#province").val(province);  
	    $("#birthday").val(birthday);  
	    $("#age").val(age);  
	    $("input[name='sex'][type=radio][value='" + sex + "']").attr("checked", true);  
	}); 
</script>

本条目发布于2022-10-08。属于Javascript分类。

最新可用ip地址查询接口

记事本 > Javascript

网易云接口
http://ip.ws.126.net/ipquery?ip=[IP地址]
搜狐接口
http://pv.sohu.com/cityjson?ie=utf-8
爱奇艺接口
http://ip.geo.iqiyi.com/cityjson?format=json&ip=[IP地址]
ip-api
http://ip-api.com/json/[IP地址]?lang=zh-CN
太平洋电脑网接口
http://whois.pconline.com.cn/ipJson.jsp?ip=[IP地址]&json=true
腾讯接口
https://apis.map.qq.com/ws/location/v1/ip?output=jsonp&key=KUQBZ-FYDCU-YMVVN-2DDW5-7WDYE-5JBJR&ip=[IP地址]&callback=jQuery18301852690032249129_1600324416562&_=1600324417180
ip.cn
https://www.ip.cn/api/index?ip=&type=0
bilibili
https://api.bilibili.com/x/web-interface/zone
speedtest
https://forge.speedtest.cn/api/location/info

本条目发布于2022-08-03。属于Javascript分类。

[ZY:PageStyle]

1 2 3 4 5

搜索

分类