前端开发工作中的一些小心得

博主记录一下日常中开发遇到的一些小问题，也许能有少许帮助。(￣▽￣)~*

1、使用setTimeout延迟执行函数时

image.png

当向这样书写时，会立即执行settimeout内的函数，就不会有延时效果了。

image.png

这样写才有效果，具体原因没有去追究了(｡･ω･｡)

2、移动端解决点击图片自动全屏显示的问题

当我们用img标签去使用一张图片时，在某些手机浏览器中，点击这张图片会自动的全屏显示，解决的措施有三种：

• 1.在img元素上添加 onclick="return false"
  

• 2.图片用背景图的方式插入
  background:url(a.png) norepeat center;

• 3.使用js事件阻止默认行为的方法，这里需要注意哦！
  var img = document.getElementById('banner');
  img.addEventListener('click',function(e){
  　　e.preventDefault();
  });

3、判断是pc端还是移动端

直接贴代码了

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {  
   alert('手机端')  
}else{  
   alert('PC端')  
}  

4、清空所有cookie以及session

 sessionStorage.clear();//清空session
 function clearAllCookie() {
                var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (var i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
            }

5、取得url后面携带的值

function getQueryString(name) {
   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
   var r = window.location.search.substr(1).match(reg);
   if (r != null) {
      return unescape(r[2]);
   }
  return null;
}

6、页面滚动条的实现和样式（chrome浏览器）

::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

注意父级要有高度啊，使用min-height会有问题，需要留意

7、使用rem布局

在页面开始之前贴上下面这串代码，动态的设置font-size的值，然后再使用rem

 ! function (n) {
        var e = n.document,
            t = e.documentElement,
            i = 1024,
            d = i / 100,
            o = "orientationchange" in n ? "orientationchange" : "resize",
            a = function () {
                var n = t.clientWidth || 320;
                t.style.fontSize = n / d + "px";
            };
        e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
    }(window);

8、做一个圆环，被点击后，内部出现实心圆

效果图如下：

image.png

css代码：

.circle {
    position: absolute;
    top: 12.4rem;
    left: 2.5rem;
    height: 20px ;
    width:20px;
    border-radius: 50%;
    border: 2px solid #25c4c7;   
}
.circle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    background-color: #25c4c7;
    border-radius: 50%;
}