dengrongshou5105-CSDN博客

转载【javascript】定时器组件

'use strict';module.exports = function() { this.timer = {}; this.config = {}; // 初始化参数 this.init = function(opts) { var id = opts.id; this.config[id] = o...

2018-04-10 11:56:00 434

转载【javascript】九宫格抽奖组件设计

一些主要点1. 转圈的顺序（顺时针或者逆时针）；2. 转圈的速率（从慢到快再到慢）；3. 位置的问题（下一次抽奖的起始位置是上一次抽奖的结束位置）；4. 转圈的圈数或者移动的次数。基本原理1. 抽奖的过程其实就是通过不断的改变 dom（通常为 li）的索引值，来达到移动的效果（比如 8 个奖项，索引值的变化如下 0 -> 1, 1 -> 2, ... ...

2018-03-29 10:54:00 340

转载【css】垂直居中的几种写法

结构<div class="vam"> <div class="vam-body">垂直居中</div></div><div class="vam2"> <span class="vam2-hack"></span> <div class="vam-bo...

2017-08-12 09:01:00 218

转载【gulp】gulp-file-include 合并 html 文件

gulp-file-include 是 gulp 插件，它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来。安装依赖包（包括了 gulp-file-include 和 del）npm install --save-dev gulp-file-include del项目结构目录修改 gulpfile.js，结合 browser-s...

2017-02-27 16:25:00 258

转载【gulp】gulp + browsersync 构建前端项目自动化工作流

什么是 gulp？gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。gulp.js 是基于 node.js 构建的，利用 node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。gulp.js 源文件和你用来定义任务的 gulp 文件都是通过 javascript（或者 coffeescript ）源码来实现的。更多关于 gulp，...

2017-02-21 15:33:00 152

转载【nodejs】exports 和 module.exports 的区别

require 用来加载代码，而 exports 和 module.exports 则用来导出代码。但很多新手可能会迷惑于 exports 和 module.exports 的区别，为了更好的理解 exports 和 module.exports 的关系，我们先来巩固下 js 的基础。示例：app.jsvar a = {name: 'nswbmw 1'};var b = ...

2017-02-17 13:38:00 75

转载【nodejs】初识 NodeJS（四）

上节我们把服务器、路由和请求处理程序结合在一起了，下面就编写一个具体的 web 应用。上传图片的 web 应用服务器模块（server.js）var http = require('http');var url = require('url');function start(route, handler) { function onRequest(r...

2017-02-17 09:54:00 94

转载【nodejs】初识 NodeJS（三）

上节我们将 http 服务器（server.js）和请求路由模块（route.js）整合在一起了，当然这还不够，路由，顾名思义，是指我们要针对不同的 url 有不同的处理方式。请求处理程序模块（requestHandlers）function start() { console.log('Request handler "start" was called.');...

2017-02-17 09:31:00 133

转载【nodejs】初识 NodeJS（二）

上一节我们构建了一个基础的 http 服务器，我们可以接收 http 请求，但是我们得做点什么吧 – 不同的 http 请求，服务器应该有不同的响应。路由模块处理不同的 http 请求在我们的代码中是一个不同的部分，叫做路由选择。我们要为路由提供请求的 url 和其他需要的 get 及 post 参数，随后路由根据这些数据来执行相应的代码，因此，我们需要查看 http 请求，...

2017-02-16 16:56:00 84

转载【nodejs】初识 NodeJS（一）

构建一个基础的 http 服务器需要引用 http 模块，http 模块是 node.js 的内置模块。var http = require('http');http.createServer(function(request, response) { console.log('Request received...'); response.wri...

2017-02-16 09:26:00 89

转载【规范】前端编码规范——注释规范

文件申明顶部添加文件申明信息，包括文件描述、原始作者，如果有更新，则需要添加更新内容、更新作者和更新时间。/** * @description: 说明文字 * @author: 张三 *//** * @description: 说明文字 * @author: 张三 * @update: 更新内容 by 李四 2013-04-13 18:32...

2017-02-13 17:15:00 644

转载【规范】前端编码规范——jquery 规范

使用单引号不推荐$("div").html("<img src='1.jpg'>");推荐$('div').html('<img src="1.jpg">');缓存变量DOM 遍历是昂贵的，所以尽量将会重用的元素缓存。不推荐var h = $('#element').height();$('#element'...

2017-02-13 16:39:00 89

转载【规范】前端编码规范——javascript 规范

全局命名空间污染与 IIFE总是将代码包裹成一个 IIFE（Immediately-Invoked Function Expression），用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（比如第三方库，window 引用，被覆盖的未定义的关键字等等）。不推荐var x = 10, ...

2017-02-08 17:52:00 104

转载【规范】前端编码规范——css 规范

编码在 css 首行设置文件编码为 UTF-8。@charset "UTF-8";class 命名class 名称应当尽可能短，并且意义明确。使用有意义的名称，使用有组织的或目的明确的名称，不要使用表现形式的名称。不推荐fw-800 {font-weight:800;}.red {color:red;}推荐.heavy {font-...

2017-02-02 20:27:00 173

转载【规范】前端编码规范——html 规范

文档类型推荐使用 html5 的文档类型申明：<!DOCTYPE html>语言属性根据 html5 规范：强烈建议为html根元素指定lang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。这里列出了语言代码表。<html lang="e...

2017-02-02 13:53:00 129

转载【css】zSass - 用 sass 编写 css

zSass是自己整理的一个 sass 库，参考了sassCore。目录结构variables.scss默认值设置。reset.scss重置浏览器样式。（参考：normalize）common.scss整合常用的 @mixin 和 %。css3.scss整理常用的一些 css3 属性。如何引用@import "your_path/base...

2017-02-02 11:30:00 124

转载【javascript】利用 a 标签自动解析 url

很多时候，我们有从 url 中提取域名，查询关键字，变量参数值等的需求，然而我们可以让浏览器方便地帮助我们完成这一任务而不用写正则去抓取。方法就是先创建一个a标签然后将需要解析的 url 赋值给a的href属性，然后就得到了一切我们想要的了。var a = document.createElement('a');a.href = 'http://zhuyujia....

2016-09-06 17:39:00 121

转载【javascript】console 让 js 调试更简单

浏览器的控制台（console）是最重要的面板，主要作用是显示网页加载过程中产生各类信息。显示信息console.log('hello world');console.debug('debug');console.info('信息');console.error('错误');console.warn('警告');最常用的就是console.log了...

2016-08-30 16:59:00 75

转载【规范】javascript 变量命名规则

javascript 有三大经典的变量命名法：匈牙利命名法，驼峰式命名法和帕斯卡命名法。今天主要介绍下这三种命名方式。匈牙利命名法语法变量名 = 类型 + 对象描述类型指变量的类型对象描述指对象名字全称或名字的一部分，要求有明确含义，命名要容易记忆容易理解。通过在变量名前面添加相应小写字母的符号标示作为前缀，标示出变量的类型，前缀后面是一个或多个单词组合，...

2015-10-15 17:37:00 187

转载【规范】前端编码规范——一般规范

文件/资源命名在 web 项目中，中划线（-）是用来分隔文件名的不二之选。同时它也是常见的 url 分隔符（比如：本文的 url）。所以理所当然的，中划线应该也是用来分隔资源名称的好选择。尽量保证文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处。文件的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆...

2015-10-15 10:46:00 181

转载【jquery】一款不错的音频播放器——Amazing Audio Player

前段时间分享了一款视频播放器，点击这里。今天介绍一款不错的音频播放器——Amazing Audio Player。介绍：Amazing Audio Player是一个使用很方便的 Windows 和 MAC 应用程序，允许你创建 HTML5 音频播放器的网站。该音频播放器兼容 iPhone，ipad，Android，Chrome，Firefox，Safari，Opera 和 I...

2015-09-21 14:30:00 173

转载【分享】分享一款不错的网页视频播放器

作为一名前端开发，在做页面时会碰到视频展示，一般都是用 flash 加载视频源文件，可惜功能太少，而且支持的视频格式有限。下面给大家分享一款不错的视频播放器——ckplayer（超酷网页视频播放器）。ckplayer（超酷网页视频播放器）支持 http 协议下的 flv，f4v，mp4，支持 rtmp 视频流和 rtmp 视频回放，支持 m3u8 格式，是你做视频直播，视频点播的理想...

2015-09-08 14:32:00 337

转载【分享】分享一个值得前端开发收藏的网站

该网站涉及一些优秀攻城狮的优秀博客、社区，实用的手册、工具，框架/库，以及在线教程和书籍推荐。为大家解决一些基本的，常见的问题和需求。做专业的前端平台，提供你需要的东西。解放你的收藏夹，让它们只做最主要的事情。地址：前端人的俱乐部转载于:https://www.cnblogs.com/yjzhu/p/4790688.html...

2015-09-08 09:50:00 114

转载【html】button按钮的一些问题

问题：button 按钮在不设置 type 属性时，在不同的浏览器作用不一样。举个例子：html：<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" ...

2015-07-08 12:03:00 158

转载【分享】分享一个压缩 PNG 的网站 TinyPNG

TinyPNG 能做什么？TinyPNG采用智能的有损压缩技术来减少你的 PNG 文件的文件大小。通过选择性地减少图像中的颜色数量，更少的字节用于存储数据。效果几乎是看不见的，但它在文件大小方面差别很大！我为什么要用 TinyPNG？PNG 是有用的，因为它是唯一得到广泛支持的格式，可以存储部分透明的图像。该格式使用压缩文件，但仍然很大。使用 TinyPNG 为您的应用程序...

2015-06-18 23:07:00 183

转载【css】ie6 和 ie7 下 position 与 overflow 的问题

前几天做的项目中碰到这样一个问题，在 ie6 和 ie7 下，给父元素设置 overflow:hidden 不起作用无法隐藏，后来发现是子元素中有设置 position:relative，如果子元素删除 position:relative，那么父元素的 overflow:hidden 可以隐藏，具体代码及效果如下：html 代码：<!doctype html>...

2015-06-05 11:47:00 102

转载【css3】如何自定义 placeholder 文本颜色

昨天写了一篇基于 jquery 实现 ie 浏览器兼容 placeholder 效果，具体内容点击传送门。不过还是有点小瑕疵，就是不能设置 placeholder 文本颜色。本文主要介绍利用 css 修改 placeholder 文本颜色。对于 ie 浏览器我们可以通过自定义的 class 名称，直接修改 span 这个标签的样式。对于其他浏览器诸如谷歌和火狐就需要特殊处理了，不多说...

2015-04-08 15:53:00 132

转载【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

placeholder 是 html5 新增加的属性，主要提供一种提示（hint），用于描述输入域所期待的值。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。我们先看下在谷歌浏览器中的效果，如图所示：获得焦点时...

2015-04-07 17:17:00 127

转载【jquery】jquery.cookie.js 的使用指南

之前有写过一篇原生 js 的 cookie 介绍，并且最后封装成 cookie.js 具体内容点击传送门。jquery.cookie.js 是一款轻量级的 cookie 插件，可以读取，写入和删除 cookie。本文主要针对 jquery.cookie.js 的用法进行详细的介绍。使用方法：设置 cookie：$.cookie('the_cookie', 'the_v...

2015-03-23 14:27:00 65

转载【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

前段时间在写样式的时候发现了这个问题，虽然当时就解决了这个 bug 不过还是记录下，以免再次出现这样的问题。demo 代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-C...

2015-03-11 16:15:00 131

转载【jquery】Validform，一款不错的 jquery 表单验证插件

关于 Validform这是一款很不错的 jquery 表单验证插件，它几乎能够满足任何验证需求，仅仅一行代码就能搞定整站的表单验证。$('form').Validform();为什么能如此方便？插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素，让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符，这样你可以随便添加或者去掉任一表单元素...

2015-02-15 10:18:00 165

转载【html】关于锚点的一些事

今天修改公会系统，有用到锚点对页面位置进行控制，结果碰到了一些问题，通过查询相关资料解决了，在这里总结下。两种方法跳转到锚点：1、给锚点添加 name 属性和 id 属性。一般只要加 name 就行了，加上 id 是为了兼容其他浏览器。<a name="a1" id="a1"></a>2、通过 js 方法跳转到锚点var _id =...

2014-11-14 14:09:00 134

转载【css】关于 hr 在各浏览器中的问题

在做页面是有时候会用到分割线 hr，但是在 ie6 和 ie7 下显示很蛋疼，本文将教你如何写出兼容各浏览器的 hr。首页我们先了解下 hr 在各浏览器下的差异，如下表格：正常浏览器ie6、ie7firefox实际高度height+borderheightheight背景色background-colorbac...

2014-09-02 18:07:00 153

转载【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox。它除了能够展示图片之外，还可以展示 flash、iframe 内容、html 文本以及 ajax 调用，我们可以通过 css 来自定义外观。fancybox 特点：可以支持图片、html 文本、flash 动画、iframe 以及 ajax 的支持；可以自定义播放器的 css 样式；可以以组的形...

2014-08-14 17:22:00 339

转载【jquery】ajax 请求成功后新开窗口被拦截解决方法

问题：前面开发项目时碰到一个问题，ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是很可惜被浏览器给拦截了，怎么解决这个问题呢？分析：浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的，所以它认为这是不安全的就拦截了（不过如果是 _self 的话就不会有这个限制），即使 ajax 回调函数中模拟执行 click 或者 su...

2014-08-11 17:38:00 372

转载【html5】html5 本地存储

最近一直在学习 html5，为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要介绍下 html5 的本地存储。在客户端存储数据html5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对 session 的数据存储，一旦窗口关闭就没有...

2014-08-11 15:10:00 110

转载【html5】使用 html5 的十大原因

你难道还没有考虑使用 html5？当然我猜想你可能有自己的原因；它现在还没有被广泛的支持，在 ie 中不好使，或者你就是喜欢写比较严格的 xhtml 代码。html5 是 web 开发世界的一次重大的改变，事实上不管你是否喜欢，它都是代表着未来趋势。其实 html5 并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用 html5。目前有很多的文章介绍使用 html5 并且...

2014-08-08 12:02:00 132

转载【javascript】分享一款经典的日期控件 My97DatePicker

最近在做平台项目，其中有用到日期选择，相对于 jqueryui 的 datepicker 我更喜欢 My97DatePicker。理由体积小，相对于 jqueryui 的 datepicker 的百来 K，My97DatePicker 只有 50K 不到；My97DatePicker 是用原生 js 编写的，能够用在任何环境下；My97DatePicker 功能非常强...

2014-08-05 12:17:00 85

转载【jquery】jquery 实现许愿墙效果，可拖拽

最近整理做过的项目，发现有个许愿墙的效果，今天拿出来给大家分享下。先简单的介绍下功能点：随机显示背景图或背景色出现的位置随机可以通过拖拽改变位置好了，附上代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> ...

2014-07-24 17:27:00 290

转载【jquery】基于 jquery 的翻牌效果 flip

最近做了个类似于塔罗牌翻牌的效果，分享给大家。<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <title>flip</title> <style> *{margin:0;p...

2014-07-23 18:05:00 350

空空如也

空空如也