前端小技巧集锦【持续更新中……】

记录一下前端开发过程中遇到的一些小问题以及解决方法。

 

目录

目录

最近更新

2019/10/23：在控制台使用document.designMode帮助进行调试

知识汇总

▍HTML篇

一、加快audio标签音乐加载

▍CSS篇

一、图片剪裁防止图片变形

二、消除input框选中时外边框

三：带有透明度的渐变

四：a标签的四个伪类定义顺序

五、流光字

六：使用伪元素制作带三角的气泡

七：一个元素连续执行多个动画

八：段落首行缩进

九：滚动条强制显示

▍JS篇

一、捕获键盘输入事件

二、DIV自动滚动到底部

三、JS/JQuery获取元素到浏览器顶部的距离

四、监听H5运行在前台还是后台

五、解决ios12的微信上键盘收起后，页面不滑动的问题

六、在控制台使用document.designMode帮助进行调试

---

 

 

最近更新

2019/11/28：滚动条强制显示

 

知识汇总

 

▍HTML篇

 

一、加快audio标签音乐加载

示例：

原理：给preload设置确定的属性值，例如音频设为“meta”

 

▍CSS篇

 

一、图片剪裁防止图片变形

示例：

.icon-container img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 50%;
}

效果：

 

二、消除input框选中时外边框

示例：

.right .input-container .input-content input {
	border: 0;
	padding: 10px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/* 去除input框外边框  */
	outline: none;
	font-size: 18px;
}

效果：

 

三：带有透明度的渐变

示例：

background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));

效果：

 

四：a标签的四个伪类定义顺序

示例：css

a:link {
	color: white;
}
/* 未被访问的链接 */

a:visited {
	color: #00FF00;
}
/* 已被访问的链接 */

a:hover {
	color: #FF00FF;
}
/* 鼠标指针移动到链接上 */

a:active {
	color: #0000FF;
}
/* 正在被点击的链接 */

 

五、流光字

示例：

span {
	font-family: "微软雅黑";
	font-size: 22px;
	line-height: 50px;

        /*关键代码*/
	background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-background-size: 200% 100%;
	-webkit-animation: masked-animation 4s infinite linear;
}

/*关键代码*/
@-webkit-keyframes masked-animation {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -100% 0;
	}
}

演示地址

http://hbuecx.club/tool/dayAWord

 

六：使用伪元素制作带三角的气泡

示例：

.reat{
  margin: 100rpx;
  width: 400rpx;
  height: 400rpx;
  border: 1rpx solid #AAA;
  position: relative;
}

.reat::before{
  content: '';
  position: absolute;
  top: -40rpx;
  left: 190rpx;
  width: 0;
  height: 0;
  font-size: 0;
  border-width: 20rpx;
  border-style: solid dashed dashed;
  border-color: transparent transparent #AAA;
}

.reat::after{
  content: '';
  position: absolute;
  top: -35rpx;
  left: 190rpx;
  width: 0;
  height: 0;
  font-size: 0;
  border-width: 20rpx;
  border-style: solid dashed dashed;
  border-color: transparent transparent white;
}

效果：

实现原理：将::before和::after都使用border构造成三角形，设置::before伪元素的边框颜色与主体区域边框颜色一致，设置::after伪元素的边框颜色与页面底色一致，然后使用::after伪元素遮盖部分::before伪元素，流出最外层边线，这样上面的效果就形成了。

 

七：一个元素连续执行多个动画

示例：

.demo {
    -webkit-animation-name: bounceInLeft1, bounce1;
    -webkit-animation-duration: 2s, 1.5s;
    -webkit-animation-timing-function: ease, linear;
    -webkit-animation-delay: 5.2s, 7.2s;
    -webkit-animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards, none;
    
    animation-name: bounceInLeft1, bounce1;
    animation-duration: 2s, 1.5s;
    animation-timing-function: ease, linear;
    animation-delay: 5.2s, 7.2s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}

原理：同时设置多个动画，利用延时实现动画效果

 

八：段落首行缩进

示例：

.demo {
    text-indent: 2em;  /*em是相对单位，2em即现在一个字大小的两倍*/
}

原理：text-indent可以使得容器内首行缩进一定单位

 

九：滚动条强制显示

浏览器默认在不滚动的时候会隐藏滚动条，虽然这个设计非常好。但是偶尔我们在产品设计中需要让我们的滚动条始终显示，这就需要我们去自定义样式了。

示例：

// 隐藏默认的滚动条
.ant-table-body::-webkit-scrollbar {
    -webkit-appearance: none;
}

// 设置垂直滚动条宽度
.ant-table-body::-webkit-scrollbar:vertical {
    width: 11px;
}

