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

Category Archives: Frontend

分享一个QQ关闭窗口的代码

 

龙生   24 Oct 2012
View Details

JS中操作table的方法

JS中操作table的方法   var myTable = document.getElementById("myTable ");   //添加行   var newTR = myTable.insertRow(index);   该方法创建一个新的 TableRow 对象表示一个新的 <tr> 标记,并把它插入表中的指定位置。      新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。   如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。   //设置行的id和class属性   newTR.id = "myid";   newTR.className="MainContentText";   //添加列:序号   var newTD=newTR.insertCell(0);   //添加列内容   newTD.innerHTML = "dfdsf";           //删除表所有行,只留标题行   var rows = myTable.rows.length;   for(var i=0;i<rows-1;i++){   myTable.deleteRow();//不给参数,代表删除最后一行   }           JS本身不支持方法重载   Js中实现方法重载的方式也知道了呵呵(会默认调用参数最多的那个方法) 转自:http://www.cnblogs.com/judy/archive/2010/06/05/1752230.html

龙生   22 Oct 2012
View Details

网页应用特殊字体,ttf转换为woff、svg、等格式字体

第一步样式表中定义一个@face样式 @font-face {font-family: 'weiruanyahei';src: url('7000.eot');src: local('weiruanyahei Regular'), local('weiruanyahei'), url('7000.ttf') format('truetype'),url('7000.woff') format('woff');} font-family: 'weiruanyahei';这个 “weiruanyahei”是自己起的名字什么都行。。。 第二步 在服务器上安装这个特殊字体 第三步 下载字体的ttf格式转换成需要的woff,eot,svg等格式字体 这个是要做到多个浏览器都支持的效果 转换步骤 我用的一个网站转换的 挺好用的 网址 http://onlinefontconverter.com/ 注册一下 上传ttf字体 然后选择需要的格式就会转换了 下载下来就好了 第四步 把转换好的格式 分别上传到 服务器的网站文件中。。css中7000.woff就是那个字体的路径及名称 我的是在同级目录下所以就直接写7000.woff了。 第五步 #poem{font-size:45px;font-family:weiruanyahei;text-align:center;} 样式中定义font-family:weiruanyahei; 是你起的名字   然后再应用的地方应用就好了。。。。。。   大功告成哦 转自:http://hi.baidu.com/ionly0801/item/6f3aa7ea7c296b3e86d9deae

龙生   25 Sep 2012
View Details

Javascript中decodeURI()与decodeURIComponent()区别

 decodeURI()函数: 定义和用法:decodeURI()函数可对encodeURI()函数编码过的URI进行解码.语法:decodeURI(URIstring)参数描述:URIstring必需,一个字符串,含有要解码的URI组或其他要解码的文本.返回值:URIstring的副本,其中的十六进制转义序列将被它们表示的字符替换. decodeURIComponent()函数: 定义和用法:decodeURIComponent()函数可对encodeURIComponent()函数编码过的URI进行解码.语法:decodeURIComponent(URIstring)参数描述:URIstring必需,一个字符串,含有解码的URI组件或其他要解码的文本.返回值:URIstring的副本,其中的十六进制转义序列将被它们表示的字符替换.  

运行结果: http://www.test.com/My%20test/ http://www.test.com/My test/ http%3A%2F%2Fwww.test.com%2FMy%20test%2Fhttp://www.test.com/My test/

龙生   11 Sep 2012
View Details

js中对url进行编码解码的函数

  定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。 语法

参数 描述 URIstring 必需。一个字符串,含有要解码的 URI 或其他要解码的文本。 返回值 URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。 实例 在本例中,我们将使用 decodeURI() 对一个编码后的 URI 进行解码:

输出:

龙生   11 Sep 2012
View Details

js日期函数详解

