搜索到
1944
篇与
的结果
-
网页实现未加载完毕显示loading效果 当网页页面加载文件、或者图片过多是，要等很久才打开，解决方法是增加服务器配置，但是没条件的话，可以考虑通过js判断页面是否加载完毕，加载完毕后在显示内容，没加载完毕显示加载中，这种在H5邀请函中经常看见。以下是实现方法，供大家参考。loading.js判断页面是否在家完毕，未加载完毕显示loading效果var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0; //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '<div id="loadingDiv" style="height:' + _PageHeight + 'px;"><div style="left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px;"></div></div>'; //呈现loading效果 document.write(_LoadingHtml); //监听加载状态改变 document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果 function completeLoading() { if (document.readyState == "complete") { var loadingMask = document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } }loading样式设置#loadingDiv{position:absolute;left:0;width:100%;top:0;background:#fff;z-index:10000} #loadingDiv div{position:absolute;width:auto;height:105px;padding-left:215px;background:#fff url(../images/loading.gif) no-repeat center center/50px 50px}loading图片下载 -
js正则获取字符串中url链接地址方法 在开发过程中需要匹配字符串中的手机号，可以使用以下方法来实现提取字符串中的手机号。// 正则匹配匹配url function httpString(s) { var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; var reg= /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g; s = s.match(reg); // console.log(s[0]) return(s[0]) }
-
js获取input监听文本框值，判断非空示例 键盘输入实时显示搜索结果数据，需要用到input监听文本框输入的值，然后请求后端数据，以下个简单的方法，共大家参考。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> <style> .pop{ display: none;} </style> <input type="text" name="input" id="input"> <div>不能为空</div> <script> $('#input').on("input",function(){ console.log($(this).val().length);//打印输入框字符长度 if($(this).val().length == 0){ $(".pop").show().delay(5000).hide(100); }else{ // 请求数据 } }); </script> </body> </html>
-
-
前端三大主流框架分别有哪些、优劣势 前端三大主流框架分别有哪些？Angular.js：出来较早的前端框架， 学习曲线比较陡， NG1学起来比较麻烦， NG2~NG5开始， 进行了一系列的改革， 也提供了组件化开发的概念； 从NG2开始， 也支持使用TS(TypeScript) 进行编程；Vue.js：最火的一门前端框架， 它是中国人开发的， 对我我们来说， 文档要友好一些；Reacts：最流行的一门框架， 因为它的设计很优秀；开发团队方面React是由FaceBook前端官方团队进行维护和更新的； 因此， React的维护开发团队， 技术实力比较雄厚；Vue：第一版， 主要是有作者尤雨溪专门进行维护的， 当Vue更新到2.x版本后， 也有了一个以尤雨溪为主导的开源小团队，进行相关的开发和维护；社区方面在社区方面， React由于诞生的较早， 所以社区比较强大， 一些常见的问题、坑、最优解决方案， 文档、博客在社区中都是可以很方便就能找到的；Vue是近两年才火起来的， 所以， 它的社区相对于React来说， 要小一些， 可能有的一些坑， 没人踩过；移动APP开发体验方面Vue， 结合Weex这门技术， 提供了迁移到移动端App开发的体验(Weex， 目前只是一个小的玩具，并没有很成功的大案例；)React， 结合React Native， 也提供了无缝迁移到移动App的开发体验(RN用的最多， 也是最火最流行的) ；为什么要学习React1.和Angular 1相比， React设计很优秀， 一切基于JS并且实现了组件化开发的思想；2.开发团队实力强悍，不必担心断更的情况；3.社区强大，很多问题都能找到对应的解决方案；4.提供了无缝转到React Native上的开发体验， 让我们技术能力得到了拓展； 增强了我们的核心竞争力；5.很多企业中， 前端项目的技术选型采用的是React.js；
