LeCheng
Search K

Appearance

前端战友踩坑记录 ​

JavaScript部分 ​

HTML部分 ​

CSS部分 ​

构建工具部分 ​

JavaScript部分 ​

  • 下列语句为什么会循环6次？
js
var arr = [1, 2, 3, 4, 5],
  sinArr = "";
var timer = setInterval("go(arr)", 1000);
function go(oArr) {
  sinArr = oArr.pop();
  console.log(sinArr);
  if (sinArr == oArr[0]) {
    clearInterval(timer);
  }
}
//输出：5,4,3,2,1，undefined
//原因：因为当进行第五次pop时，oArr数组中已经没有值了，所以第五次sinArr!=oArr[0],所以会输出6次。
  • input中accept属性的介绍？传送门
  • promise所包含的异步事件会进入到Event-Loop里面去么？
js
//例子如下，请问输出什么？
console.log("1");
setTimeout(() => {
  console.log("2");
}, 1);
var p = new Promise(function (resolve, reject) {
  for (var i = 0; i < 10000000; i++) {
    if (i == 9999999) {
      console.log("3");
    }
  }
  console.log("4");
  resolve();
})
  .then(() => {
    console.log("5");
  })
  .then(() => {
    console.log("6");
  })
  .then(() => {
    console.log("7");
  });
new Promise((resolve, reject) => {
  resolve(20);
})
  .then(() => {
    console.log("8");
  })
  .then(() => {
    console.log("9");
  });
// 答案是：1 3 4 5 8 6 9 7 2
// promise不会进入到事件栈中
// setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.then()在本轮“事件循环”结束时执行。

说到底还是JS浏览器端的eventLoop,传送门

  • 提交表单且不让页面跳转的实现
html
//方案一
<!-- 空iframe，用于协助处理form提交后不进行页面跳转的问题 -->
<iframe
  id="iframe_display"
  name="iframe_display"
  style="display: none;"
></iframe>
<!--将表单指向该iframe -->
<form
  action="saveTreeNode"
  method="post"
  class="form-horizontal"
  role="form"
  target="iframe_display"
>
  //方案二
  <script>
    function PostData() {
      $.ajax({
        type: "POST",
        url: "post.go",
        data: "",
        success: function (msg) {},
      });
      return false;
    }
  </script>
  <form onsubmit="return PostData()">
    <input type="text" value="" />
    <input type="submit" />
  </form>
</form>
  • 原生ajax中GET请求数据和POST请求数据的放置位置
js
// POST请求
var xhr = new XMLHttpRequest();
xhr.open("post", reqURL, true);
//只要是POST请求的参数的请求主体都必须写在xhr.send()方法中
xhr.send("user=yanjie&pass=12345&act=login");
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.status == 200 || xhr.status == 304) {
      callBack(xhr.responseText);
    }
  }
};
// GET请求
var xhr = new XMLHttpRequst();
xhr.open("get", reqURL + "?user=yanjie&pass=12345&act=login", true);
//只要是GET请求的，其参数都必须写在reqURL的后面
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if (xhr.status == 200 || xhr.status == 304) {
      callBack(xhr.responseText);
    }
  }
};
  • 表单onreset方法理解的偏差。
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <form action="https://www.baidu.com">
      <input type="text" value="" />

      <select name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="" selected>3</option>
      </select>
      <button type="submit">提交</button>
      <button type="reset" id="button">重制</button>
    </form>
  </body>
  <script>
    document.forms[0].onreset = function () {
      for (var i = 0; i < document.forms[0].length - 2; i++) {
        document.forms[0][i].value = "";
      }
    };
  </script>
</html>
//当你点击onreset的时候，发现表单中的值并没有清空，反而是页面进来的时候的初始值，一开始比较迷惑，不知道问题出在哪里。后来查JS高程得知。
**` reset() ：将所有表单域重置为默认值。 reset() ：将所有表单域重置为默认值。
reset() ：将所有表单域重置为默认值。 `**
  • if语句，if...else...语句 if...else if...else语句的不规范使用。
js
 // 在开发中，我的错误语句示例如下
    var a = 4;
    if (a == 1) {
        console.log(1);
    }
    if (a == 4) {
        console.log(2);
    }
    if (a == 3) {
        console.log(3);
    }
    else{
        console.log(4)
    }
 结果输出为2,4，并不是想像中的结果。找了好久才找到错误，自己好菜哦。
 // 其实在开发中正确的做法是使用if...else if...else语句，这样输出的结果就对了
    var a = 4;
    if(a == 1){
        console.log(1);
    }
    else if(a == 4){
        console.log(2);
    }
    else if(a == 3){
        console.log(3);
    }
    else{
        console.log(4)
    }

HTML部分 ​

  • 表单中的按钮一点击就提交
text
表单中button如果不声明type类型，则默认为type="submit"
  • jquery中.attr()和.prop()方法的区别，properties和attributes之间的区别。传送门

CSS部分 ​

  • input设置border-radius，怎么去除阴影?
css
 input{
    border-radius:5px;
 }
 input{
   border:1px solid lightgray;
   //去除内部阴影
 }
 input{
   outline:none;
   //去除点击时外部的蓝色框框
 }
  • 表单文本框有大于一个相同的name值，form["name"]等方法会实效。
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <input type="text" name="show" />
      <input type="text" name="show" />
    </form>
  </body>
  <script>
    document.forms[0]["show"].value = 1111;
    //会失效，导致不管用value值不能现实
  </script>
