加法运算、 && || 、赋值运算

大海里没有水

已于 2023-11-19 14:22:44 修改

阅读量239

点赞数

文章标签：前端

于 2023-11-05 20:42:46 首次发布

本文链接：https://blog.csdn.net/Anna_Liqi/article/details/134218475

版权

一、加法运算
在这里插入图片描述

二、&& ||

三、赋值运算

在这里插入图片描述

四、js类型就八种：
在这里插入图片描述
五、css权重、

六：布局，尽量使用块盒。
七、小数精度存储的问题：存的不精确，算的肯定也是有问题的。

在这里插入图片描述

八、找单身狗算法题

/**
 * nums数组中包含1个或多个正整数，只有一个数字只出现1次
 */
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7];
function uniqueNumber(nums) {
  return nums.reduce((a, b) => a ^ b);
}

console.log(uniqueNumber(nums));// 8

使用的是异或运算：相同0，不同1
异或满足交换律；两个相同的数字异或一定的0；0和一个数字进行异或，一定得到那个数字。

九、getElementByClassName、querySelector()
在这里插入图片描述
十、数字格式化：

var str = "10000000000000";

// 1.使用正则表达式匹配一个或多个 000
// /(\d{3})+$)/g
// 2.我们要匹配的是000前面的位置，需要使用前瞻
// /(?=(\d{3})+$)/g
// \B非单词边界
var result = str.replace(/(?=\B(\d{3})+$)/g, ",");
console.log(result); // 10,000,000,000,000

十一、js获取元素尺寸：
在这里插入图片描述

在这里插入图片描述
十二、监控某个元素是否出现在可视区域里面：

var loading = document.querySelector(".loading");

// 建立观察者: 第一个参数（重叠了要做什么）；第二个参数（与可视视口重叠了百分之几）
var ob = new IntersectionObserver(
  function (entries) {
    var entry = entries[0];
    console.log("entry", entry);
    // 为true表示进入，超过10%；为false表示小于10%
    if (entry.isIntersecting) {
      // 加载更多列表
    }
  },
  {
    thresholds: 0.1,
  }
);
// 观察
ob.observe(loading);

十二：flip动画：
在这里插入图片描述
十三、保持宽高比：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 90%;
        margin: 0 auto;
        background-color: tomato;
        /* 宽度变化，高度随着变化，形成一个百分比 */
        /* height: 300px; */
        /* 不需要设置宽高了，可以使用aspect-radio,宽高比 */
        aspect-ratio: 16/9;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

十三：卡片翻转效果：

<!--
 * @des: ''
 * @author: fengbin.chen
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .card {
      position: relative;
      width: 200px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
     

      /* 3D效果 */
      perspective: 500px;
    }
    .face {
      position: absolute;
      transition: all 0.5s;
      /* 翻转背面隐藏 */
      backface-visibility: hidden;
      padding: 10px;
      border: 2px solid salmon;
    }
    img {
      width: 100px;
      opacity: .9;
    }
    .card:hover .face {
      transform: rotateY(-180deg);
    }
    .back {
      /* transform: rotateY(-180deg); */
      backface-visibility: hidden;
      transition: all 0.5s;
    }
    .card:hover .back {
      transform: rotateY(0deg);
      backface-visibility: visible;
    }
  </style>
</head>
<body>
  <div class="card">
    <img class="face" src="../32．经典面试题/images/1.jpg" alt="">
    <p class="back">
      <span>狠人大帝</span>
    </p>
  </div>
</body>
</html>