一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么? HTML5 现在已经不是 SGML 的子集,DocType 简化为:                   <!doctype html> HTML 5 指定 UTF-8 编码的方式如下:                  <meta charset="UTF-8"> 2. 如何在 HTML5 页面中嵌入音频? HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3、Wav 和 Ogg: <audio controls>     <source src="jamshed.mp3" type="audio/mpeg">     Your browser does’nt support audio embedding feature. </audio> 3. 如何在 HTML5 页面中嵌入视频? 和音频一样,HTML5 定义了嵌入视频的标准方法,支持的格式包括:MP4、WebM 和 Ogg: <video width="450" height="340" controls>   <source src="jamshed.mp4" type="video/mp4">    Your browser does’nt support video embedding […]

龙生   11 Oct 2013
View Details

为开发者准备的 5 个新鲜方便的 CSS 工具

根据维客的介绍,级联样式表(CSS)是用于描述以标记语言书写的文档外观显示(外观和格式)的样式表语言。最常见的应用是样式化HTML或者XHTML格式的web页面,不过这种语言也可以在任何一种XML文档中使用,包括纯XML文档,SVG和XUL文档。 互联网上有大量的CSS工具可用,不过寻找一个有用的CSS工具是一项费时费力的任务。为了节省你宝贵的时间,我们为开发者收集了5个最新的、易用的CSS工具,这样可以简化开发者的开发任务、省去很多麻烦。 几点人 翻译于 昨天(8:59) 0人顶 顶 翻译的不错哦! 1. Animo.js Animo.js是一个强大的用来管理CSS动画的小工具。它带有很多特性,如Stack animations, 创建跨浏览器模糊滤镜,在动画完成时设置回调。Animo 包括了迷人的 animate.css 库文件,它是由Dan Eden编写的。它提供了将近60种漂亮的动画。 他同时给库文件添加了一些助理动画。 源码 徐继开 翻译于 昨天(8:33) 0人顶 顶 翻译的不错哦! 2. 方便的 CSS3 动画 Cheat Sheet   CSS3 Animation Cheat Sheet 是一款已预设并可直接使用的网站动画特效库。你只要把CSS导入现有项目中并直接调用内嵌的CSS类来修饰你的页面元素。 CSS3 Animation Cheat Sheet是基于CSS3 @keyframes 规则的并且支持所有最新的浏览器(如果算IE这个非标浏览器的在内的话我说的是IE10)。 通过CSS3 @keyframes规则你不需要担心元素每一帧的位置,CSS3会自动完成。 来源 TOTOTO_TOTO 翻译于 昨天(11:11) 0人顶 顶 翻译的不错哦! 3. 创建CSS3 创建CSS3罗列出每个元素的属性,并且允许我们对每个元素重新定义,以及即刻显示预览效果。你可以给同一个元素添加许多属性规则,同时还可以修改生成的CSS代码。 创建CSS源代码在这儿。 几点人 翻译于 昨天(9:07) 0人顶 顶 翻译的不错哦! 4. Salvattore 现在有很多种用于解决瀑布流式的多列动态的布局方案,Salvattore 是另外一个好的解决方案,它与其他方案有一个重要的不同之处,它只需要使用css去配置,而不用配置javaScript脚本。它也是一个使用javascript编写的解决方案,但不需要依赖任何的框架。 源文件在此 凌培勇 翻译于 昨天(11:09) 0人顶 顶 翻译的不错哦! 其它翻译版本(1) 5. nthChild :nth-child,一个通过公式来选择元素的强大的css选择器,在样式化布局里有很大的应用。如果你没有使用这个选择器的经验,nthMaster,一个专注于这个选择器的网站,将会对你有很大的帮助。nthMaster提供了多种多样的:nth-child使用场景,简单,形象,并有一些基本的描述。它包含了获取 特殊的元素,范围内,范围外,:nth-of-type的使用等等 Source 转自:http://www.oschina.net/translate/5-fresh-handy-css-tools-for-develoepers

龙生   13 Sep 2013
View Details

20 款绝佳的 jQuery 倒计时脚本和插件

