Web前端
rrdawlx
这个作者很懒,什么都没留下…
展开
-
margin外边距合并
之前遇到了一个问题:XML/HTML code?1234567891011121314151617181920212223242526272原创 2014-01-15 13:19:46 · 811 阅读 · 0 评论 -
JavaScript 数据结构(4):优先级队列 PriorityQueue
/** * 优先级队列(Priority Queue) * 先进先出 */// Array 实现function PriQueue () { var arr = []; return { insert: function(item){ arr.push(item); arr.sort(); },原创 2015-11-23 15:04:01 · 1078 阅读 · 0 评论 -
JavaScript 数据结构(6):双端链表 FirstLastList
/** * 双端链表(FirstLastList) */ /* Link 链表节点 */function Link (data) { this.data = data; this.next = null;}Link.prototype.displayLink = function(){ console.log(this.data);};/* FirstLastList原创 2015-12-09 20:18:09 · 528 阅读 · 0 评论 -
JavaScript 数据结构(2):队列 Queue
/** * 队列(Queue) * 先进先出 */// Array 实现/*function Queue () { var arr = []; return { insert: function(item){ // 入列 arr.push(item); }, remove: functio原创 2015-11-18 17:45:25 · 609 阅读 · 0 评论 -
JavaScript 数据结构(5):单链表 LinkList
/** * 单链表(LinkList) *//* Link 链表节点 */function Link (data) { this.data = data; this.next = null;}Link.prototype.displayLink = function(){ console.log(this.data);};/* LinkList 单链表 */fun原创 2015-11-24 17:11:58 · 413 阅读 · 0 评论 -
JavaScript 数据结构(1):栈 Stack
/** * 栈(Stack) * 后进先出 */// Array 实现/*function Stack () { var arr = []; return { push: function(item){ // 入栈 arr.push(item); }, pop: function(){原创 2015-11-18 16:42:31 · 404 阅读 · 0 评论 -
JavaScript函数惰性载入
// 一般兼容性处理方式,每次函数执行都进行能力检测。var addClick1 = function (ele, callback){ if(ele.addEventListener){ ele.addEventListener('click', callback, false); }else{ ele.onclick = callback; }}console.log('原创 2016-01-06 22:18:28 · 595 阅读 · 0 评论 -
gulp入门
1、安装nodejs2、全局安装gulp2.1、“npm install gulp -g”全局安装 gulp。2.2、“gulp -v” 查看 gulp 版本。3、新建package.json文件3.1、说明:package.json 是基于 nodejs 项目必不可少的配置文件,它是存放在项目根目录的普通 json 文件。3.2、进入项原创 2016-02-08 19:59:30 · 545 阅读 · 0 评论 -
表单元素input事件兼容解决方案
var inputEvent = 'oninput' in document.createElement('input') ? 'input' : 'propertychange';$('input').on(inputEvent, function(e){ console.log('input event', e);});原创 2016-02-03 11:43:46 · 765 阅读 · 0 评论 -
自定义JSON.stringify方法,兼容老版本浏览器
/** * JSON 值可以是: * 数字(整数或浮点数) * 字符串(在双引号中) * 逻辑值(true 或 false) * 数组(在方括号中) * 对象(在花括号中) * null */var json = { stringify: function (val) { var stringify = '', curVal; if (val === null原创 2016-03-22 23:41:47 · 3541 阅读 · 0 评论 -
jQuery中deferred、promise对象的使用
// 顺序执行多个异步操作// deferred.then() 中返回一个新建的 deferred 对象$.Deferred(function(d){ console.log('start'); d.resolve();}).then(function(){ var dfd = $.Deferred(); setTimeout(function(){ console.log(原创 2016-02-27 18:34:39 · 634 阅读 · 0 评论 -
深度复制JavaScript对象
Object.prototype.deepClone = function () { if(window.JSON){ return JSON.parse(JSON.stringify(this)); }else{ function DeepClone () {}; DeepClone.prototype = this; var clone = new DeepClone();原创 2016-02-25 15:00:21 · 416 阅读 · 0 评论 -
JavaScript函数通过多个()连续调用多次并返回最终结果
比如说,有个乘法函数multiply,multiply(1)(2)(3)(),结果返回6。代码如下:var multiply = (function () { var product = 1; return function(num) { if(arguments.length == 0){ var result = product; product = 1;原创 2016-03-27 00:43:28 · 4018 阅读 · 0 评论 -
ckplayer插件播放m3u8视频
var flashvars = { f: 'ckplayer/m3u8.swf', //使用swf向播放器发送视频地址进行播放 a: 'video/m.m3u8', //m3u8文件 c: 0, //调用 ckplayer.js 配置播放器 p: 1, //自动播放视频 s: 4, //flash插件形式发送视频流地址给播放器进行播放 lv: 0, //注意,如果是直播,原创 2015-01-29 12:04:41 · 52476 阅读 · 8 评论 -
script标签的onload事件的触发时机
onload事件在资源被加载完成后会被触发。对于script标签,在外部js文件被加载后代码会被立即执行。那么,外部js文件中的代码和该script标签的onload回调函数,它们的执行顺序是怎样的呢?没有找到官方的说明文档,所以自己做个实验。测试代码如下:在各大浏览器中的运行结果:chromeiefirefoxsafari结论:可以看到,在四大浏览其中,script标签的onload事件都是在外...原创 2018-06-26 13:47:51 · 37864 阅读 · 2 评论 -
事件循环中的 event loop queue 和单个事件循环周期中的 job queue
event loop queuejs事件循环由一个 event loop queue 来管理,每当一个事件循环周期完成,会取 event loop queue 最前面的任务来执行,从而进入下一个事件循环周期。setTimout、setInterval 方法告诉浏览器在一定时间后将任务函数放入 event loop queue 尾部。在ajax请求得到响应后,浏览器会将相关的回调函数放入...原创 2018-10-16 17:54:08 · 457 阅读 · 0 评论 -
JavaScript 数据结构(3):循环队列 CircularQueue
/** * 循环队列(Circular Queue) * 先进先出 */// Array 实现function CirQueue (s) { var maxSize = s || 5, arr = new Array(maxSize), front = 0, end = -1, size = 0; return {原创 2015-11-23 15:03:14 · 429 阅读 · 0 评论 -
Web中的URL:绝对路径和相对路径
某3个网页:http://www.ipo.com/w/a.html http://www.ipo.com/w/b.html在 a.html 中加链接指向 b.html1、绝对路径link就是 b.html 的完整URL2、相对路径相对路径有两种格式第一种:不以“/"开头linkURL = "http://www.ipo.com/w" +原创 2015-04-16 16:14:34 · 5763 阅读 · 0 评论 -
使用overflow/text-overflow时要注意父元素的float和width
无标题文档div#outter {width:200px;height:auto;}div#wrapper {}p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}div#footer {clear:both;}ooooooooo原创 2014-01-13 13:08:18 · 1156 阅读 · 0 评论 -
元素position设置为fixed而未指定top、bottom、left、right时的定位
fixed定位* {margin:0; padding:0; border:0;}#wrapper {width:1000px; height:2000px; margin: 0 auto;}#div1 {height:100px; background-color:red;}#div21 {width:100px; height:200px; background-color:blu原创 2014-03-11 11:30:04 · 4750 阅读 · 0 评论 -
导航栏例子
导航栏* {margin:0; padding:0; border:0;}.out {margin:auto; width:400px; height:auto; border:solid 1px black; list-style:none; background:#3C0; margin-top:50px;}.out > li {float:left; width:100px; he原创 2015-01-09 16:52:54 · 578 阅读 · 0 评论 -
使用纯 CSS3 动画实现地球转动
旋转* {margin:0; padding:0; border:0;}div {width:200px; height:200px; margin-left:100px; margin-top:-100px;}img {width:200px; height:200px; border-radius:100px; animation:myfirst 5s linear infinite;原创 2014-12-27 16:23:48 · 10475 阅读 · 0 评论 -
利用CSS3 2D转换实现地球转动
旋转* {margin:0; padding:0; border:0;}div {width:200px; height:200px; margin-left:100px; margin-top:100px;}img {width:200px; height:200px; border-radius:100px;}window.onload = function(){ var r原创 2014-12-27 15:01:53 · 1339 阅读 · 0 评论 -
通过@media规则实现网页的屏幕自适应
@media* {margin:0; border:0; padding:0;}/* 当浏览器窗口 @media screen and (max-width:400px) {#container {width:300px; height:500px; margin:auto; background:#F00;}}/* 当浏览器窗口 >= 401px 并且原创 2014-12-27 17:55:00 · 1608 阅读 · 0 评论 -
单击网页中的按钮,弹出对话框
无标题文档* {margin:0; padding:0; border:0}#div1 {width:50px; height:auto; border:solid 1px black; margin:100px auto; cursor:pointer;}#div2 {position:fixed; top:0; left:0; z-index:100; background:#000;原创 2014-12-28 12:13:03 · 741 阅读 · 0 评论 -
滚动页面,然后再执行CSS3 动画
动态CSS3动画* {margin:0; border:0; padding:0;}body {width:100%; height:2000px;}#div1 {width:100px; height:100px; background-color:#000; position:relative;}@keyframes myfirst {from {left:0; top:0} to原创 2014-12-28 10:55:34 · 3079 阅读 · 0 评论 -
CSS选择器样式和style属性样式优先级
标签选择器 tag{} priority = 1;类选择器 .class{} priority = 10;Id选择器 #id{} priority = 100;style属性样式 priority = 1000;priority值可以叠加,例如:.class{}的priority = 10;div.class{}的priority = 1 + 10 = 11;原创 2015-01-01 21:01:39 · 1383 阅读 · 0 评论 -
border-color设置为transparent,但却不透明的原因
border-color:transparent;CSS中这样设置,发现边框还是有颜色,为什么呢?W3C有这样的解释:CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和原创 2015-02-09 15:59:52 · 8110 阅读 · 0 评论 -
使用伪元素(:after)清除浮动元素
清除浮动元素* {margin:0; padding:0; border:0;}#div1 {width:100%; height:auto; background-color:#F00; float:left;}#div2 {width:800px; margin:auto; background-color:#00F; margin-top:50px;}#div3 {width:10原创 2015-01-05 12:17:16 · 3976 阅读 · 1 评论 -
图片延迟加载——例子
图片延迟加载* {margin:0; border:0; padding:0;}div {width:800px; height:280px; margin-bottom:200px;}(function(){ //获取视口高度 var windowHeight = window.innerHeight; //获取body的高度 var bodyHeigh原创 2015-03-02 22:46:17 · 839 阅读 · 0 评论 -
滚动加载服务器端内容——例子
网页代码如下滚动加载* {margin:0; padding:0; border:0;}#container {width:960px; margin:auto;}#container:after {display:block; height:0; content:''; clear:both;}.item {width:300px; height:200px; float原创 2015-03-14 20:41:04 · 706 阅读 · 0 评论 -
滚动到页面底端,加载新内容——例子
滚动加载* {margin:0; padding:0; border:0;}#container {width:960px; margin:auto;}#container:after {display:block; height:0; content:''; clear:both;}.item {width:300px; height:200px; float:left; margi原创 2015-03-14 19:44:10 · 471 阅读 · 0 评论 -
font 的简写规则
font-style | font-variant | font-weight | font-size | line-height | font-family例如.font{font:italic small-caps bold 12px/1.5em arial,verdana;}注意1、简写时,font-size和line-height只能通过斜杠/组成一个值转载 2015-04-03 15:19:41 · 1154 阅读 · 0 评论 -
jQuery 的 $.fn 可以防止 jQuery 的原型被篡改
$.fn 和 $.prototype 都指向 jQuery 的原型,由于 $.fn 的存在,即使 $.prototype 被修改指向另一个对象,jQuery 的实际原型还在,不会被篡改。演示代码// 给jQuery的原型添加一个方法$.fn.extend({ im : function(){ console.log("Hi, I am prototype"); c原创 2015-04-10 10:31:19 · 1042 阅读 · 0 评论 -
macOS 升级后 nvm 安装的 node 和 npm 出错
macOS 升级后,发现用 nvm 安装的 node 和 npm 命令全都没了,打开命令行工具的时候会有如下错误提示:internal/modules/cjs/loader.js:583 throw err; ^Error: Cannot find module 'ansi-regex' at Function.Module._resolveFilename (int...原创 2018-11-12 13:02:04 · 1184 阅读 · 0 评论