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

向右看齐 2022-05-17 10:22 350阅读 0赞

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

**目录**

最近更新

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%;
    }

效果：

![70][]

### 二、消除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;
    }

效果：

![70 1][]

### 三：带有透明度的渐变 ###

示例：

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

效果：

![70 2][]

### 四：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][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;
    }

效果：

![70 3][]

**实现原理：将::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 键
    		// 要做的事情
    	}
    };

附录：常用键盘键码

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

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>键码</th> 
   <th>对应键盘键</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>112</td> 
   <td>F1</td> 
  </tr> 
  <tr> 
   <td>113</td> 
   <td>F2</td> 
  </tr> 
  <tr> 
   <td>114</td> 
   <td>F3</td> 
  </tr> 
  <tr> 
   <td>115</td> 
   <td>F4</td> 
  </tr> 
  <tr> 
   <td>116</td> 
   <td>F5</td> 
  </tr> 
  <tr> 
   <td>117</td> 
   <td>F6</td> 
  </tr> 
  <tr> 
   <td>118</td> 
   <td>F7</td> 
  </tr> 
  <tr> 
   <td>119</td> 
   <td>F8</td> 
  </tr> 
  <tr> 
   <td>120</td> 
   <td>F9</td> 
  </tr> 
  <tr> 
   <td>121</td> 
   <td>F10</td> 
  </tr> 
  <tr> 
   <td>122</td> 
   <td>F11</td> 
  </tr> 
  <tr> 
   <td>123</td> 
   <td>F12</td> 
  </tr> 
  <tr> 
   <td>124</td> 
   <td>F13</td> 
  </tr> 
  <tr> 
   <td>125</td> 
   <td>F14</td> 
  </tr> 
  <tr> 
   <td>126</td> 
   <td>F15</td> 
  </tr> 
  <tr> 
   <td>127</td> 
   <td>F16</td> 
  </tr> 
  <tr> 
   <td>128</td> 
   <td>F17</td> 
  </tr> 
  <tr> 
   <td>129</td> 
   <td>F18</td> 
  </tr> 
  <tr> 
   <td>130</td> 
   <td>F19</td> 
  </tr> 
  <tr> 
   <td>131</td> 
   <td>F20</td> 
  </tr> 
  <tr> 
   <td>132</td> 
   <td>F21</td> 
  </tr> 
  <tr> 
   <td>133</td> 
   <td>F22</td> 
  </tr> 
  <tr> 
   <td>134</td> 
   <td>F23</td> 
  </tr> 
  <tr> 
   <td>135</td> 
   <td>F24</td> 
  </tr> 
 </tbody> 
</table>

### 二、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运行在前台还是后台 ###

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

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

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

示例：

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

示例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70][]

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

![关注微信公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70 1]

[70]: /images/20220517/96b21ae16eab41878077454cf7cade0f.png
[70 1]: /images/20220517/6bcf62e66ecf4f93b7e147fe59e5b515.png
[70 2]: /images/20220517/9767f16ed7ec4734a1f4b8c53d417863.png
[http_hbuecx.club_tool_dayAWord]: http://hbuecx.club/tool/dayAWord
[70 3]: /images/20220517/d6aa89c5705d47b18632365226622bb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220517/bb0a7d232f67478d960606d819cbb424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70 1]: /images/20220517/a2eca3b6145f4058b552bb0941bbb271.png