JS动态创建SVG元素不生效问题

今天遇到一个问题，创建SVG Path的时候，path的属性怎么都不生效，导致耗费很多时间。 虽然创建了DOM，但是特性不生效的代码如下： const pathEl = document.createElement('path'); 后来发现是没有弄清一个最基础的原理问题： »

让input有更好的体验

最近做了一个类似这样的功能，在移动端上，数字可增可减。其中，能改变数字的触发点有： "-"号 "+"号 点击数字区块，唤起数字键盘。 这里，我直接用input来实现这个数字区块。 1. type="number"还是"tel"? 对比一下两张图，就能很快知道结论。 type="n »

由“最近访客”引起的xss血案

最近在首页粗糙地做了一个“最近访客”功能。 然后我的首页就出现了各种有趣的家伙： 还有： 作为一名专业的前端，我居然被xss攻击了。 在首页弹这个框，我真是： 原因 在拼接“最近访客”的时候，我没有对多说返回的字段进行处理。 不是不知道会有XSS问题，而是没有重视起来； 我可 »

CSS outline实现意想不到的效果

今天在微博看见@zhangxinxu召集各种实现了十字功能的方法。@大地Dudy和@灵感_idea都想到了用outline-offset这个方法，大开眼界。我就开始关注起了这个css属性。 这个属性其实很简单，就4种类型： outline-width outline-style »

多行文字溢出超过限定宽度，自动添加省略号

常会有“文字溢出自动添加省略号”的需求： 单行文字省略 或者，需要指定更多行数再添加省略号： 单行文字省略 开始实现吧： 单行文字添加省略号 css核心代码： overflow: hidden; /* 内容被剪裁，其余内容不可见 */ text-overflo »

“战主播迎话费页面”总结

又写了一个页面。老习惯，写总结。 这次做的和之前的大同小异。除了，字体在这里特殊一些。 先说说引用非主流字体的方式： 引用非主流字体的方式 Geogle API 但是现在都墙的厉害，放弃治疗。而且，GEOGLE支持的字体也是有限的。 文字做成图片 这个网站显然不行，因为很多文字 »

简易播放器实现

做了个简易音乐播放器。 演示代码：http://codepen.io/makaiqian/pen/eybvq 基本功能： 1.播放、暂停 2.上一首、下一首 简单说下它的核心代码： 1. 定义 var $music = $(‘#js-music’)[0]; 定义的时候是$( »

“中秋”项目总结

继第一次接触活动项目黄金星期三、充值活动之后，感觉顺手起来，速度也变快了N倍，嘿嘿嘿~特别是在和PHP的交互上，也有一些自己的概念。 像以前一样，总结下收获吧，这次主要一些新学的东西和技巧： 1. 有见过script的这个type吗？ <script type="text/ »

CSS3 Animals - Sparrow

最近很流行做CSS 3的卡通人物或者动物，作为小麻雀，我也来体验一把。 虽然自我感觉UI不是特别的萌萌，但是我的“小麻雀”还是实现咯！ 喳喳喳~请叫我小麻雀！嘿！ 观赏地址：小麻雀 »

自定义高亮code功能

.css{ margin: 0; padding: 0; } 本来是想等新版的blog出来再实现。 但是Markdown实在是太方便了，在原来这个也稍微设置一下，这样就不用截图了，直接coding出来。 实现方法：原本的blog是没有支持Markd »

惊现CSS3 filter

看了一篇文章，才开始知道原来不止IE才有filter，原来CSS3也有。这篇文章的链接：http://www.xuanfengge.com/css3-grayscale-black-and-white-filters.html 哈哈，顺便说一下，它的导航很酷哦，可以在上面弹钢琴。 »

CSS外边距合并（叠加）

几种CSS外边距合并的情况 一个元素的下边距和一个元素的上边距重合 一个元素包含着另一个元素 前提：中间没有内边距和边框分隔开 空元素的上边距和下边距 前提：是个空元素，没有内容，没有内边距，没有边框 为什么会合并？ 总的来说，从两个垂直外边距合并时，将形成一个外边距，外边距的值 »

