博主记录一下日常中开发遇到的一些小问题，也许能有少许帮助。(￣▽￣)~*
1、使用setTimeout延迟执行函数时
image.png
当向这样书写时，会立即执行settimeout内的函数，就不会有延时效果了。
image.png
这样写才有效果，具体原因没有去追究了(｡･ω･｡)
2、移动端解决点击图片自动全屏显示的问题
当我们用img标签去使用一张图片时，在某些手机浏览器中，点击这张图片会自动的全屏显示，解决的措施有三种：
1.在img元素上添加 onclick="return false"
<img src="a.png" 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%;
}
