随笔分类 - javascript
摘要：题目：古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？ 1.程序分析： 兔子的规律为数列1,1,2,3,5,8,13,21....方法一： function F1(month) { if (month === 0 ||month === 1) { return 1; } else if ( month === 2) { return 2; } else { return F(month - 1) + F(month - 2); } }方法二： function F2(month) { var arr
阅读全文
摘要：javascript中没有类的概念，由函数模拟类的方式工作。function Base(){ //定义属性 this.id = "123456"; this.name = "张三"; //定义方法 this.show = function show(){ console.log("姓名：" + this.name); }}//定义Base类对象bbvar bb = new Base();//为bb对象添加属性或方法（对象名.属性名）bb.sex = "男";//删除bb对象中的id属性（对象名.属性名）delete
阅读全文
摘要：html结构： <div><span></span>时<span></span>分<span></span>秒</div>js代码简介：时间处理 创建日期对象 var oDate = new Date（）； 将获取的时分秒存储在数组中 var aDate = [oDate.getHours(), oDate.getMinutes(),oDate.getSeconds()]; 将aDate添加到span元素中。function create() {var oDate = new Date();var
阅读全文
摘要：自定义右键菜单实现原理 为body添加一个div，当点击右键的时候，显示div。1、创建一个RightMenu函数属性有设置背景backgroundColor、设置上边框borderTop、设置右边框borderRight、设置下边框borderBottom、设置左边框borderLeft，并为属性指定默认值。方法有添加项AddItem、添加线AddLine、初始化Init。2、AddItem和AddLine方法介绍首先，创建一个数组this.MenuContent = []; 将添加项和添加线保存在这个数组中。AddItem方法name指名称 fn指点击时出发的函数 img 指图片this.
阅读全文
摘要：情人节马上要到了，为情人节奉献一份礼物哈。。。一定要支持CSS3渲染的浏览器第一个项链实现原理将img的src属性设为同一张图片效果图：<!DOCTYPE html><html><head> <title>项链---www.cnblogs.com/kuikui</title> <style type="text/css"> *{margin: 0px;padding: 0px;} .cont{width: 1100px;overflow: hidden;margin: 0 auto;} .div1, .
阅读全文
摘要：键盘控制div移动创建一个Move类（其实javascript没有类）function Move(){this.init.apply(this,arguments);}主要步骤如下：一、初始化创建一个div元素为div设置style属性值指定默认宽度，高度，距顶，距左，父容器，设置步长二、键盘上下左右键控制移动主要是修改div距顶，距左的距离三、父容器限制将创建的元素添加到父元素中，并使创建的元素在父元素内移动。<!DOCTYPE html><html><head> <title>键盘控制div移动---www.cnblogs.com/kuiku
阅读全文
摘要：注册document.onkeydown事件keyCode是返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；altKey,ctrlKey,shiftKey等是返回一个布尔值；常用keycodekeycodekeycodeleft37up38right39down40149250351a65shift16ctrl17alt18enter13<!DOCTYPE html><html><head> <title>键盘事件keycode</title></head><b
阅读全文
摘要：复选框：checkboxhtml 结构 <input type="checkbox" value="test" />测试获取value值 function getValue() { var str = ""; for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { // 判断类型 if (tmp.checked) { // 判断是否选中 str += tmp.value; }
阅读全文
摘要：String的扩展方法String.prototype.方法名=function(){...}基础知识字符串操作和正则表达式的应用一、合并多个空白为一个空白String.prototype.resetBlank = function () { return this.replace(/\s+/g, " ");}二、过滤空白String.prototype.filterBlank = function () { return this.replace(/\s+/g, "");}三、除去左边空白String.prototype.LTrim = functio
阅读全文
摘要：换肤功能创建Css类，主要是对link元素操作<link rel="stylesheet" type="text/css" media="all" href="styles/red.css" />元素标签-link 属性标签-rel、type、media、hrefvar head = document.getElementsByTagName("head")[0];this.Append = function(url){var link = document.createElemen
阅读全文
摘要：1、加深color颜色的值采用rgb计算方式 num = Math.floor( num * ( 1 - level ));2、减淡color颜色的值采用rgb计算方式 num = Math.floor(( 255 - num) * level + num )3、web安全色采用rgb计算方式 将num除以51再乘以51分别向下、向上取整，尽兴比较 tmp1 = Math.floor( num / 51 ) * 51; tmp2 = Math.ceil( num / 51 ) *51; if(Math.abs( tmp1 - num ) <= Math.abs( tmp2 - num )
阅读全文
摘要：颜色值相互转换，由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
阅读全文
摘要：一、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
阅读全文
摘要：一、水平方向上的反复运动例如：水平宽度：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字符串序列。如果没有参数
阅读全文
摘要：一步一步理解日历calendar(一)描述画出日历这张表格；一步一步理解日历calendar(二)增加了上一年、下一年、上一月、下一月的功能；一步一步理解日历calendar(三)采用了面向对象的方式表现出来功能介绍：1、上一年、下一年、上一月、下一月、今天，功能相对简单。2、当天日期着重显示。效果图如下： //判断是否为闰年 function isLeapYear(year) { if (0 == year % 400 || (0 == year % 4 && 0 != year % 100)) { return true; } else { return false; }
阅读全文
摘要：新增功能： 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 %
阅读全文