前端战友踩坑记录

最新推荐文章于 2021-01-19 14:22:43 发布

原创最新推荐文章于 2021-01-19 14:22:43 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #函数 #踩坑

前端战友踩坑专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了前端开发中常见的问题及解决方案，包括JavaScript定时器循环、事件循环机制、表单提交处理、AJAX请求细节、CSS样式调整技巧等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript部分

##HTML部分

CSS部分

构建工具部分

JavaScript部分

2018-03-26 下列语句为什么会循环6次？

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次。

2018-03-27 input中accept属性的介绍？
传送门
2018-03-31 promise所包含的异步事件会进入到Event-Loop里面去么？

//例子如下，请问输出什么？
 	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,传送门

2018-05-02 提交表单且不让页面跳转的实现

//方案一
<!-- 空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>

2018-05-11 原生ajax中GET请求数据和POST请求数据的放置位置
原生大法好

        // 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);
                }
            }
        }

2018-06-19 表单onreset方法理解的偏差。

<!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() ：将所有表单域重置为默认值。
`**

2018-06-21 if语句，if…else…语句 if…else if…else语句的不规范使用。

 // 在开发中，我的错误语句示例如下
    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部分

2018-04-03 表单中的按钮一点击就提交

表单中button如果不声明type类型，则默认为type="submit"

2018-05-11 jquery中.attr()和.prop()方法的区别，properties和attributes之间的区别。
传送门

CSS部分

2018-04-05 input设置border-radius，怎么去除阴影?

 input{
    border-radius:5px;
 }
 input{
   border:1px solid lightgray;
   //去除内部阴影
 }
 input{
   outline:none;
   //去除点击时外部的蓝色框框
 }

2018-04-06 表单文本框有大于一个相同的name值，form[“name”]等方法会实效。

<!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>

2018-04-09 使用表格垂直局中的方法时，某个属性冲突导致垂直局中不生效。

div{
   //float:left;
   display:table;
}
p{
   display:table-cell;
   vertical-align:center;
}
<div>
   <p></p>
</div>
//解决办法，浮动元素和display:table属性产生冲突

2018-04-15 inline-block不在一行问题

//一：inline-block会产生4px的距离  使用font-size也可以使用margin-left:-4px

text-size-ajust 阻止屏幕横放时字体变大未解决，问题是不管用
2018-05-09 当元素使用overflow:hidden或者使用overflow:scroll时，其元素上的伪元素after和before失效。

reason:因为after和before相当于元素来说是多出来的那块，所以就被隐藏掉了，解决办法时再套一个元素。[[如有更好的解释和答案，欢迎提出]]。

2018-06-12 transition对display：none不生效的解决办法。

这个也算是以前我踩的坑吧,从W3C上了解到transition对于display:none的元素并不起作用。
前两天看到一篇博文，讲解了display：none不产生transition的解决办法。
第一种解决办法：监听transitionend事件，事件结束候再执行display:none;
第二种解决办法：使用JS属性一些强制reflow。

示例代码如下：

<!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

2018-06-20 去除google浏览器和firefox浏览器input框的自动提示。

<!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'>

2018-07-02 屏幕缩小时，期望值在同一行，但实际显示不在一行。

解决办法：在浏览器渲染上面，横向的布局是按照标签来作为参考物的，若想使其在同一行显示，不因为在屏幕缩小的情况下导致不一行，那么就在外面加上一对儿标签。

2018-11-07 ios中input框无法输入文字

这个是一个提交的页面但是总是无法输入进去文字 在uc中是可以的 但是在微信中 或者ios自带浏览器是无法输入的  绞尽脑汁  找了半天  才发现自己多加了一段代码(这个代码是模版中自带的   我靠)

代码如下

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

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