01 2012 档案
摘要：颜色值相互转换，由hex到rgb或由rgb到hex，注意主要是字符串的操作和正则表达式的应用var Color = function (){ //将hex装换成rgb形式 this.HexToRgb = function (str){ var r = /^\#?[0-9a-f]{6}$/; if (!r.test(str)) return window.alert("输入hex颜色值有误！！！"); //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false str = str.replace("#", "&qu
阅读全文
摘要：选项卡1、首先看下效果，如下图：2、html结构<div id="test"> <dl><dd>第一项</dd><dd>第二项</dd><dd>第三项</dd></dl> <div>内容。。。</div></div>3、javascript代码创建一个Tab函数，你也可以叫它类（javascript没有类的概念）。 function Tab(id) { this.obj = document.getElementById(id);
阅读全文
摘要：运行代码1、html结构，需要textarea和button标签2、javascript代码，为每个button绑定事件for(var i=0;i (function(){ btns[i].onclick=function(){ var w = window.open(); w.document.write(txts[i].value); } })();} 测试 测试。。。 运行代码
阅读全文
摘要：效果主动select影响从动select。 创建Linkage函数 function Linkage(o1,o2){ //接受传过来的IDthis.obj1 = document.getElementById(o1); this.obj2 = document.getElementById(o2);//定义绑定select数据的值 var obj1Data = "1|2|3".split("|"); var obj2Data = ["--无--".split("|"),"a1|a2|a3".sp
阅读全文
摘要：为上层绑定OnItemDataBound事件*.aspx部分代码： <asp:Repeater runat="server" ID="repTest" OnItemDataBound="BindDate"> <ItemTemplate> <asp:Repeater runat="server" ID="repDate"> <ItemTemplate> Eval("START_DATE") </ItemTemplate>
阅读全文
摘要：一、XML DOM中的节点类型XML DOM与HTML DOM中的节点类型相似1、整个XML文档是一个文档节点（Document）2、每个XML标签是一个元素节点（Element）3、在XML标签中的文本是一个文本节点（Text）4、在XML标签中的每个属性是一个属性节点（Attr）5、XML文档中的注释是一个注释节点（Comment）示例： <item name="hello" >你好</item>element attrtext二、解析XML文件1、首先创建XMLDOM对象IE中使用 new ActiveXObject("Microso
阅读全文
摘要：现行渐变首先看下示例（1）垂直渐变（2）垂直渐变IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平Firefoxbackground: -moz-linear-gradient(top, #FF0000, #F9F900);参数：top
阅读全文
摘要：一、水平方向上的反复运动例如：水平宽度：50px小球直径：6pxhtml结构： <div id="line" class="line"> <div id="point" class="point" > </div> </div>css样式：.line{position: relative;width: 100px;height: 100px;border-bottom: 1px solid red;left: 100px;top: 100px;}.point{widt
阅读全文
摘要：1、charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码。strObj.charCodeAt(index)说明：index将被处理字符的从零开始计数的编号。有效值为0到字符串长度减1的数字。如果指定位置没有字符，将返回NaN。例如： var str = "ABC"; str.charCodeAt(0);结果：652、fromCharCode方法从一些Unicode字符串中返回一个字符串。String.fromCharCode([code1[,code2...]])说明：code1，code2...是要转换为字符串的Unicode字符串序列。如果没有参数
阅读全文
摘要：将所有标签的margin和padding都为0*{margin:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}body{ background:#FFFFFF; color：#000000; font-size:12px; font-weight:normal; font-family:微软雅黑,宋体,Arial;}a:link{color: Black;text-decoration: none;}a:visited{color: Black;text-decoration: none;}.
阅读全文
摘要：box-shadow：length length length lengthcolorlength：阴影水平偏移值length：阴影垂直偏移值length：阴影模糊值length：阴影边框color：阴影颜色说明：设置块阴影box-shadow:3px 3px 6px 0px#666效果如下图:box-shadow:-3px -3px 6px 0px#666效果如下图：box-shadow:0px 0px 12px 0px#666效果如下图：box-shadow: 0px 0px 10px 5px #666效果如下图：
阅读全文
摘要：一步一步理解日历calendar(一)描述画出日历这张表格；一步一步理解日历calendar(二)增加了上一年、下一年、上一月、下一月的功能；一步一步理解日历calendar(三)采用了面向对象的方式表现出来功能介绍：1、上一年、下一年、上一月、下一月、今天，功能相对简单。2、当天日期着重显示。效果图如下： //判断是否为闰年 function isLeapYear(year) { if (0 == year % 400 || (0 == year % 4 && 0 != year % 100)) { return true; } else { return false; }
阅读全文
摘要：border-radius:由浮点数字和单位标识符组成的长度值。border-top-left-radius --- 左上border-top-right-radius --- 右上border-bottom-right-radius --- 右下border-bottom-left-radius --- 左下说明：第一个值是水平半径，如果为0则为直角圆形border-radius:50px; width:100px; height:100px; border:1px solid red;半圆border-radius: 100px 0px 0px 100px; height: 100px;
阅读全文
摘要：新增功能： 1、增加了上一年，下一年，上个月，下个月，今天功能。 2、今天着重显示。效果如下图展示： // 根据给定的参数year、month，返回某年某月的天数 //例如： MaxDayOfDate(2012,1)结果：31 function MaxDayOfDate(year, month) { switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return 31; case 4: case 6: case 9: case 11: return 30; case 2: if (year %
阅读全文
摘要：这里开始介绍一个史上最简单的日历，只显示当月，但是它是一个雏形，会一步一步完善，效果如下：（够简单，够帅气）实现方式如下：MaxDayOfDate作用是返回某月的最大天数GetDayOfWeek作用是当月的第一天是星期几 星期一：1，星期二：2，星期三：3，星期四：4，星期五：5，星期六：6星期日：7calendar作用是创造日历View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t
阅读全文
摘要：Ajax一般应用于户表单数据的验证，局部更新，如分页等等Ajax的优点与缺点优点：1、异步处理功能，可以选择性提交数据；2、局部更新；3、较少服务器负担；4、更快的响应速度；5、减轻带宽压力。缺点：1、局部更新不支持后退功能和添加到收藏夹功能；2、搜索引擎不支持Ajax的抓取；3、跨平台性不好；4、并非所有浏览器都支持Ajax；5、浏览器对Ajax的支持程度不同。例子就不在一一给出了，一步一步理解Ajax前两篇文章主要是讲述理解Ajax的方法，本篇文章讲述了在什么情况下Ajax技术，Ajax结合html、css、xml、dom等等技术融合，才能体现出强大的功能和效果。。。
阅读全文
摘要：ajax方法：通过 HTTP 请求加载远程数据get方法： 通过远程 HTTP GET 请求载入信息post方法：通过远程 HTTP POST 请求载入信息1、创建XMLHttpRequest对象function createXHR() { return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}2、将键值对转换成拼接串function params(data) { var a = []; for (var i in data) { a.pus
阅读全文
摘要：Ajax是Asynchronous Javascript And XML的缩写。作用：通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。1、创建XMLHttpRequest对象var xhr =new XMLHttpRequest()对于IE早期版本（IE7及以下版本）使用，new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP")等方式创建对象2、XMLHttpReq
阅读全文
摘要：拖拽三部曲： 1、this.dragInit.apply(this, arguments) 作用：初始化对象2、 function setOptions作用：设置对象的属性或方法3、与前面的相比好处是只要初始化一次。4、然后为函数对象设置属性即可。View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns
阅读全文
摘要：拖拽三部曲：1、可以指定标题栏作为移动区域，默认整个移动物体都可以拖动2、可以设置移动范围，当前移动物体相对于某个区域内范围内移动,默认整个页面内拖动View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 &
阅读全文
摘要：拖拽三部曲： 鼠标移动时，为其添加css样式。 鼠标抬起时，移除css样式。 可以设置水平移动、垂直移动、禁止移动。View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>
阅读全文
摘要：拖拽三部曲： 1、鼠标按下：获取鼠标当前按下的位置，阻止浏览器默认行为，添加监听事件，清除浏览器默认选择的文本，处理IE在容器内的鼠标事件被容器捕获。 2、鼠标移动：获取鼠标位置，设置对象的位置，阻止浏览器默认行为。 3、鼠标抬起：移除事件监听。View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns=
阅读全文
摘要：拖拽三部曲原理： 1、鼠标按下； 2、鼠标移动； 3、鼠标抬起。View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Drag一步一步理解拖拽</title>
阅读全文