Date (对象) Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期。要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance)。 Date 对象必须使用 Flash 5 或以后版本的播放器。 Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的单独实体。 Date 对象的方法简介: ·getDate      | 根据本地时间获取当前日期(本月的几号)·getDay       | 根据本地时间获取今天是星期几(0-Sunday,1-Monday…)·getFullYear    | 根据本地时间获取当前年份(四位数字) ·getHours      | 根据本地时间获取当前小时数(24小时制,0-23)·getMilliseconds  | 根据本地时间获取当前毫秒数·getMinutes     | 根据本地时间获取当前分钟数·getMonth      | 根据本地时间获取当前月份(注意从0开始:0-Jan,1-Feb…)·getSeconds     | 根据本地时间获取当前秒数·getTime      | 获取UTC格式的从1970.1.1 0:00以来的毫秒数·getTimezoneOffset | 获取当前时间和UTC格式的偏移值(以分钟为单位)·getUTCDate     | 获取UTC格式的当前日期(本月的几号)·getUTCDay     | 获取UTC格式的今天是星期几(0-Sunday,1-Monday…)·getUTCFullYear   | 获取UTC格式的当前年份(四位数字)·getUTCHours    | 获取UTC格式的当前小时数(24小时制,0-23)·getUTCMilliseconds | 获取UTC格式的当前毫秒数·getUTCMinutes   | 获取UTC格式的当前分钟数·getUTCMonth    | 获取UTC格式的当前月份(注意从0开始:0-Jan,1-Feb…)·getUTCSeconds   | 获取UTC格式的当前秒数·getYear      | 根据本地时间获取当前缩写年份(当前年份减去1900)·setDate      | 设置当前日期(本月的几号)·setFullYear    | 设置当前年份(四位数字)·setHours      | 设置当前小时数(24小时制,0-23)·setMilliseconds  | 设置当前毫秒数·setMinutes     | 设置当前分钟数·setMonth      | 设置当前月份(注意从0开始:0-Jan,1-Feb…)·setSeconds     | 设置当前秒数·setTime      | 设置UTC格式的从1970.1.1 0:00以来的毫秒数·setUTCDate     | 设置UTC格式的当前日期(本月的几号)·setUTCFullYear   | 设置UTC格式的当前年份(四位数字)·setUTCHours    | 设置UTC格式的当前小时数(24小时制,0-23)·setUTCMilliseconds | 设置UTC格式的当前毫秒数·setUTCMinutes   | 设置UTC格式的当前分钟数·setUTCMonth    | 设置UTC格式的当前月份(注意从0开始:0-Jan,1-Feb…)·setUTCSeconds   | 设置UTC格式的当前秒数·setYear      | 设置当前缩写年份(当前年份减去1900)·toString      | 将日期时间值转换成"日期/时间"形式的字符串值·Date.UTC      | 返回指定的UTC格式日期时间的固定时间值 创建新的 Date 对象 语法:new Date();new Date(year [, month [, date [, hour [, minute [, second [, millisecond ]]]]]] );参数:year     是一个 0 到 99 之间的整数,对应于 1900 到 1999 年,或者为四位数字指定确定的年份;month    是一个 0 (一月) 到 11 (十二月) 之间的整数,这个参数是可选的;date     是一个 1 到 31 之间的整数,这个参数是可选的;hour     是一个 0 (0:00am) 到 23 (11:00pm) 之间的整数,这个参数是可选的; minute    是一个 […]

龙生   06 Sep 2012
View Details

jquery ui(五)日期选择器 datepicker

JQuery官方的Datepicker控件,可以很方便的使用,可以让用户很方便的在输入框上选择时间。   废话少说,先上实例   【代码】 <script> $(function() { $( "#datepicker" ).datepicker(); });</script> <p>Date: <input type="text" id="datepicker"></p> 【效果图】   下面介绍一下具体用法:   一、需要加载的js文件   (1)jquery.js (2)jquery.ui.core.js (3)jquery.ui.widget.js (4)jquery.ui.datepicker.js   二、html代码   需要一个用来加载datepicker控件的输入框 <input id = "date" type="text"/>     三、js代码   初始化函数:$(.selecter).datepicker() 【参数】 因为参数较多,把所有参数根据功能分成几组进行阐述 1、动画 duration 'normal' 设置日期控件展开动画的显示时间,可选是 "slow", "normal", "fast","代表立刻,数字代表毫秒数。 showAnim 'show' 设置显示、隐藏日期插件的动画的名称。 showOptions {} 如果使用showAnim来显示动画效果的话,可以通过此参数来增加一些附加的参数设置。 2、图片按钮 buttonImage "" 设置弹出按钮的图片,如果非空,则按钮的文本将成为alt属性,不直接显示。 buttonImageOnly false 是否把按钮安全显示成图片的样子 buttonText "…" 设置触发按钮的文本内容。 showOn 'focus' 设置什么事件触发显示日期插件的面板,可选值: focus, button, both(当为focus时,不显示图片按钮) 3、选中之后时间格式 dateFormat mm/dd/yy 设置日期字符串的显示格式。 dayNames ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 设置一星期中每天的名称,从星期天开始。此内容用于dateFormat时显示,以及日历中当鼠标移至行头时显示。 dayNamesMin ['Su', 'Mo', 'Tu', […]