// 设置水平滚动条高度
.ant-table-body::-webkit-scrollbar:horizontal {
    height: 11px;
}

// 自定义滚动条样式
.ant-table-body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, 0.5);
}

 

 

▍JS篇

 

一、捕获键盘输入事件

示例：

document.onkeydown = function(event) {
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(e && e.keyCode == 27) { // 按 Esc 
		// 要做的事情
	}
	if(e && e.keyCode == 113) { // 按 F2 
		// 要做的事情
	}
	if(e && e.keyCode == 13) { // enter 键
		// 要做的事情
	}
};

附录：常用键盘键码

键码	对应键盘键
8	Backspace
9	Tab
12	Clear
13	Enter
16	Shift
17	Control
18	Alt
35	End
36	Home
37	Left
38	Up
39	Right
40	Down
46	Delete
47	Help
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9
65	a
66	b
67	c
68	d
69	e
70	f
71	g
72	h
73	i
74	j
75	k
76	l
77	m
78	n
79	o
80	p
81	q
82	r
83	s
84	t
85	u
86	v
87	w
88	x
89	y
90	z
96	KP_0
97	KP_1
98	KP_2
99	KP_3
100	KP_4
101	KP_5
102	KP_6
103	KP_7
104	KP_8
105	KP_9

键码	对应键盘键
112	F1
113	F2
114	F3
115	F4
116	F5
117	F6
118	F7
119	F8
120	F9
121	F10
122	F11
123	F12
124	F13
125	F14
126	F15
127	F16
128	F17
129	F18
130	F19
131	F20
132	F21
133	F22
134	F23
135	F24

 

二、DIV自动滚动到底部

示例：css

.right .chat-container {
	padding: 10px;
	height: 80%;
	overflow-y: scroll;
	box-sizing: border-box;
}

js：关键代码

$(".chat-container").scrollTop($(".chat-container")[0].scrollHeight);

【注意】无论是id选择器还是class选择器都要加[0]。

 

三、JS/JQuery获取元素到浏览器顶部的距离

示例：

// 原生JS
// 获取div距离顶部的距离
var mTop = document.getElementsByClassName('mdiv')[0].offsetTop;
// 减去滚动条的高度
var sTop = document.body.scrollTop;
var result = mTop - sTop;
console.log(result);

// Jquery
mTop = $('.mdiv')[0].offsetTop;
sTop = $(window).scrollTop();
result = mTop - sTop;
console.log(result);

提升篇：及时获取滚动条滚动过程中元素到浏览器顶部的距离

// 全局滚动条
window.onscroll = function() {
	getScrollTop();
};

// 特定容器内部滚动条
document.getElementById("container").onscroll = function() {
    getScrollTop();
};

function getScrollTop(){
    // 原生JS
    // 获取div距离顶部的距离
    var mTop = document.getElementsByClassName('mdiv')[0].offsetTop;
    // 减去滚动条的高度
    var sTop = document.body.scrollTop;
    var result = mTop - sTop;
    console.log(result);

    // Jquery
    mTop = $('.mdiv')[0].offsetTop;
    sTop = $(window).scrollTop();
    result = mTop - sTop;
    console.log(result);
}

 

四、监听H5运行在前台还是后台

示例：当页面运行在后台的时候，关闭音乐；当页面运行在前台的时候，打开音乐

const audio = document.getElementById('audio');
document.addEventListener('qbrowserVisibilityChange', function (e) {
    if (audio) {
        if (e.currentTarget.hidden) {
            audio.pause();
        } else if (self.state.isPlayMusic) {
            audio.play();
        }
    }
}, true); 
document.addEventListener('visibilitychange', function (e) {
    if (audio) {
        if (e.currentTarget.hidden) {
            audio.pause();
        } else if (self.state.isPlayMusic) {
            audio.play();
        }
    }
}, true);

原理：设置监听器，监听页面显示的变化

 

五、解决ios12的微信上键盘收起后，页面不滑动的问题

示例：

function isIos12() {
    const ua = navigator.userAgent.toLowerCase();
    const osReg = /iphone|ipad/;
    const versionReg = /os (\d+)_/;
    if (!ua.match(osReg)) return false;
    return Number(ua.match(versionReg)[1]) === 12;
}

// 解决ios12的微信上键盘收起后，页面不滑动的问题
function scrollPage() {
    if (isIos12()) {
        const pageTop = $(window).scrollTop();
        window.scrollTo(0, pageTop + 1);
    }
}

 

六、在控制台使用document.designMode帮助进行调试

示例：

在控制台更改其属性值完成后，就可以自由编辑页面里的元素了，快去试试吧。