Circular Countdown jQuery Plugin – MORE INFO / DEMO Coconut – Jquery Countdown Plugin – MORE INFO / DEMO 包含四种不同尺寸的圆。 Dynamic Countdown with Counter – MORE INFO / DEMO 纯文本的倒计时模板 JBMarket Circular Countdown – MORE INFO / DEMO 使用不同颜色区分:日、时、分和秒。 LuxCountdown – MORE INFO / DEMO 提供多种方格效果的倒计时器,多种颜色 Easy Countdown – MORE INFO / DEMO 带百分比进度提示的倒计时插件 jsCountdown – MORE INFO / DEMO 提供 14 种不同皮肤,同时提供 png 格式模板让你可以自行修改样式 Broadcast Countdown Widget – MORE INFO / DEMO 类似 WordPress 网站的倒计时效果 以下是收费的 jQuery 脚本 JavaScript Animated Counter – MORE INFO / DEMO Fancy Countdown – jQuery plugin – MORE INFO / DEMO jQuery Plugin – KK Countdown – MORE INFO / DEMO Littlewebthings CountDown – MORE INFO / DEMO jQuery Countdown Plugin by David Walsh –MORE INFO / DEMO This plugin […]

龙生   29 Aug 2013
View Details

20 款 jQuery 的音频和视频插件

Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器。可定制视频和相片,支持触摸操作,支持全屏播放等。 YoutubeTV: DEMO || DOWNLOAD 该插件可以让你直接在网页上播放来自 YouTube 的视频,支持播放列表 Osvaldas: DEMO || DOWNLOAD 提供水平和垂直显示的播放器 Shadowbox: DEMO || DOWNLOAD Shadowbox is a great plugin and is a perfect web-based media viewer app and the best part is that it supports entire list of media publishing formats. This app can be customized way too easily. Jplayer: DEMO || DOWNLOAD jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用 XHML/CSS自定义。 Video.js: DEMO || DOWNLOAD Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器 ILightBox: DEMO || DOWNLOAD If you are looking to build exquisite responsive overlay windows, ILightBox is perfect for you. It offers you […]

龙生   24 Aug 2013
View Details

十个让人惊叫的数据可视化项目

数据可视化是科学、艺术和设计的结合,当枯燥隐晦的数据被数据科学家们以优雅、简明、直观的视觉方式呈现时,带给人们的不仅仅是一种全新的观察世界 的方法,而且往往具备艺术作品般的强大冲击力和说服力。如今数据可视化已经不局限于商业领域,在社会和人文领域的影响力也正在显现,以下我们将介绍的是是 个让人耳目一新、拍案叫绝的数据可视化项目。 一、富人区、穷人区 “富人区、穷人区”是一个互动地图项目,能直观显示美国每个城市的居民收入和房租水平,不同的颜色谱系代表着不同区域的收入水平,你可以搜索每个州、每座城市甚至每个街区的收入状况。   二、谷歌流感趋势 谷歌流感趋势(Google Flu Trends)通过分析人们的搜索关键词来跟踪预测全球流感趋势,这是Google.org的一个公益项目。   三、LoTRProject LOTRProject其实是一个数据可视化项目,它把托尔金《指环王》系列小说(霍比特人,指环王, 以及精灵之钻)里表述的一个巨大而复杂的家谱关系, 通过图表, 地图, 时间轴以及简单文字说明生动地表现了出来。   四、GE 医学影像创新大赛 2011年9月份GE斥资1亿美元启动了GE创新挑战赛,挖掘能够提高早期乳腺癌诊断水平的创意想法。该视觉可视化项目收到了7大类500个提案,其中五位获胜者获得种子资金用于将创意付诸实施。   五、英国同性婚姻法案 英国卫报发起的这个视觉可视化项目能够分析展示在2013年同性婚姻法案上投票的英国议会议员的个人情况,数据包括议员的性别、所在政党和当选时间。   六、2010年美国枪支杀人统计 Periscopic(潜望镜)公司推出的这个数据可视化项目展示了2010年枪支暴力如何提前终止了9595人的生命。数据来自FBI的联合犯罪报告以及世界卫生组织。 图形中的弧线代表受害者理论上可以活到的生命长度,鼠标停留在弧线上将显示更多信息,你还能将图形与枪支型号、种族、性别等进行关联分析。   七、皇后乐队:四个视角 “四个视角”项目显示了语言在皇后乐队歌曲中的重要性,通过分析皇后乐队歌词中的关键词汇,能发现皇后乐队音乐中表达的重要主题,以及每位歌曲作词人的影响力。   八、1851年至今的飓风统计 通过分析来自美国海洋与大气管理局(NOAA)的数据,开发人员John Nelson创建了这个能够分析1851年以来的热带风暴和飓风的数据可视化项目。该项目用颜色区分飓风的强度,卫报的一篇报道中可以看到这个项目的动画版本。   九、纽约市政交通的一天 YouTube用户STLTransit用可视化的方式展示了纽约人一天中如何使用包括地铁在内的市政交通,数据来自General Transit Feed规范数据,STLTransit还未其他城市的交通系统创建了视频。   十、Facebook照片分享 在地图数据可视化方面拥有专长的旧金山一家设计与技术工作室Stanmen制作了一系列视频演示Facebook用户的照片分享行为,该项目将该工作室的George Takei发布的三张照片在三个月内的传播情况进行了可视化分析。 文章来自IT经理网