龙生   29 Aug 2012
View Details

为开发者准备的 29 个顶级 CSS 工具和应用

 当你需要编辑或改变网站设计时,CSS 起着重要的作用。 透过一些 CSS工具可以让新手开发人员和设计人员轻松地学习这门语言和它的功能。 今天,我们为你编制了30个有用的CSS工具和应用程序。使用下列工具,您将能够以任何顺序进行CSS属性的排序,能够将您的Photoshop图层转成CSS样式,可以创建自己的响应Web系统。希望你能从这些工具和应用中发掘对自己有用的内容。 1. Metro UI CSS Metro UI CSS 是一套实现了 Windows 8 的 Metro 风格界面的 CSS 框架。 2. CSScomb CSScomb 可使用指定的排序方法对 CSS 的属性进行排序,提供多种版本,包括: CSScomb Online CSScomb for Sublime Text 2 (Also in Package Control) CSScomb for Textmate CSScomb for Coda & Coda 2 CSScomb for Espresso 2 CSScomb for IntelliJIDEA/WebStorm/PyCharm CSScomb for Notepad++ CSScomb for Vim 3. CSS3Ps CSS3Ps 是一个免费的基于云端的 Photoshop 插件,用来将 PhotoShop 的图层转成用 CSS3 实现的方式,外观完全一致。您可以选择多个图层和图层组,一键转换。行程转换为CSS边框属性。内阴影,内发光,阴影,外发光转换成CSS的box- shadow属性。您可以在浏览器中看到的结果样式,并与其他人分享。它适用于Windows或Mac OS X和Photoshop CS3及更高版本。最重要的是,它是完全免费的! 4. ResponsiveAeon ResponsiveAeon 是一个HTML5/CSS3的框架,可以非常快速的创建响应的布局。它有一个网格系统是基于总1104px宽度12列,提供了3个非常容易理解的基本类供 使用。该框架使使用@mediaqueries的,支持任何尺寸的设备。除了网格系统,也有排版,列表,表格,按钮和表格的样式。 5. RefineSlide RefineSlide是一个轻量级(4KB压缩)的jQuery插件快速整合一个响应式的、基于图像滑块的效果到我们的网站。滑块使用CSS3转 换+ 3D变换(有JS备用)和有一堆有吸引力的转变。它有一个选项,以显示缩略图(自动格式化和响应)或箭头的导航(支持键盘操作)。 6. Photon Photon 是一个JavaScript库,实现了在三维空间中的任何元素添加简单的照明效果。为了制造出效果,它采用了WebKitCSSMatrix的对象 (WebKit是唯一支持的浏览器引擎)。光的角度可以定义,并随时更改所提供的功能。这是可能被点亮一个由一个或一组一次来定义对象,我们可以通过设置 的最大黑色+白色用法自定义的效果。 7. Gridpak Gridpak 的目的是实现了响应式的 Web 页面设计,提高您的工作流程,节省了时间。通过生成PNG图像,CSS和JavaScript,,让 […]

龙生   28 Aug 2012
View Details

今天看到一个非常不错的基于jQuery的窗口组件:artDialog

https://github.com/aui/artDialog

龙生   16 Aug 2012
View Details

为 Web 设计师准备的 32 个有用的 CSS3 教程

很有用的 CSS3 教程来提升你的 Web 设计技能。   1. Circle Navigation Effect With CSS3to Build An Awesome 2. CSS3 Signup Form 3. Create An Animated 3d Bar Chart Using CSS3 4. Beautiful Photo Stack Gallery With JQuery and CSS3 5. Thumbnail Proximity Effect With JQuery and CSS3 6. How To Make An Awesome Cufonized Fly-Out Menu With JQuery and CSS3 7. Stylish CSS3 Progress Bars 8. Create a Unique Contact Form With CSS3 Transitions 9. Direction-Aware Hover Effect With CSS3 and JQuery 10. Create An Audio Player in HTML5 &Amp; […]

龙生   17 Jul 2012
View Details
1 52 53 54 59