总结-活动领取页面（计时功能）

做的第一个活动页面，还是挺有意义的。终于可以归档啦： 问题多多，收获自然也多多。写个总结： 一.页面部分 data参数用法 HTML中：data-id=”01″ / data-type=”0″ 在ajax中： var $this = $(this); var id = $th »

清除浮动clearfix

一直有在用，但是没有分析几种清楚浮动的方法和他们之间的比较。 为什么要清除浮动？ 盒子里用了CSS float属性，父级对象不能被撑开。 这是6个float:left的<li>，父级<ul>添加上了边框，明显没有撑开。 这样的副作用是什么？ 背景效果出不来 »

自动排序的友情链接功能

今天，写了一个自动排序的友情链接功能。 上效果：http://codepen.io/makaiqian/pen/ruBiJ 核心代码是： 可以优化为： 另外： 优化为： 这样的好处是：可以提高性能。不然每次循环都要append一次。 近期，自己写了个新主题，比较偏向自己的实用性， »

sublimeLinter-jscs插件

介绍 高亮提示代码中不规范和错误 演示 过程 安装node 安装sublimeLinter 安装sublimeLinter-jscs 在要检测的文件的同意目录中放入.Jscsro 重启Sublime Text 快捷键 ctrl + K »

忘加题目了——最近挺好哒

最近开始做项目了。做项目和平时不一样，可不是玩的。 一方面，有严格的立项，要在规定的时间内完成。要和身边的人合作完成，自己做得不好可不能拖累队友。另一方面，涉及到公司的利益，可能因为自己的一点小小的失误会出现一些利益上的问题。当然没有遇见过，希望以后也不要遇见。 小指可不要抖一下 »

CSS3 text-overflow

作用 文本溢出时发生的事情。 用法 text-overflow: clip | ellipsis | string; clip:修剪文本 ellipsis:显示省略号代表修剪文本 string:给定字符串代表修剪文本 兼容性 所有主流浏览器均兼容 搭配使用 overflow:hi »

CSS3的clip

一句话介绍 裁剪图像。 基本语法 .mkq { clip: <shape>|auto|inherit; } ：函数功能，目前只有rect()可用 auto：和没剪裁过一样 inherit：继承父元素 举例： .mkq{ clip: rect(0,0,2 »

分享制作指针工具

记得用指针用的比较多的年代，是在小学、初中的时候。 那时候，见得最多的是windows系统上的自定义动态鼠标指针，印象最深的是那款流氓兔鼠标指针，吼吼~ 其次，最普遍的还有qq空间的鼠标指针，女生比较喜欢`(∩_∩)′。 但是近几年，自定义指针越来越少见。 我想，主要原因应该是： »

CSS Reset ，你选对了吗？

一直想认认真真写一次关于Reset CSS的文章。 共4种方案。 有兴趣的小伙们，求交流你们用什么来CSS Reset？ *{margin: 0;padding: 0;} —— 被摒弃的方案 学名是Global White Space Reset，据说一开始格外受欢迎，但现在已经 »

CSS3 box-sizing

CSS Box model 分两种： W3C标准模型 IE的传统模型（IE5.x以及Quirks模式的IE 6、7） bos-sizing与盒模型的关系 三种取值： box-sizing: content-box;  W3C标准box model box-sizing: bord »

书写原则

半个月过去，觉得自己学得挺快的。最好的提升就是实践。不像以前的应试学习，理论值满分，实践值为20%不到。 在实践中，慢慢得发现自己过去一些不好的习惯，一点点纠正。就像人的一生，年轻的时候，容许很多错误，但是一旦一个人强大了，要承载的事物变多变沉重了，犯错的机会就越来越少。这就需要 »

demo继续优化

关闭表单注册弹窗，再次打开要有重置功能。 代码如下： ui.$btn_pop.on('click',function(){ ui.$pop_input.val(”); ui.$msg.text(”); }); Bootstrap不建议将原来的& »