常用代码

最新推荐文章于 2022-11-30 22:53:15 发布

JQ...

最新推荐文章于 2022-11-30 22:53:15 发布

阅读量228

点赞数 1

本文链接：https://blog.csdn.net/weixin_42201272/article/details/106268585

版权

// 随机生成id  uuid
const uuid = (_) =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );
// 日期格式化
  function dateFormat(date, format) {
  if (typeof date === "string") {
    var mts = date.match(/(\/Date\((\d+)\)\/)/);
    if (mts && mts.length >= 3) {
      date = parseInt(mts[2]);
    }
  }
  date = new Date(date);
  if (!date || date.toUTCString() == "Invalid Date") {
    return "";
  }
  var map = {
    M: date.getMonth() + 1, //月份
    d: date.getDate(), //日
    h: date.getHours(), //小时
    m: date.getMinutes(), //分
    s: date.getSeconds(), //秒
    q: Math.floor((date.getMonth() + 3) / 3), //季度
    S: date.getMilliseconds(), //毫秒
  };
  format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
    var v = map[t];
    if (v !== undefined) {
      if (all.length > 1) {
        v = "0" + v;
        v = v.substr(v.length - 2);
      }
      return v;
    } else if (t === "y") {
      return (date.getFullYear() + "").substr(4 - all.length);
    }
    return all;
  });
  return format;
}
// 动画函数
  function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      // 步长值写到定时器的里面
      // 把我们步长值改为整数 不要出现小数的问题
      // var step = Math.ceil((target - obj.offsetLeft) / 10);
      var step = (target - window.pageYOffset) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      if (window.pageYOffset == target) {
        // 停止动画 本质是停止定时器
        //因为滚动条事件触发次数不确定定时器清除不完全 所以要在结束为止时候再次清除定时器
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        // if (callback) {
        //     // 调用函数
        //     callback();
        // }
        callback && callback();
      }
      // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
      // obj.style.left = window.pageYOffset + step + 'px';
      window.scroll(0, window.pageYOffset + step);
    }, 15);
  }
  // 统计数组中出现次数最多的字母
function getLetterCount(str) {
  var o = {};

  for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i);
    if (o[chars]) {
      o[chars]++;
    } else {
      o[chars] = 1; //因为chars是一个变量如果写成o.chars的话是不会获取到指定的值因为它是不固定的值，
      // 如果要取出不固定的值必须要用到[],如果要取出固定的值可以用o.chars
    }
  }
  console.log(o);
  var k;
  var str1 = "";
  var max = 0;
  for (k in o) {
    if (o[k] > max) {
      max = o[k];
      str1 = k;
    }
  }
  console.log(max);
  console.log(str1);
  
}
// vue拖动指令
export default {
  install(Vue) {
    Vue.directive("drag", {
      // 1.指令绑定到元素上回立刻执行bind函数，只执行一次
      // 2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
      // 3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效

      // inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
      inserted: function (el) {
        el.onmousedown = function (e) {
          var disx = e.pageX - el.offsetLeft;
          var disy = e.pageY - el.offsetTop;
          document.onmousemove = function (e) {
            el.style.left = e.pageX - disx + "px";
            el.style.top = e.pageY - disy + "px";
          };
          document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
          };
        };
      },
      // 当VNode更新的时候会执行updated，可以触发多次
      updated: function (el) {},
    });
  },
};

圣杯布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        margin: 0 300px 0 200px;
      }
      .main,
      .left,
      .right {
        float: left;
      }
      .main {
        height: 80px;
        width: 100%;
        background-color: yellow;
      }
      .left {
        width: 200px;
        height: 80px;
        background-color: blue;
        margin-left: -100%;
      }
      .right {
        width: 300px;
        height: 80px;
        background-color: pink;
        margin-left: -300px;
      }
      .inner {
        margin: 0 300px 0 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main">
        <div class="inner">hjgkk</div>
      </div>
      <div class="left">l</div>
      <div class="right">r</div>
    </div>
  </body>
</html>