:before {content: '';display: inline-block;vertical-align: middle;height: 100%; }

?↑? 自適應垂直居中

?

?

.clearfix::after {content: ".";clear: both;display: block;overflow: hidden;font-size: 0;height: 0;}.clearfix {zoom: 1;}

↑? 偽類清除浮動（直接將類名放入標簽就可使用）

?

?

https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html? ↑??加載動畫 var a = 123456789; a.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');

?↑??給一段數字添加千分位逗號

?

?

var script = document.createElement('script');script.src = "http://eruda.liriliri.io/eruda.min.js";document.body.appendChild(script);script.onload = function() {eruda.init()}

?↑??移動端調試器

?

?

window.alert = function (message) {try {var iframe = document.createElement("IFRAME");iframe.style.display = "none";iframe.setAttribute("src", 'data:text/plain,');document.documentElement.appendChild(iframe);var alertFrame = window.frames[0];var iwindow = alertFrame.window;if (iwindow == undefined) {iwindow = alertFrame.contentWindow;}iwindow.alert(message);iframe.parentNode.removeChild(iframe);}catch (exc) {return wAlert(message);} }

?↑? 移動端H5 去除alert的頭部標題

?

?

.user_list::-webkit-scrollbar {display:none}

?↑? overflow:scroll 隱藏滾動條

?

?

var weixin = navigator.userAgent.toLowerCase(); if(weixin.match(/MicroMessenger/i) == "micromessenger") {alert("yep"); }
//判斷當前使用是否為微信瀏覽器

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;　　//判斷是否為安卓
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);　　　　　　　　　　//判斷是否為ios　

?↑? 判斷當前H5使用環境

?

.Discoloration_span {background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 140, 235, 1)), to(rgba(51, 255, 78, 1)));-webkit-background-clip: text;-webkit-text-fill-color: transparent; }@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {.Discoloration_span {background-image: -webkit-linear-gradient(left, #008deb, #00ff4e 25%, #008deb 50%, #00ff4e 75%, #008deb);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 2s infinite linear;} }@-webkit-keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;} }

?↑? 字體顏色漸變+動畫，class一粘即用，ie沒兼容

?

jQuery.fn.shake = function(intShakes, intDistance, intDuration) {this.each(function() {var jqNode = $(this);jqNode.css({position: 'relative'});for(var x = 1; x <= intShakes; x++) {jqNode.animate({left: (intDistance * -1)}, (((intDuration / intShakes) / 4))).animate({left: intDistance}, ((intDuration / intShakes) / 2)).animate({left: 0}, (((intDuration / intShakes) / 4)));}});return this;} $(".ant_error").shake(2, 10, 400);

↑? 文字抖動

?

oninput = "value=value.replace(/[^\d]/g,'')"

↑? input只能輸入數字

?

display: flex; flex-direction: row; align-items: center;

↑? 自適應文字垂直居中

?

editTop: function(index) {if (index-1 == -1) {alert('no');return;}this.test[index-1] = this.test.splice(index,1,this.test[index-1])[0];}

↑? 數組元素上移

?

if(iframe.attachEvent) {iframe.attachEvent("onload", function() { // IE alert('ok');}); } else {iframe.onload = function() { // 非IE alert('ok')}; }

↑? 判斷ifram是否加載完成

轉載于:https://www.cnblogs.com/DangerousBaymax/p/9584614.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的H5 小代码（实时更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。