如果你有一张表，你的主键是ID，然后由于测来测去的原因，你的ID不是从1开始连续的自增了。
终于有一天，使用这张表的某个系统要导入正式数据了，强迫症这时候就表现的明显了，浑身不自在，
这时候你就需要将这个主键ID重置一波了，方法是在这张表中新增一个字段，将ID里[……]
微信小程序使用Socket
首先，一个小程序同时只能有一个WebSocket连接，如果当前已经存在一个WebSocket连接，会关闭当前连接，并重新建立一个连接。 其次，如果使用了appID，协议必须是 wss://… 最近团队用小程序做行情，在连接socket的时候，发现在还没有进行subscribe的情况下，就直接进行[……]
JS让任意图片垂直水平居中且页面不滚动
说一下以前遇到的一个问题： 假设有一张小图，要实现点击查看大图的功能，而这个图的宽高可能会超过浏览器的宽高，这时候我们通过JS来改变图片的宽高，从而实现图片在浏览器居中显示且不滚屏。
方法如下： 首先你要给小图添加一个点击事件，不多赘述。
showBigImg([……]
JS判断IE版本并在页面显示内容
<script type=”text/javascript”>
var isIE = function (ver) {
var b = document.createElement(‘b’)
b.innerHTML = ‘<!–[if IE ‘ + ver +[……]
禁止 iphone 网页上下拖动露底
|
1 2 3 |
document.addEventListener('touchmove', function(e) { e.preventDefault(); }); |
文本行的斑马条纹
周知，表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了：
|
1 2 3 4 5 |
tr:nth-child(even){ background-color: rgba(0,0,0,.2); } |
但是把这种效果运用在文本行的时候就有点力不从心了，尽管js可以实现这种功能，但是这在理论上有违纯粹原则（javascri[……]
自定义优雅的文本下划线
废话不多说：
|
1 2 3 4 5 |
.underline { background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x; background-size: .2em 2px; background-position: 0 1.4em; } |
|
1 |
<div class="underline">原来你是这样的毛玻璃</div> |
效果：
Vue根据URL传参来控制全局 console.log 的开关
如果你的项目中console.log了很多信息，但是发到生产环境上又不想打印这些信息，这时候就需要设置一个全局变量，如：debug，
用正则匹配一下参数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
const getQueryStr = (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; }; 当链接中含有这个参数时，将debug的状态置为true，这时console.log是正常可打印状态，否则将debug的状态置为false， 这时重写console.log函数： console.log = function () { return false; } 这时的全局变量就可以用在整个项目中了，用来控制一些调试窗口的显隐。 在Vue中可以直写在stores/index.js中,当然，写在其他入口文件里也可以： const getQueryStr = (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; }; /* 若链接后面带上参数 envFlag=monitor * 则将 debug 置为true，否则置为false */ const monitor = 'monitor'; const envFlag = getQueryStr('envFlag'); let debug = monitor ? true : false; if (envFlag === 'monitor') { console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;"); debug = monitor; } else { debug = ''; console.log = function () { return false; } } const state = {debug: debug}; export const store = new vuex.Store({state, mutations}); 这时候如果你想控制一个组件的显示或隐藏，只需要在vuex的getters中声明一下就可以使用变量debug了： <monitor v-show="debug"></monitor> vuex: { getters: { <span style="color: #ff0000;">debug: state => state.debug</span> } } 做完以上的工作后，在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来，同时打开控制台的话， 就可以看到项目所有的 console.log 信息。 |
原来你是这样的毛玻璃
以前写毛玻璃用的都是图层覆盖，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <title>原来你是这样的毛玻璃</title> <meta charset="utf-8"> </head> <style> @keyframes ants { to { background-position: 100%; } } body, main:before { background: url("demoImages/1.jpg") 0 /cover fixed; } main { position: relative; background: hsla(0, 0%, 100%, .3); overflow: hidden; display: block; margin: 200px auto; width: 1000px; height: 500px; } main:before { content: ''; position: absolute; top: 0%; right: 0%; left: 0%; bottom: 0%; filter: blur(10px); margin: -30px; } .demoBox { border: .5em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; animation: ants 12s linear infinite; } .demo { position: relative; z-index: 999; font-size: 5em; text-align: center; line-height: 5; font-weight: 100; } </style> <body> <main class="demoBox"> <div class="demo">原来你是这样的毛玻璃</div> </main> </body> </html> |
效果图：
CSS3边框会动的信封
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>酷炫的CSS3</title> <meta charset="utf-8"> </head> <style> @keyframes ants { to { background-position: 100%; } } .demo { display: block; margin: 200px auto; width: 300px; height: 200px; border: 1em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; animation: ants 12s linear infinite; } </style> <body> <div class="demo"></div> </body> </html> |
静态效果图：
