天空之城tian-优快云博客

原创 Vue生命周期,一篇代码熟悉它!

vue一整个的生命周期中会有很多钩子函数, 先列出所有的钩子函数:beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed为了更快速的看到效果.直接在html里面看输出效果:<!DOCTYPE html><html lang="en"&...

2019-03-01 21:50:23 337

原创一篇快速熟悉 React 生命周期

为了更快的看到效果我在html里面做了个demo,复制就可以看到效果,认真看几次就记住了,熟悉之后就可以在自己的项目中灵活运用!React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁看图初始化1、getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用...

2019-03-01 19:47:30 206

原创 react项目中requestAnimationFrame兼容与动画应用

写window.requestAnimationFrame(回调函数)时，浏览器会在下次重绘前执行回调函数。我们可以用它来做连贯的逐帧动画，在没有requestAnimationFrame方法之前，我们只能用setTimeout或setInterval来实现类似的效果，这样写的存在的问题是：如果浏览器不是每秒60帧，会造成掉帧。window.requestAnimFrame= (func...

2019-01-21 19:30:22 2675

原创 js判断浏览器，安卓，iOS，微信，IE，火狐

看过很多文章，整理出来，测试有效，有些地方判断的顺序会导致失效，已更正，也可以单独摘出来一部分去判断自己需要的部分！function getVersion() { this.versions = function() { var u = navigator.userAgent, app = navigator.appVersion; return { trident:...

2018-12-03 11:41:49 581

原创微信开发者工具联网失效以及微信分享ios失效的坑!

微信开发者工具:当前系统代理不是安全代理?命令行输入regedit或按快捷键win+R然后输入regedit，打开注册表编辑器------通过下面的路径打开HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/Internet Settings这时把里面所有的Proxy开头的项都删除掉，如ProxyEnab...

2018-06-22 17:57:18 1231 2

原创 css3的animation动画结束事件与兼容性写法，transition结束事件类似

好几次用了，不好找，这次总结下来以后就方便了// Animation结束回调函数,兼容写法$('.btn').addClass('animate-bg').on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd",function(){ console.log(1) }); ...

2018-05-04 15:08:06 1348

原创 css水平垂直居中的常用实现

全部兼容处理了，移动端只留下标准和webkit就可以了。自己常用非常方便，就记录下来！1，position属性水平垂直居中（未知宽高的元素）position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) transla...

2018-04-14 11:06:37 148

原创 css选择器妙用：倒数第n，奇数列，偶数列，倍数列

1、first-childfirst-child表示选择列表中的第一个标签。代码如下：li:first-child{background:#090}上面的意思是，li 列表中的第一个li模块的背景颜色。2、last-childlast-child表示选择列表中的最后一个标签，代码如下：li:last-child{background:#090}3、nth-child(...

2018-03-27 11:37:59 3285

转载 html的加载事件DOMContentLoaded和load

页面加载方式解析HTML结构。加载并解析外部脚本。DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded加载图片、样式表文件等外部文件。页面加载完毕。//window.onload涉及到的事件window.onload: 当页面全部加载完成（包括所有资源）document.onload: 当整个html文档加载的时候就触发了，也就是在body元素...

2018-03-26 21:05:28 2916

原创 js 和 jq 获取元素宽高总结记录

javascript中获取dom元素高度和宽度网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： docu...

2018-03-26 21:01:14 1636

原创原生js倒计时完美实现

js倒计时 var oSpan = document.getElementsByTagName('span')[0]; function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; } function getDate() { var oDate = new Date();//获取现在日期对象...

2018-03-24 14:17:35 1944

原创 css3动画transform与transition应用

首先设置transition属性transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */1，水平移动transform: translateX(-50...

2018-03-24 12:03:13 306

原创与slide相反的下拉显示，上拉隐藏

想要做这个效果在网上找不到，所以自己做出来了，就是与slide的效果相反的方向<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

2018-03-24 11:03:31 233

原创 css3的flex应用总结

每次写都要找，还是自己总结一下来，可以随时看，非常方便!常用：怪异和模型box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */1，flex盒子display: -webkit-flex; /* Safari */display: flex;...

2018-03-24 10:15:22 273

tym3515的博客