
web前端
正在输入代码中
talk is cheap, show me the code
展开
-
n 模块切换 node 版本无效的解决办法
先找到node安装位置which node 返回结果:/usr/local/bin/node编辑.bash_profile文件vim .bash_profile新增配置export N_PREFIX=/usr/local/bin/node #根据你的安装路径而定export PATH=$N_PREFIX/bin:$PATH保存1.按sec2....原创 2019-11-02 01:00:28 · 2656 阅读 · 0 评论 -
判断浏览器类型及版本
公司前段时间做项目需要判断浏览器,因为项目进度急暂时只支持一种浏览器使用window.navigator.userAgent属性,但是在国产浏览器上遇到了问题,下面这段代码只能判断内核,但是我想判断是什么浏览器而不是根据内核se 2.X是搜狗浏览器标示,但是无法获取搜狗浏览器版本,最后问了搜狗浏览器技术支持他给了我一个属性window.navigator.userAgent使用的方原创 2015-10-16 16:57:19 · 3981 阅读 · 0 评论 -
jquery方法animate操作图片移动
在很多商城上看到有加入购物车然后图片飞入购物车的效果,于是尝试做了一下原理:把图片生成一张小的图片半透明,然后给小图片新的坐标,当小图片到新的坐标就消失,效果如下: $(function () { //给所有图片注册点击事件 $("img").click(function (原创 2015-10-21 16:29:06 · 2954 阅读 · 0 评论 -
HTML5 placeholder在低版本浏览器的解决方法
HTML5 属性placeholder:提供可描述输入字段预期的提示信息。该提示会在输入字段为空显示,并会在字段获取焦点时消失,并且val里的值为空。但是placeholder属性在ie9及以下浏览器不支持我的解决方案是:判断浏览器是否支持placeholder属性,如果不支持就获取所有placeholder属性的标签,进行赋值,但是password需要转换为text才能显示文本信息,于是原创 2015-10-28 16:38:16 · 1816 阅读 · 0 评论 -
移动端点击事件延迟300毫秒
快速响应是所有UI都需要注意的一点,研究证明:当延迟超过100毫秒,用户就能感受到界面的卡顿。然而出于对手指触摸滑动的区分,移动端页面对于触摸事件会有300毫秒的延迟,导致多数用户感觉移动设备上基于html的web应用界面响应速度慢。例1:在手机端运行该页面,点击按钮,会明显感觉比较慢 * { margin:原创 2016-01-17 22:40:50 · 5501 阅读 · 0 评论 -
网页视频需要的格式
h.264编码,音频编码是AAC原创 2015-12-24 12:42:50 · 633 阅读 · 0 评论 -
CSS样式:position: absolute
使用position: absolute 老喜欢用margin-left来移动元素 margin-left在浏览器上兼容有问题,ie不会让元素自动居中,出现如果margin-left:40%;在非ie浏览器就会到达最右边,在ie中居中解决方法:使用left跟top来移动元素原创 2016-03-17 15:41:34 · 473 阅读 · 0 评论 -
不使用loop循环,创建一个长度为100的数组,并且每个元素的值等于它的下标
ES5版答案:Object.keys(Array.from({ length: 100 }));ES6版答案:Array.from(Array(100).keys());loop循环:1. For循环语法: for (变量=开始值;变量 { 需执行的代码 } 注释:步进值可以为负。如果步进值为负,需要调整 f原创 2016-03-18 09:50:42 · 4512 阅读 · 0 评论 -
js组件化开发发展
从第一代程序员写下第一行代码开始到上个世纪的80年代的软件危机,程序员一直在考虑一个问题,怎么写代码更容易。所形成的一套思路就是大团队的协同合作(如同cpu发展史一样,从飙主频到飙核数)几乎所有的程序员开始写代码的时候,写代码都是以自我为中心的,代码风格随意看心情。这就导致了写代码协作起来极为麻烦,为什么呢?我写代码的时候,我和上帝知道我写的什么,过了一个月就只有上帝知道写的是什么了。这个问题原创 2016-03-30 15:49:50 · 2874 阅读 · 0 评论 -
css IE下执行的样式,其他浏览器忽略
在样式后加 "\9"则兼容所有IE版本,IE下执行的样式,其他浏览器忽略.po-div { position: absolute; margin-top: -435px; margin-left: -350px; margin-top: 20px \9; margin-left: -704px \9;}原创 2016-02-24 11:28:21 · 718 阅读 · 0 评论 -
js滚动页面到固定位置进行操作
$(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $("#div").offset().top; var windowHeight = $(this).height(); if (原创 2016-04-18 15:12:59 · 660 阅读 · 0 评论 -
uglifyjs压缩js文件
UglifyJS 是一个服务端node.js的压缩程序,用来压缩js文件(需要用到 node+npm node集成了npm)下载安装uglify.jsnpm install uglify-js -g安装完毕如下图:跳转到你要压缩js的文件夹cmd命令第一个js文件名是要压缩的js文件,第二个是压缩后的js文件名压缩完毕后的js:原创 2016-04-18 17:11:34 · 1018 阅读 · 0 评论 -
web端ios布局fixed元素软键盘唤起时fixed失效
在ios上做了一个简单的页面头部置顶底部置顶源码如下: Title *{ margin: 0; padding: 0; } .top{ position: fixed; top:0;原创 2016-05-02 23:27:45 · 9915 阅读 · 5 评论 -
uglify压缩angular控制器注意
前段时间尝试压缩过公司angular控制器js,压缩后js大小几乎都缩小50%以上,但是使用的时候出错了。今天有空整理了下:angularjs是通过控制器构造函数的参数名字来进行依赖注入,压缩控制器js代码,所有的参数也同时被压缩了,这是依赖注入系统就不能正确的识别出服务器。下图:这是公司目前的写法:压缩后:这时发现参数名也被压缩了,这就是我一开始压缩公司控制器导致无法使用的原原创 2016-06-07 22:36:43 · 2689 阅读 · 2 评论 -
xampp的Apache配置
在httpd.conf中修改网站根目录:#DocumentRoot "E:/"我这里是指向了E:下面所有的网站原创 2016-06-25 12:27:00 · 912 阅读 · 0 评论 -
ios获取软键盘完成事件
ios获取软键盘完成事件,通过判断input的onBlur事件即可原创 2016-06-05 20:59:10 · 4048 阅读 · 0 评论 -
js滚动到顶部底部代码
SCROLL var goToWhere = function (where) { var me = this; me.site = []; me.sleep = me.sleep ? me.sleep : 16; me.fx = me.fx原创 2016-06-28 14:16:02 · 5389 阅读 · 0 评论 -
angular(指令--restict匹配模式)
var app=angular.module("myapp",[]); app.directive('runn2',function(){ return{ restrict:"EACM", replace:true, template:"自定义指令" }; });resti原创 2016-04-13 23:40:40 · 903 阅读 · 0 评论 -
angular-ng-repeat不允许collection中存在两个相同Id的对象
报错如下angular.js:13424 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {{x}} 在循环里加上track by $index 数组中是不允许存原创 2016-04-15 14:52:27 · 1465 阅读 · 0 评论 -
Angular双向数据绑定原理
Angular是通过脏检测来进行双向数据绑定Angular比不是通过定时去进行检测Angular在$digest cycle流程里面,会从rootscope开始遍历,检查所有的watcher。Angular只有指定事件触发,才会进入$digest cycle:1.DOM事件,比如用户输入文本,点击按钮等.2.ajax事件3.浏览器location变更事件4.Time原创 2016-06-29 19:13:12 · 2173 阅读 · 0 评论 -
ios移动输入框被软键盘遮挡
页面输入框会出现被软键盘挡住的问题:解决方法:获取input点击事件设置滚动即可解决 $('input').bind('click',function(e){ var $this = $(this); e.preventDefault(); setTimeout(function(){ $(window).scro原创 2016-06-05 20:50:27 · 1759 阅读 · 0 评论 -
测试Css3跟html5支持度的网址
测试css3兼容测试h5特性支持度原创 2016-07-01 10:49:50 · 874 阅读 · 0 评论 -
jquery+javascript触发a标签的点击事件
在Jquery里触发click事件是$.click()就可以触发标签的点击事件,但是该事件去a标签没用于是尝试了原生态的document.getElementById("bt").onclick();原创 2015-10-21 19:53:35 · 41269 阅读 · 1 评论 -
Jquery源码解析-设计理念
JQuery是继prototype之后又一个优秀的javascript框架,它是轻量级的js库,兼容css3,兼容各种浏览器,但是JQuery2.0以后已经不再支持ie6/7/8浏览器.Jquery使用户能方便地处理HTM、events、实现动画效果,并且方便地为网站提供ajax交互.JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说的很详细,同时还有很多成熟的插件可供选择原创 2016-06-15 23:06:43 · 556 阅读 · 0 评论 -
Jquery里live事件移除原因
live()事件 $('a').live('click', function() { alert("That tickles!") }); live事件Jq把alert函数绑定到$(document)元素上,并使用‘click’和'a'作为参数,任何时候只要有事件冒泡到document节点上,它就会查看该事件的目标元素和'a'标签是否匹配,如果匹配则执行函数。delegate()原创 2016-06-15 23:23:40 · 2124 阅读 · 0 评论 -
webvr动画函数requestAnimationFrame
在学习three.js绘制动画的时候接触到了动画函数requestAnimationFrame。在HTML5/css3的时代我们要在web上写动画选择其实已经很多种了:1.css3的animattion+keyframes;2.css3的transition;3.canvas上作图4.Jquery动画api5.window.setTimout()、window.setInt原创 2016-06-20 14:16:02 · 592 阅读 · 0 评论 -
visibility和display隐藏元素的区别
测试:visibility:hidden 隐藏元素visibility:visible 显示元素元素位置依然还在:display:none隐藏元素display:inline显示元素元素位置不占用:原创 2016-07-07 22:01:21 · 427 阅读 · 0 评论 -
js目标时间与当前时间差转换年月日天数
后端同同不肯给我算好的时间差给我,只好自己写了: getdate(4292488) 使用方法传入目标时间与当前时间差(时间戳)function getdate(period) { var yearLevelValue = 365 * 24 * 60 * 60 * 1000; var monthLevelValue = 30 * 24 * 60 *原创 2016-06-22 17:46:18 · 5653 阅读 · 4 评论 -
AngularUI Router
UI-Router是一个让开发者能够根据URL状态或者说是‘机器状态’来组织和控制界面UI的渲染,而不是仅仅的只改变路由(传统AngularJS应用实用的方式)。该模块为开发者提供了很多视图(View)额外的控制。开发者可以创建嵌套分层的视图、在同一个页面,使用多个视图、让多个视图控制某个视图等更多的功能。在页面引用:将UI-Router注入到住主程序: angular.modu原创 2016-07-08 14:56:59 · 532 阅读 · 0 评论 -
Angular-Ui-Router+ocLazyLoad动态加载脚本
在使用angular过程以前同事是采取一次性加载方式,在index页面一次性加载所有的js跟css,这种加载方式只适合教学和小型项目中,中大型不建议使用,加载速度影响到用户体验。在使用了Ui-Router以后,我第一想法就是把每个功能组件化,在请求视图的时候再去加载该页面js和css,index页面主要加载必须文件:angular.js于是尝试了下,这样去写,但是发现angular报错,原原创 2016-07-08 16:23:12 · 4647 阅读 · 6 评论 -
浏览器地址栏运行HTML代码(谷歌)
在地址栏输入data:text/html,Hello, world!浏览器会执行你的html代码,效果如下:如果觉得这个还不有趣还有一个:把浏览器做编辑器用地址栏输入:data:text/html, 浏览器就变成了编辑器,你可以输入文本内容了依旧hello,world还有更好玩的:既然是网页编辑器,那怎么把图片样式写上去,很简单,从其他页面复制就行了:原创 2016-07-19 22:45:18 · 4952 阅读 · 1 评论 -
前端设计模式责任链模式
责任链的重点在 " 链 " 上,有一条链去处理相似的请求,在链中决定由于谁去处理这个请求,并返回相应的结果使多个对象都有机会处理请求,直到有对应的分支进行处理。使用场景:在一个购物商城,在五一做了一个活动,所以图书类商品根据购买的金额依次做出以下折扣方案,1、购买满199元,打9折2、购买满399元,打8折3、购买满599元以上,打7折;简单的责任链模式:(写了一个if原创 2016-07-21 22:52:53 · 872 阅读 · 0 评论 -
js判断是否pc端
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod' ]; va原创 2016-08-28 16:05:38 · 1449 阅读 · 0 评论 -
移动端判断是否处于横屏还是竖屏状态
@media screen and (orientation:portrait) { /* portrait-specific styles */ } /* landscape */ @media screen and (orientation:landscape) { /* landscape-specific styles */原创 2016-08-28 16:16:19 · 1161 阅读 · 0 评论 -
js判断是否安装app,安装打开app
Title document.addEventListener('DOMContentLoaded', function () { document.querySelector('.downlink').addEventListener('click', function () { var loadDateTime原创 2016-08-22 18:23:31 · 3857 阅读 · 0 评论 -
JS中Base64的编码与解码
function utf8_to_b64(str) { return window.btoa(unescape(encodeURIComponent(str)));}function b64_to_utf8(str) { return decodeURIComponent(escape(window.atob(str)));}原创 2016-08-24 20:55:36 · 776 阅读 · 0 评论 -
jq动画效果慢慢滚动到固定位置
function contentTop(top){ $('body,html').animate({ scrollTop: top }, 500 ); }获取元素top传入即可 contentTop($("#top8").offset().top);原创 2016-08-21 18:10:01 · 1742 阅读 · 0 评论 -
fis3配置文件
FIS3配置文件如下:版本部署,不要彼此覆盖。 release/ - public/ - 项目名 - 1.0.0/ - 1.0.1/ - 1.0.2/ 支原创 2016-08-25 20:10:18 · 989 阅读 · 0 评论 -
angular2-package.json解析
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings i原创 2016-09-20 19:21:32 · 4125 阅读 · 0 评论 -
Web Cookie详解
cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的分担,但还是有很多局限性。第一:每个特定的域名下最多生成20个cookie1.ie6或更低版本最多20个cookie2.ie7和之后的版本最好可以有50个cookie3.FireFox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera会清理近期最少使用的cookie,Firef转载 2016-10-09 22:40:26 · 578 阅读 · 0 评论