在3.出牌的时候，书上只是给hand组件中的card组件元素绑定了自定义的play事件，然后触发hand的methods中的handlePlay方法，并将当前card作为参数传入。但是他没有讲这个play方法触发。只是讲点击卡牌是可以触发这个自定义的play事件，而且他的css里面设置了pointer-events: none;导致这个事件没法触发到，况且本身不讲怎么触发play也无法进行下一步。简单的解决办法就是在card组件的methods中写一个自定的方法，然后在里面使用$emit触发play事件，然后css设置.hand{pointer-events: all;}就可以了，然后效...
今天按着书写代码的时候发现一个问题，margin负值居然无法拉伸元素，在我的理解里margin四个值都为负值的时候是可以拉伸元素的。为此我还特意百度了下，也没找到什么有价值的信息，于是自己测试了下。当元素为block话的时候，也就是正常水平流状态时，使用margin负值是可以拉伸的，但是，当你的元素设置了宽高，那么负值就不能拉伸了。他会以top和left两个方向做位置偏移。而： position: absolute; top: 0; bottom: 0; left: 0; right: 0;这种状态元素也可以看做为一个block元素，正常的水平流状态。也能用margin负值拉伸！...
实习快三周了，说不上什么感觉，反正一开始挺难受的，一开始我以为前端就是每天ui，各种酷炫各种hack，然后每天研究什么样的写法可以省资源，毕竟我接触到的优化的书差不多都是节省资源为主，然后资源回收啥的，说实话我要是没搞过这个主题那么长时间，我可能一天都待不下去了，然后即便到今天，格格不入的那种感觉也常常缠绕在心头。碰到的和学到的永远是擦边的那种感觉，碰到的问题永远是兼容的问题，一上来就是三个大平台，浏览器，微信小程序，app，甚至细分下还有ios和安卓两个平台的不同。让我这个一直都是pc+安卓的有点不知所措，经常是浏览器表现很好，安卓也没问题，然后一到微信和ios就开始疯狂出问题，由于是...
实习的地方使用的vue，于是只能硬着头皮学了，之前买过一本vue的书，于是派上了用场，但是实际其实用处感觉不大，前期的内容还是挺简单的，就是讲了几个vue的标签，指令这些的用法，但是一到路由这里就卡主了，因为1.0和2.0版本不同，很多东西都变了，而且例子也不详细，无奈只能放弃继续读下去，于是找一个视频教程和一本项目实战的书，期待能有新的认知，这里就暂时放弃继续写这本书的笔记了。
制作一个简单的modal组件，主要效果就是，点击按钮能够弹出这个模态框，然后模态框有两个按钮，点击取消能够关闭，确认就alert弹出提示信息，并且他的宽度由父组件控制，内容也由父组件渲染，然后按钮的事件也是父组件的。效果图首先我们创建一个组件，由于html代码过多，所以采用在html文件中创建，然后js获取。先引入一个css文件：<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css"><script id=&quo...
class类名之间的区别单个说明不是很好理解，我们直接看它的流程图v-enter(动效开始之前)>------>------>------>v-enter-to(动效结束) v-leave(动效开始之前)>------>------>------>v-leave-to(动效结束)这两个表示一个来回，第一次点击运行第一个v-enter,第二次点击运行v-leave，这样有来有回就产生动效。两个动效一般都不会在类名里面写transition：all .3s；这种来控制动效时间，他们都有一个通用的类名，在开始到结束一直存在的：v-enter-...
由于2.0版本取消了所有的内置过滤器，而且过滤器只能在插值中使用，也就是{{xxx}}中使用，格式为{{name | 过滤器}}；通过一个管道符号将前面需要过滤的内容隔开，后面写一个函数用于过滤，过滤器会将name作为第一个参数传入这个函数中，并且还支持传参。创建一个过滤器全局过滤器Vue.filter('deta',function(value){ if(!data instanceof Data) return value; return value.toLocaleDateString(); });通过Vue.filter创建一个全局过滤器，deta为过...
这里需要使用到jquery-ui的position效果，所以需要引入jq-ui的js文件。通过特定的class名来进行区分，然后js加上对应的效果。做这个主要是他这个ui挺简洁的，以后说不定用的到，反正不是很难，就花点时间做了个插件。预览图：使用教程html<a href="images/02.jpg" title="图片信息" class="thickImg"> <img src="images/look.gif" alt="查看大图"> &l...
找了好几个放大镜插件发现全是老旧的，新版jq取消了很多东西，所以导致以前的都无法使用了，索性就自己写了一个新的放大镜插件。预览图：使用教程html结构<a href="images/01.jpg" class="jqzoom" title=""> <img src="images/small_01.jpg" title="迷你图片"> </a>通过给a元素一个class为jqzoom的钩子，然后添加一个href属性...
validate默认有几种验证方式，但是定死的方法肯定不能得到发展的，作为老牌的jq插件，他支持自定义验证方法。首先我们需要引入他自己的模块，additional-methods.js文件，也就是说在引入jquery.validate.js插件之后，还需要引入这个additional-methods.js文件。注：如果还需要使用中文的message信息提示，还需要在additional-methods.js后面再引入对应的语言，如：messages_zh.js，这个就是中文的提示信息。因为如果你自定义的一个验证方法，而messages_zh.js先引入了，你这这个文件里面写的对应方法的信...
依旧采用ajax配合阿里云api来获取快递信息，支持自动判断快递公司，初次对接，json部分筛选好做，就是整体的事件判断太麻烦了，快递100的网页还可以通过快递单号先做一个本地预判，这个主要他有大数据分析，有数据库支持，我这边没这个基础，不然也能做，他无非就是分析多少位，开头什么数字，结束什么数字，开头是什么字母，为此我尝试的为顺丰加了一个单独预判，就是单号开始输入sf，大小写都能识别为顺丰。瞬间被用完100次免费查询额度，我还没体验几次呢，无奈续费了下api不多说，上图：demo地址查看功能介绍[x] 采用html5+css3构建[x] 使用jq v3.4.1[x] 响应式结构支持32...
如果要在jq里进行跨域，一般来说只有使用jsonp，另一种方式则是进行中间层欺骗，也就是所谓的反代。这里我们主要讲讲json是怎么回事基本json实现jsonp全部都是使用带有src标签的元素，一般默认使用script元素，在src链接地址中，在地址后面加上?name=value&callbakc=hd；其中name=value是传值，而callbakc=hd则是回调，在本地js全局作用域下创建一个名为hd的函数。var script = document.createElement("script"); script.src = "xxxx?callbac...
以前写静态站点的时候一直想要一个图片的站点，但是又不想弄成个本地的，个人又懒得更新，这次ajax尝试使用api来获取别人分享的图片，为此就有了这个页面。提供了诸多筛选条件，分类，排序，图片px大小，比例，色系，后续有能力再加上搜索关键词，下一步就是加上图箱，我要想一个好一点的图箱办法，然后支持后续更新升级，长期使用，以前写的有点简陋。不多说，上图:功能详解：[x] 无刷新加载图片[x] 跨域[x] 丰富的筛选条件[x] 支持翻页，因为是ajax刷新，目前固定6页的页值，下一页可以无限，只要还有内容就可以一直下一页[x] 响应式结构[ ] 后续增加图箱[ ] 后续增加指定跳转到某一页Dem...
由于jq的cookie插件已经放弃维护了，其团队改为js-cookie在github上进行新的开源分享。地址为：https://github.com/js-cookie/js-cookie下载到引用的js文件后引用即可。调用方法：//设置 Cookies.set(name,value,{expires: time, path: '/'}); //其中value的值支持对象的形式传入 var box = { a = 1, b = 2 } Cookies.set(name,box,{expires: time, path: '/'}); /...
之前看过一个主题，忘记是谁的了，他的首页轮播特别好看，当时我还天真的以为他的轮播的背景色是自动获取的，为此还特意自己去看了下自动获取图片平均色，现在学了jq后尝试性仿写了一个，因为找不到原来主题的地址，所以大部分都是凭借自己的印象做的，有能力者可以自行移植到typecho主题上。先上图：响应式预览：功能特性：[x] 采用jquery 3.4.1[x] 图片预加载[x] 自动提取对应的内容[x] 增加自动轮播功能[x] 可以自行移植到主题上使用[x] 响应式功能完善，只是320分辨率及以上设备演示地址轮播图demo
普通切换效果html代码： <div class="box"> <ul> <li><a href="#">佳能<i>(30440)</i></a></li> <li><a href="#">索尼<i>(30440)</i></a></li> <li><a href="...
使用Obejct.create()方法继承的原型和传统的new方法是一样的，但是又有些不同，因为create()支持第二个参数，第一个参数往往是父类的prototype，比如Obejct.create(Box.prototype);这是正常的对一个Box构造函数的原型继承。Obejct.create本身会创建一个新的对象并继承Box.prototype原型然后返回该新建的对象，但是还有一种情况是这样的：var Box = { name : '666'; } var o = Obejct.create(Box.prototype);如果这样写，就会报错，Box实际...
最近评论