关于html:前端一些算法amp日常实践

<!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>
    body{
      margin:0;
      padding:0;
    }
    .box{
      background-color: aquamarine;
      width: 100px;
      height: 100px;
      position: absolute;
      top:0;
      left:0;
      cursor: move;
    }
  </style>
</head>
<body>
 <div class="box" id='box'>
     
 </div>
</body>
<script>

  // 鼠标挪动过快，鼠标会脱离拖拽的盒子，在盒子里面鼠标挪动无奈触发盒子的 mousemove，盒子不会挪动，let dom = document.getElementById('box')
  console.log('dom',dom);
  dom.addEventListener('mousedown', down)
  function down(e){
    this.initialScreenX = e.screenX;
    this.initialScreenY = e.screenY;
    this.CLickX = e.clientX;
    this.ClickY = e.clientY;
    this.BoxX = this.offsetLeft;
    this.BoxY = this.offsetTop;
    this._MOVE = move.bind(this)
    this._UP = up.bind(this);
    document.addEventListener('mousemove', this._MOVE);
    document.addEventListener('mouseup', this._UP);
    // this.setCapture();}
  function move (e){
    let curBoxX = e.clientX - this.CLickX + this.BoxX;
    let curBoxY = e.clientY - this.ClickY + this.BoxY;
    if(curBoxX < 0){curBoxX = 0} 
    if(curBoxY < 0){curBoxY = 0} 
    dom.style.left = curBoxX  + 'px';
    dom.style.top = curBoxY + 'px';
  }
  function up(e){document.removeEventListener('mousemove', dom._MOVE)
     document.removeEventListener('mouseup', dom._UP)
    //  this.releaseCapture();}
</script>
</html>

function add(str1,str2){let num1 = str1.split('').reverse();
  let num2 = str2.split('').reverse();
  console.log(num1, num2)
  let nextNum = 0;
  let total = [];
  for(let i = 0;i < num2.length;i++){
    let curNum = 0;
    if(num1[i]){curNum = Number(num1[i]) + Number(num2[i]) + Number(nextNum);
      if(curNum >= 10){nextNum = String(curNum)[0];
         total.push(String(curNum)[1]);
      } else {
        nextNum = 0;
        total.push(curNum)
      }
    } else {curNum = Number(num2[i]) + nextNum;
      if(curNum >= 10){nextNum = String(curNum)[0];
        total.push(String(curNum)[1]);
      } else {
        nextNum = 0
        total.push(curNum)
      }
    }
  }
  return total.reverse().join('');
}

let d = add(
             "123456789123456789123456789123456789123456789123456734",
"1241519123456789123456789123456789123456789123456789123451234567891")

 去重
let arr = [12, 23, 12, 15, 25, 23, 25, 14,16];

let a = Array.form(new Set(arr))
let b = [...new Set(arr)]


let newArr = []; // 第一种计划
// 拿出以后项和前面的进行比拟，只须要 length -1 项和前面比拟
for(let i = 0; i < arr.length - 1;i++){let item = arr[i];
  args = arr.slice(i+1); // 以后项后的所有数据
  if(args.indexof(item) > -1){
    // 如果以后我的项目蕴含能够删除，也能够放入新数组
    // 第二种
    // arr.splice(i,1);
    // splice 原来数组扭转，如果 i ++，则会数组塌陷
    // 性能不好，以后项删除，前面索引都要扭转
    // i--;

    // 第三种
    // arr[i] = null;

    // arr[i] = arr[arr.length -1];
    // arr.length --;
    // i--;

  } else {// newArr.push(item)
  }
}

// arr.filter(item => item !== null);

// 对象键值对, 那数组的每项向新容器中存，如果有把当项干掉
// let obj = {}
// for(let i = 0; i < arr.length; i++){//   let item = arr[i];
//   if(typeof obj[item] !== 'undefined'){//     arr[i] =  arr[arr.length - 1];
//     arr.length--;
//     i--;
//     continue;
//   }
//   obj[item] = item;
// }
// console.log(arr);

冒泡排序


function Bubble(arr){
  let temp = null;
  for(let i = 0; i < arr.length-1;i++){for(let j = 0;j < arr.length-1-i;j++){if(j[i] > j[i+1]){
        // 以后项大于后一项
        temp = j[i];
        j[i] = j[i+1]
        j[i+1] = temp;
      }
    }
  }
  return arr;
}

插入排序（扑克牌）

function insert(arr){
// 1、筹备一个新数组，用来存储抓到手里的牌，开始先抓一张牌进来
let handle = [arr[0]];
// 2、从第二项开始顺次抓牌，始终到台面上的牌抓光
for(let i= 1; i< arr.length;i++){
 // a 是新抓的牌
 let a = arr[i];
 // 和 handle 手里的牌顺次比拟
 for(let j = handle.length -1;j >= 0;j--){
   // 每一次要比拟手里的牌, 从大到小比拟
   let b = handle[j];
   // 如果以后新牌 A 比要比拟的牌 B 大了，把 A 放到 B 的前面;
   if(a > b){handle.splice(j+1,0,a);
     break;
   }
   // 曾经比到第一项，咱们把新牌放到手中最后面即可
   if(j == 0){handle.unshift(a)
   }
 }
} 
 return handle
}

疾速排序（两头值，大右小左，顺次递归，最初合并）

function quick(arr){
 // 4、完结递归，当 arr 中小于等于一项，则不必解决
 if(arr.length <= 1){return arr}
 // 1、找到数组中的两头项，在原有的数组中把他移除 
 let middleIndex = Math.floor(arr.length/2);
 let middleValue = arr.splice(middleIndex,1)[0];
// 2、筹备左右两个数组，循环剩下数组中的每一项，比以后项小的放在右边数组中，反之放到左边的数组中
 let arrLeft = [];
 let arrRight = [];
 for(let i = 0; i< arr.length;i++){let item = arr[i];
  item < middleValue? arrLeft.push(item) : arrRight.push(item); 
 }
// 3、递归形式让左右两边的数组继续这样的解决，始终到左右两边都排好序了，（最初让右边 + 两头 + 左边拼接成为最初的后果）return quick(arrLeft).concat(middleValue, quick(arrRight));
}

关于html:前端一些算法amp日常实践

前端拖拽

大数相加

数组去重

排序

扁平化