龙生   21 Aug 2013
View Details

JavaScript开发者常忽略或误用的七个基础知识点

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中七个基础知识点: 1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 JavaScript 初学者意外的是,字符串的 replace 方法并不会 替换所有匹配的子串——而仅仅替换第一次匹配。当然 JavaScript 老手们都知道这里可以使用正则表达式,并且需要加上一个全局标志位(/g): 1 // Mistake 2 // 踩到坑了 3 var str = "David is an Arsenal fan, which means David is great"; 4 str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great" 5 6 // Desired 7 // 符合预期 8 str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great" 另一个基本的逻辑错误就是在大小写不敏感的校验场合(字母可大写可小写)没有忽略大小写,此时 /i标志位就很实用: 1 str.replace(/david/gi, "Darren"); // "Darren will always be an Arsenal fan, which means Darren will always be great" (译注:上面这段例程我没有看懂用意,可能是注释有误吧……) 每个 JavaScript 开发者都曾踩过这两个标志位的坑——因此别忘了在适当的时候用上它们! 2. […]

龙生   21 Aug 2013
View Details

css中的注释要注意了

周末给客户写了一个专题页面,今天发现在IE8下是空白页面,直接不显示,直接怀疑是CSS的问题的; 通过一行一行排查,发现是CSS里有html的注释<!—->导致的,直接去掉,一切正常。

龙生   19 Aug 2013
View Details

Dwz关闭弹出的窗口

龙生   15 Aug 2013
View Details

DWZ (JUI) 教程 navTab 刷新分析

navTab的刷新在doc文件里也有说明 首先 在form表单里指定好回调函数 * <form action="/user.do?method=save" onsubmit="return validateCallback(this, navTabAjaxDone)"> 如果不指定回调函数的话框架会默认使用DWZ.ajaxDone() <div class="dp-highlighter bg_html"><div class="bar"><div class="tools"><b>[html]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a><div style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="//static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="0" height="0" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=0&height=0" wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span>function&nbsp;navTabAjaxDone(json){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DWZ.ajaxDone(json);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//注意返回的JSON的数据结构&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(<span class="attribute">json.statusCode</span><span>&nbsp;==&nbsp;DWZ.statusCode.ok){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(json.navTabId){&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navTab.reloadFlag(json.navTabId);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//重新载入当前navTab页面&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navTabPageBreak();&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;("closeCurrent"&nbsp;==&nbsp;json.callbackType)&nbsp;{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function(){navTab.closeCurrentTab();},&nbsp;100);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;("forward"&nbsp;==&nbsp;json.callbackType)&nbsp;{&nbsp;&nbsp;</span></li><li […]

龙生   15 Aug 2013
View Details

js Date

Date 对象用于处理日期和时间。 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值。 参数形式有以下5种: new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth,dd,hh,mm,ss); new Date(yyyy,mth,dd); new Date(ms); 注意最后一种形式,参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。各种函数的含义如下: month:用英文表示月份名称,从January到December mth:用整数表示月份,从(1月)到11(12月) dd:表示一个月中的第几天,从1到31 yyyy:四位数表示的年份 hh:小时数,从0(午夜)到23(晚11点) mm:分钟数,从0到59的整数 ss:秒数,从0到59的整数 ms:毫秒数,为大于等于0的整数 如: new Date("January 12,2006 22:19:35"); new Date("January 12,2006"); new Date(2006,0,12,22,19,35); new Date(2006,0,12); new Date(1137075575000);   Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 […]

龙生   15 Aug 2013
View Details
1 46 47 48 60