我的记事本

成长中的全栈开发者

分类目录归档:前端
  • Macy.js 网页流布局JS插件

     下载信息  [文件大小:2.75 KB 下载次数: 次]
    点击下载文件:macy.min

    本条目发布于2025-04-27。属于Javascript分类。
  • html 单选框placeholder及字体颜色设置

    .deal_sell4 input{  text-align: right; color: #555; font-size: 0.92rem; }
    .deal_sell4 input::-webkit-input-placeholder{ font-size: 0.88rem; color: #cccccc;}
    .deal_sell4 input:-moz-placeholder{ font-size: 0.88rem; color: #cccccc;}
    .deal_sell4 input::-moz-placeholder{ font-size: 0.88rem; color: #cccccc;}
    .deal_sell4 input:-ms-input-placeholder{ font-size: 0.88rem; color: #cccccc;}
    本条目发布于2025-04-21。属于Div+CSS分类。
  • 小程序滚动条回到顶部

    wx.pageScrollTo({
    scrollTop: 0, // 滚动到页面的顶部位置
    });
    本条目发布于2025-04-18。属于小程序分类。
  • 小程序分享自定义

        onShareAppMessage: function () {
            let that = this
            return {
                title: that.data.share.title,
                path: '/pages/index/index',
                imageUrl: that.data.share.photo
            }
        },
    本条目发布于2024-10-18。属于小程序分类。
  • 百度坐标转腾讯坐标

    百度地图---->腾讯地图

    function txMap(lng,lat){
      let pi = 3.14159265358979324 * 3000.0 / 180.0;
        let x = lng - 0.0065;
        let y = lat - 0.006;
        let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
        let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
        lng = z * Math.cos(theta);
        lat = z * Math.sin(theta);
        return {
          'lng': lng,
          'lat': lat
        };
    }

    腾讯地图---->百度地图

    function txMap_to_bdMap(lat,lng){
    let pi = 3.14159265358979324 * 3000.0 / 180.0;
    let x = lng;
    let y = lat;
    let z =Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * pi);
    let  theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * pi);
    lng = z * Math.cos(theta) + 0.0065;
    lat = z * Math.sin(theta) + 0.006;
    return {'lng':lng,'lat':lat};
    }
    本条目发布于2024-07-11。属于Javascript分类。
  • jQuery 来处理常见的输入框的事件

    input 事件:

    $('#myInput').on('input', function() {
      console.log('Input value changed:', $(this).val());});

    change 事件:

    $('#myInput').on('change', function() {
      console.log('Input value changed:', $(this).val());});

    focus 事件:

    $('#myInput').on('focus', function() {
      console.log('Input focused');});

    blur 事件:

    $('#myInput').on('blur', function() {
      console.log('Input blurred');});

    keydown 事件:

    $('#myInput').on('keydown', function(event) {
      console.log('Key pressed:', event.key);});

    keyup 事件:

    $('#myInput').on('keyup', function(event) {
      console.log('Key released:', event.key);});

    keypress 事件:

    $('#myInput').on('keypress', function(event) {
      console.log('Character typed:', event.key);});

    paste 事件:

    $('#myInput').on('paste', function(event) {
      const pastedText = event.originalEvent.clipboardData.getData('text');
      console.log('Pasted text:', pastedText);});

    cut 事件:

    $('#myInput').on('cut', function() {
      console.log('Text cut');});

    select 事件:

    $('#myInput').on('select', function() {
      const selectedText = $(this).val().substring(this.selectionStart, this.selectionEnd);
      console.log('Selected text:', selectedText);});
    本条目发布于2023-10-03。属于Javascript分类。
  • 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弹出遮罩层,禁止滚动条滚动,隐藏遮罩层,允许滚动条滚动

    //禁止滚动条滚动
    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

    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分类。
  • 微信公众号调用扫一扫功能

    <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分类。