前端的小玩意
涉及原生JavaScript,HTML/HTML5,CSS/CSS3,jquery,Vuejs,以及一些DEMO设计等。
请关注我的专栏~肯定会对你有一些帮助
qq20004604
前阿里巴巴,高级前端开发
展开
-
前端的小玩意(16)——利用setter和getter实现数据校验
利用setter和getter实现数据校验写前端和后端的时候,往往要进行数据校验。例如:后端在处理数据之前,需要校验前端传过来的数据和后端要求的数据是否相符,以及是否存在超限问题(大于最大值或者小于最小值,或者字符串长度过长过短)。在常规做法中,我们需要写多个函数,然后一个一个的校验过去,十分麻烦。如果某个属性要在多个地方验证,并且验证条件是统一的,那么有两种写法:比较笨是把一个写好的复制到另外一原创 2017-08-31 00:30:41 · 871 阅读 · 0 评论 -
就算萌新也能看得懂的gulp教程(1):①读文件②修改③写到新文件
gulp:先读、再改、最后写入的新手教程,足以解决基本需求原创 2017-10-31 00:02:18 · 3980 阅读 · 0 评论 -
webpack获取图片的真实路径
HTML标签里的图片url我们经常遇见的一种情况是:需要通过foo.js动态添加一个DOM,这个DOM里含有一个有图片路径的东西(比如是img标签);假如foo.js在abc文件夹下,图片bar.png也在abc文件夹下;那么我们想当然的在img的src属性里,写了<img src="./bar.png"/>;然后报错说:http://xx.xx.xx.xx/bar.png not foun原创 2017-10-17 20:38:06 · 2750 阅读 · 0 评论 -
移动端1px解决方案
理论知识:1、以iphone6为例,375px宽。也就是说,假如你写一个div的css的width为375px,他就会撑满屏幕;2、DPR:以iphone6为例,DPR为2。也即是说,他实际是在用4个像素(2x2)在显示你在css中写的1px像素点;3、也就是说,iphone6虽然是375px宽,但是他实际x轴的像素点是750(375px * 2DPR);4、那么假如你需要显示1px宽的线条,只需要原创 2017-11-13 17:41:07 · 1490 阅读 · 0 评论 -
带你快速玩转canvas(4)实战——写个折线图
需求:1. 自适应父Dom的宽高,但设置canvas元素的最小宽高,小于最小宽高则设置父Dom带滚动条。2. 窗口大小变化时,重新绘制折线图,以适应新的大小,保证折线图一直以最好效果展现;3. x轴的坐标尺度为时间,单位是月份,数据类型是数组,数组元素是字符串,格式类似"2016/12"这种,为了方便,假设x轴固定有12个刻度,初始刻度为x=0的位置;4. y轴尺度为数字,要求跟随数据的最大原创 2016-12-15 20:30:23 · 2322 阅读 · 0 评论 -
前端的小玩意(15)——一步一步仿写三个图标和动画
(36)一步一步仿写三个图标和动画①参照物:360安全卫士PC端软件,左下角三个图标,如图:具体DEMO见http://jianwangsan.cn/LooksLike360safe/index.html 代码见:https://github.com/qq20004604/LooksLike360safe/src/components目录下的foot原创 2016-10-30 20:28:09 · 1229 阅读 · 0 评论 -
前端的小玩意(14)——一步一步教你写一个3D房间(从零到移动到360度视角)
一个可以自由在XZ轴平面移动,向任意方向调整视角的3D房间的建立详解原创 2016-10-25 01:29:50 · 3572 阅读 · 0 评论 -
从零开始学_JavaScript_系列(29)——apply和call
讲道理说,这两个方法在开发中直接使用的并不多(当然也可能是我比较低端┑( ̄Д  ̄)┍),一般都用封装好的。(47)apply和call这个之前没研究过,今天简单的看了一下。命令简单介绍例子apply将某个函数提供给另外一个对象使用,类似继承提供的方法.apply(获取方法的对象, 参数)原创 2016-10-08 15:31:32 · 1246 阅读 · 0 评论 -
前端的小玩意(12)替代jQuery的原生API(大部分需IE9及以上版本)
原文来自:http://ms.csdn.net/geek/105175本文对其原文进行格式化编辑,部分增补(46)替代jQuery常用功能的原生JS代码①addEventListener命令addEventListener效果添加响应事件兼容性IE9及以上http:/原创 2016-10-03 01:31:52 · 1796 阅读 · 0 评论 -
前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)http://blog.csdn.net/qq20004604/article/details/52216203前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)http://blog.csdn.net/qq20004604/article/deta原创 2016-08-23 14:39:55 · 2149 阅读 · 0 评论 -
前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)http://blog.csdn.net/qq20004604/article/details/52216203前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)http://blog.csdn.net/qq20004604/article/de原创 2016-08-19 01:17:13 · 3600 阅读 · 0 评论 -
前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)http://blog.csdn.net/qq20004604/article/details/52216203前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)http://blog.csdn.net/qq20004604/article/details/52原创 2016-08-17 23:39:19 · 1563 阅读 · 1 评论 -
前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)
上一篇链接:http://blog.csdn.net/qq20004604/article/details/52216203DEMO:http://jianwangsan.cn/toolbox(二)全部工具里面的按钮和样式我将他拆成五部分: 第一部分是上面的大按钮那一排;第二部分是小按钮;第三部分是一条颜色很淡的线,他原创 2016-08-17 00:03:30 · 4313 阅读 · 1 评论 -
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)
需求:①写一个web版的360工具箱,示意图如下:(见原文)效果网址:http://jianwangsan.cn/toolbox原创 2016-08-16 00:41:12 · 2994 阅读 · 0 评论 -
前端的小玩意(8)——旋转的盒子(纯CSS动画效果)+可自由拖动(js)
效果是一个旋转的盒子,他会展开六个面,展开结束后,会旋转,鼠标移动上去会变色;demo网址:http://jianwangsan.cn/boxDemo原创 2016-08-13 22:08:01 · 2430 阅读 · 0 评论 -
从零开始学_JavaScript_系列(27)——myblog的优化【1】样式表分离、localStorage
myblog的建立参照:http://blog.csdn.net/qq20004604/article/details/52019904本来打算今天写的轮播图,不过突然看到localStorage,一时兴起先搞这个了。下次再写轮播图吧【1】全局样式和独立样式的分离我将样式表分割为全局表和独立表; l 在全局的样式里,是一些通用的样式,他们的特点是复用率高,例如设原创 2016-08-10 00:12:15 · 1904 阅读 · 1 评论 -
前端web资源word格式汇总
更新日期2016/8/6网易云课堂之HTML、CSS(原创带心得) http://download.csdn.net/detail/qq20004604/9594279网易云课堂之DOM编程艺术(原创带心得) http://download.csdn.net/detail/qq20004604/9594285原创 2016-08-06 18:50:15 · 1336 阅读 · 0 评论 -
前端的小玩意(6)——使用padding的左定宽、右自适应布局
①情景:有一父容器div,其高和宽不定,称之为P;该父容器有两个子div,左右布局,左定宽,满高,右自适应剩余区域;其中,定宽称之为A,变宽称之为B;A和B是等高的;P必然能容纳A和B 可能的附加条件:【1】A和B的宽高度可能不会撑满P,即上下左右都可能留有空隙,但这些空隙的宽或者高是已知的;【2】A和B之间可能有一定间隙; 备注:【1】左自适应右定原创 2016-07-11 17:13:08 · 1064 阅读 · 0 评论 -
前端的小玩意(5)——用dojo写的二级下拉菜单自动添加功能
先上DEMO,虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑( ̄Д  ̄)┍这两个优化后会好很多,毕竟美观不是我的特长嘛DEMO链接:http://download.csdn.net/detail/qq20004604/9568685(83)二级下拉菜单①过程描述:【1】数据来源:一个数组,具体格式为:var dataArr = [{原创 2016-07-06 14:20:58 · 1293 阅读 · 0 评论 -
前端的小玩意(4)自定义checkbox或者radio的外观
原理:通过隐藏原有的(调透明度和绝对定位),然后用一个新的图标来覆盖上去CSS代码: .radio { /*这个描述的是输入框的基本样式,透明,绝对定位,浮动在最下*/ opacity: 0; position: absolute; /* z-index: -1; overflow: auto; 我原创 2016-06-21 09:59:33 · 957 阅读 · 0 评论 -
前端的小玩意(3)禁止元素被选中
(28)禁止元素被选中在css的样式表里,添加这样属性(可兼容所有浏览器){ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}关于IE10的:h转载 2016-06-21 09:55:18 · 565 阅读 · 0 评论 -
前端的小玩意(2)jQuery的选择器大全
(34)选择器①普通选择方法,略 ②选择其中的c,要求是b里的c 方法:$(".a .b .c")关键之处是.a、.b、.c之间要有空格。③下面转一个帖子: $("#myELement") //选择id值等于myElement的元素,id值不能重复在文档中只能有转载 2016-06-17 14:50:52 · 630 阅读 · 0 评论 -
前端的小玩意(1)input 只允许输入整数 + 用逗号进行三位分割
(34)将输入框数字,每3位用逗号分隔输入框的值为this.valueJS代码:var val = this.value.toString();var length = val.length;for (var i = 1; i < length / 3; i++) { var temp = val.slice(0, -4 * i + 1); val = val.re原创 2016-06-17 14:35:05 · 7843 阅读 · 0 评论 -
从零开始学_JavaScript_系列(26)——只需要前端知识的ajax教程
(37)只需要前端知识,就能理解的ajax教程①新人学web前端时,遇见的第一个困难就是ajax这里对于以下问题,不深入,只用 最简单的话 讲清楚什么是ajax,并且 让你会用ajax。新人常见问题:【1】到底什么是ajax?【2】ajax时发生了什么事情?【3】为什么ajax时要有url?【4】为什么ajax时,有时候会有一个对象(object),原创 2016-07-19 00:13:04 · 2967 阅读 · 2 评论 -
从零开始学_JavaScript_系列(23)——css<5>滚动条,Tab,spellcheck,img放置
(21)滚动条的美化for chrome内核:/* 有这行才有效,滚动条的宽度 */::-webkit-scrollbar { width: 12px;}/* 滚动条的背景 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 06px rgba(0,0,0,0.3); -webkit-borde原创 2016-06-03 15:11:16 · 1074 阅读 · 0 评论 -
从零开始学_JavaScript_系列(20)——js系列<7>(函数原型的两种声明方式、函数的作用域)
(20)函数的原型①Object.create(obj)根据原型obj创建一个对象;例如:var obj = { a: 1}var o1 = Object.create(obj);console.log(obj);console.log(o1);输出为:Object {a: 1}Object {} ②使用构造函数方法:使用构造函数,通过new原创 2016-05-22 19:50:51 · 654 阅读 · 0 评论 -
从零开始学_JavaScript_系列(19)——js系列<6>闭包
(18)闭包①函数内部的子函数,用到了父函数的变量,就叫做闭包。 ②可以为函数保存其执行状态, ③其原理大概是:首先,假如B函数在A函数的内部,则A为外部函数,B为内部函数,B可以访问A的变量(变量的作用域规定的);然后,假如在函数内部,如果有一个return,那么在return结束前,这个函数中的变量,其值是维持不变的;另外需要注意,不能让A函数(外部函数)执行完原创 2016-05-22 17:31:54 · 738 阅读 · 0 评论 -
从零开始学_JavaScript_系列(16)——js系列<5>(正则表达式)
前注:参考网易云课堂前端的正则表达式内容(12)正则表达式①描述字符串规则的表达式使用 /规则/ 来表示 ②正则表达式.test(字符串)用于测试正则表达式与字符串是否匹配返回值是true或者false注:只需要字符串里包含正则表达式,即返回true,也就是说,假如正则表达式是/123/,字符串是a1234b,那么依然返回true ③锚点原创 2016-05-15 16:45:59 · 1009 阅读 · 0 评论 -
从零开始学_JavaScript_系列(15)——js系列<4>(数值、字符串、对象、数组、函数、日期的基本方法)
注:$("#a").text( 内容 ) 是jquery的方法,可以理解为在 添加内容变为:内容(6)数值注意,Math的M需要大写①绝对值:Math.abc(x) 获得x的绝对值(之后的意思都类似,非特殊不再说明) ②求四舍五入后结果:Math.round(1.9) = 2;Math.round(1.1)=1; ③向上取原创 2016-05-12 22:43:20 · 1401 阅读 · 0 评论 -
从零开始学_JavaScript_系列(17)——CSS<4>(定位、遮罩、float、弹性布局flex)
部分可能不兼容低版本浏览器(比如IE)部分图片来自网易云课堂,侵、私信、删 (60)定位①position ②值:static:默认,无定位 relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位。会压在其他的元素上面。作用是为绝对定位元素提供参照物。 absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素原创 2016-05-06 17:56:57 · 4544 阅读 · 0 评论 -
从零开始学_JavaScript_系列(16)——CSS<3>(文本、对齐、圆角、盒模型、背景)
注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说。关于CSS属性的兼容性检测的网站:http://caniuse.com/(34)文字字体①font-size:文字大小②值有:length(具体值)、absolute-size(绝对值,用的少)、relative-size(相对值,用的少)、percenta原创 2016-05-06 17:45:18 · 3480 阅读 · 0 评论 -
从零开始学_JavaScript_系列(13)——CSS<2>(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)
前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删。(10)打开一个网页时,以新窗口形式打开将新增属性: target="_blank">即可。 (11)关于块间的莫名空隙假设有html代码: aa bb原创 2016-04-25 00:15:03 · 6130 阅读 · 0 评论 -
从零开始学_JavaScript_系列(12)——jquery<2>(高度自适应,哈希地址及检测,单页面技术)
前注:我在练习的时候,函数命名比较随意,以修改起来简单的简短无意义函数名为主,实际使用时,请使用更易阅读、规范的命名方式(26)让某块随着浏览器的高度变化而自动变化假设该块的标签名为section于是: function ge() { var m =document.documentElement.clientHeight; $("原创 2016-04-25 00:00:51 · 877 阅读 · 0 评论 -
从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)
(20)事件触发的顺序假如文档中有多个脚本(例如自动执行的脚本),那么他们执行是有一定的顺序的(在HTML文档之中):①先执行内的标签。因此,这里的js脚本通常是嵌入代码、指向JS文件,可以在这里定义其后要使用的函数;②其次是执行内的script标签;③然后是执行触发的脚本内容,例如在button按钮上添加的onclick=””命令,就是在点击后触发的。(21)文档原创 2016-04-10 23:59:39 · 5030 阅读 · 0 评论 -
从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)
(17)查看复选框是否被选中复选框为:jq语法为:$("#yingmingliu").is(':checked')如果选中,返回true,如果没有被选中,返回false。 查看复选框的值:$("#yingmingliu").attr('value')返回value 两个复选框互斥:(选一个另外一个自动失效)$(document原创 2016-04-10 16:24:24 · 1399 阅读 · 0 评论 -
从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)
结论请看最后的图片关于定义:margin:层的边框以外留的空白background-color:背景颜色background-image:背景图片padding:层的边框到层的内容之间的空白 border:边框 content:内容 关于四个方向:先上图:测试:(有些结论是验证后copy现有的,因为纯测试不可能推出必然结果原创 2016-04-08 15:59:51 · 2611 阅读 · 0 评论 -
从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)
jQuery语法 (1)引用jquery文件及下载库:http://jquery.com/download/下载Download the compressed, production jQuery 2.2.2这个是用户版的,已经被精简和压缩。然后使用来启动这个库文件,记得将下载的文件重命名为jquery.js也可以使用谷歌和微软的CDN,不过这里略。原创 2016-03-31 17:38:08 · 1992 阅读 · 0 评论