JavaScript代码段

· 2021-12-26 · # javascript

返回一个键盘

// 用字符串返回一个键盘图形
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

生成日历

// 创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days).toLocaleString());

生成随机十六进制代码（生成随机颜色）

// 生成随机十六进制代码 如：'#c618b2'
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

自定义长度的随机字符串

function RandomString(len) {
  var rdmString = "";
  for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
  return rdmString.substr(0, len);
}

JS实现图片压缩、预览、图片Base64转换上传

//html
<input type="file" onchange="uploadFile()" accept="image/*"><br>
<img src="" alt="Image preview...">
//script
**
   * @description: 压缩base64图片
   * @param {file:上传的文件}  
   * @param {maxLen:限制最大长度、高度}  
   * @param {callBack:回调函数}  
   */
  function ImgToBase64(file, maxLen, callBack) {
  var img = new Image();
  var reader = new FileReader();//读取客户端上的文件
  reader.onload = function () {
      var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
      img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
  };
  img.onload = function () {
      //生成比例
      var width = img.width, height = img.height;
      //计算缩放比例
      var rate = 1;
      if (width >= height) {
          if (width > maxLen) {
              rate = maxLen / width;
          }
      } else {
          if (height > maxLen) {
              rate = maxLen / height;
          }
      };
      img.width = width * rate;
      img.height = height * rate;
      //生成canvas
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var base64 = canvas.toDataURL('image/jpeg', 0.9);//压缩后的base64图片
      callBack(base64);
  };
  reader.readAsDataURL(file);
}
//调用方法
function uploadFile(){
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  ImgToBase64(file, 720, function (base64) {
      preview.src = base64;//预览页面上预留一个img元素，载入base64
      preview.width = 300;//设定宽高，不然会自动按照压缩过的图片宽高设定，有可能超出预想的范围。
　　　　　//此处上传base64到服务器，完毕
  });
}

二进制转换十进制

parseInt(100,2) //4

十进制转换二进制

parseInt(4).toString(2) //'100'

实现简单打字效果

<style>
.content:after{
  content:"|";
  animation: blink 1s infinite;
}
@keyframes blink{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
</style>
<body>
<div class="content"></div>
<script>
const dom = document.querySelector(".content");
function writing(data){
  let str = data.split("");
  let index = 0;
  function running(index){
    if(index<str.length){
      dom.innerHTML += str[index];
      setTimeout(running.bind(this),300,++index);
    }
  }
  running(index);
}
writing("每天进步一点点");
</script>

实现延时函数

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)