</html>
  • 使用表格垂直局中的方法时，某个属性冲突导致垂直局中不生效。
html
div{ //float:left; display:table; } p{ display:table-cell;
vertical-align:center; }
<div>
  <p></p>
</div>
//解决办法，浮动元素和display:table属性产生冲突
  • inline-block不在一行问题
text
//一：inline-block会产生4px的距离  使用font-size也可以使用margin-left:-4px
  • 当元素使用overflow:hidden或者使用overflow:scroll时，其元素上的伪元素after和before失效。
text
reason:因为after和before相当于元素来说是多出来的那块，所以就被隐藏掉了，解决办法时再套一个元素。[[如有更好的解释和答案，欢迎提出]]。
  • transition对display：none不生效的解决办法。
text
这个也算是以前我踩的坑吧,从W3C上了解到transition对于display:none的元素并不起作用。
前两天看到一篇博文，讲解了display：none不产生transition的解决办法。
第一种解决办法：监听transitionend事件，事件结束候再执行display:none;
第二种解决办法：使用JS属性一些强制reflow。

示例代码如下：

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    .box {
      display: none;
      background: red;
      height: 20px;
      transition: all 1s ease;
    }
  </style>

  <body>
    <div class="box"></div>
    <button id="btn1">Transition has no effect</button>
    <button id="btn2">Transition takes effect</button>
  </body>

  <script>
    const box = document.querySelector(".box"),
      btn1 = document.querySelector("#btn1"),
      btn2 = document.querySelector("#btn2");
    btn1.addEventListener("click", (e) => {
      box.style.display = "block";
      box.style.background = "blue";
    });
    btn2.addEventListener("click", (e) => {
      box.style.display = "block";
      box.offsetWidth; // 强制执行reflow
      box.style.background = "blue";
    });
  </script>
</html>
<!--上面的代码，当我们点击btn1时背景色的transition失效，而点击btn2则生效，关键区别就是通过box.offsetWidth强制执行reflow，让元素先加入渲染树进行渲染，然后再修改背景色执行repaint。
那么我们可以得到的补救措施就是——强制执行reflow，下面的操作均可强制执行reflow(注意：会影响性能哦！)

offsetWidth, offsetHeight, offsetTop, offsetLeft
scrollWidth, scrollHeight, scrollTop, scrollLeft
clientWidth, clientHeight, clientTop, clientLeft
getComputeStyle(), currentStyle()-->

博主原文：https://segmentfault.com/a/1190000015192045

  • 去除google浏览器和firefox浏览器input框的自动提示。
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    .login-wrapper {
      background: white;
    }

    .login-wrapper .content {
      max-width: 1100px;
      margin: 0 auto;
      padding-top: 100px;
      padding-left: 400px;
    }

    .login-wrapper .content .img-hidden {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .login-wrapper .content .img-hidden input {
      position: absolute;
      top: 0px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 210;
      opacity: 0;
      cursor: pointer;
    }

    label {
      display: inline-block;
      width: 80px;
    }

    .block-babel {
      display: block;
    }

    button {
      padding: 8px 15px;
      background: lightblue;
      color: black;
      border: 0 solid transparent;
      outline: none;
      cursor: pointer;
    }
  </style>

  <body>
    <div class="login-wrapper">
      <div class="content">
        <h3>
          <span>
            <a href="./register.html">注册</a>
          </span>
          <span>
            <a href="javascript:;">登陆</a>
          </span>
        </h3>
        <input type="text" style="display:none" />
        <div class="name-wrapper">
          <label for="name">姓名：</label>
          <input type="text" id="name" name="name-input" />
        </div>
        <div class="passWord-wrapper">
          <label for="password">密码：</label>
          <input
            type="password"
            id="password"
            readonly
            onfocus="this.removeAttribute('readonly');"
            onblur="this.setAttribute('readonly',true);"
            name="password-input"
            autocomplete="new-password"
            autocomplete="off"
          />
        </div>
        <button class="submit" id="button" type="button">提交</button>
      </div>
    </div>
  </body>
</html>
// 针对谷歌的 在密码输入框上，写上：autocomplete='new-password' //
针对谷歌和火狐的,即全能的
<input
  type="password"
  id="password"
  readonly
  onfocus="this.removeAttribute('readonly');"
  onblur="this.setAttribute('readonly',true);"
  name="password-input"
  autocomplete="new-password"
  autocomplete="off"
/>
  • 屏幕缩小时，期望值在同一行，但实际显示不在一行。
text
解决办法：在浏览器渲染上面，横向的布局是按照标签来作为参考物的，若想使其在同一行显示，不因为在屏幕缩小的情况下导致不一行，那么就在外面加上一对儿标签。
  • ios中input框无法输入文字
text
这个是一个提交的页面但是总是无法输入进去文字 在uc中是可以的 但是在微信中 或者ios自带浏览器是无法输入的  绞尽脑汁  找了半天  才发现自己多加了一段代码(这个代码是模版中自带的   我靠)

代码如下

/*-webkit-user-select: none;/*禁掉用户可以选中页面中的内容，*/
把这行代码注视掉就可以了   至于这行代码作用是什么  解释如下

或许你常常不希望用户在你的网站上选择文本,无论是否是出于版权的原因.通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none.
请谨慎使用这个属性：因为大部分用户是来查看信息的,他们可以并存储下来以备将来之用,所以这种方法既无用也无效.如果你禁用了粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容.搞不懂这个属性为什么会被webkit和gecko支持.