Archive for the ‘经典代码’ Category

iframe子页面与父页面通讯 chrome特别提示

星期三, 八月 10th, 2011
// 父控制子
document.getElementById(“id”).contentWindow.document.getElementById(“aaa”).innerHTML = “”;
// 子控制父
parent.document.getElementById(“myfu”).innerHTML = “”;
** chrome环境下需要通过HTTP访问才能生效 **
貌似chrome这个问题我碰到两次了,第一次没有注意,第二次又在找答案,这次不会再忘记啦!

将光标置于某表单元素的最后

星期五, 七月 29th, 2011

在工作中难免要对textarea动态插入一些内容,插入完成后又想让光标定位于textarea的最后,各浏览器对这个的解释有些差异,下面整理了一个兼容浏览器的方法 toTextEnd ,此方法接受一个参数,该参数为要定位光标的目标元素【可编辑表单元素】。

其实理论很简单,在IE中采用createTextRange方法,非IE中采用setSelectionRange方法进行光标定位。

代码中的cn.ie是进行IE检测,使用代码的朋友可以换成自己的方法才会起作用,否则会报错。

看代码:

function toTextEnd(elem){// 将光标置于某表单元素的最后
 if(cn.ie){
  var range = elem.createTextRange();
  range.moveStart("character", elem.value.length);
  range.collapse(true);
  range.select();
 }else{// 非IE情况下将光标置于文本框最后
  elem.setSelectionRange(elem.value.length, elem.value.length);
  elem.focus();
 }
};

 

重构Array的sort方法

星期四, 六月 16th, 2011
sort是数组的一个排序方法。 
 
这个排序是进行两两比较。
拿这个数组进行降序排列var a = [3, 1, 5, 6, 4, 2];
第一轮比较:用第一个数值和本数组的其他元素进行比对
3比1
3比5  //5大,所以所以进行交换  得a = [5, 1, 3, 6, 4, 2];
5比6  //交换 得a = [6, 1, 3, 5, 4, 2];
6比4
6比2
第一轮最终结果 a = [6, 1, 3, 5, 4, 2];
 
第二轮比较:用第二个数值和这个数值之后的元素进行对比
1比3  //交换  得a = [6, 3, 1, 5, 4, 2];
3比5  //交换 得a = [6, 5, 1, 3, 4, 2];
5比4
5比2
第二轮最终结果 a = [6, 5, 1, 3, 4, 2];
 
就这样依次进行交换
 
第三轮最终结果 a = [6, 5, 4, 1, 3, 2];
 
第四轮最终结果 a = [6, 5, 4, 3, 1, 2];
 
第五轮最终结果 a = [6, 5, 4, 3, 2, 1];
 
 
 
下面是重构的方法:
Array.prototype.fst = function(fn){
 var fn = fn || function(a, b){ return a > b;};
 for(var i=0; i<this.length; i++){
  for(var j=i; j<this.length; j++){
   if(fn(this[i], this[j]) > 0){
    var t = this[i];
    this[i] = this[j];
    this[j] = t;
   }
  }
 }
 return this;
};
 

图片放大缩小功能

星期四, 十二月 23rd, 2010

很早以前写的一个效果,今天有时间了整理出来

通过 Math.pow(x,y) 的“幂”运算来计算大小图片放大缩小的尺寸

看JS源码:

// 放大缩小控制
var PhotoSize = {
  zoom: 0, // 缩放率
  count: 0, // 缩放次数
  cpu: 0, // 当前缩放倍数值
  elem: "", // 图片节点
  photoWidth: 0, // 图片初始宽度记录
  photoHeight: 0, // 图片初始高度记录
 
  init: function(){
    this.elem = document.getElementById("focusphoto");
    this.photoWidth = this.elem.scrollWidth;
    this.photoHeight = this.elem.scrollHeight;
   
    this.zoom = 1.2; // 设置基本参数
    this.count = 0;
    this.cpu = 1;
  },
 
  action: function(x){
    if(x === 0){
      this.cpu = 1;
      this.count = 0;
    }else{
      this.count += x; // 添加记录
      this.cpu = Math.pow(this.zoom, this.count); // 任意次幂运算
    };
    this.elem.style.width = this.photoWidth * this.cpu +"px";
    this.elem.style.height = this.photoHeight * this.cpu +"px";
  }
};
// 启动放大缩小效果  用onload方式加载,防止第一次点击获取不到图片的宽高
window.onload = function(){PhotoSize.init()};

(更多…)

216种WEB安全色选择器【JS颜色选择器】

星期五, 十月 22nd, 2010

本颜色选择器进筛选出了216种WEB安全色,简单实用、方便快捷。

查看示例:http://www.imf7.com/code/getColor.html

 

使用方法:

js引用:将下面的JS源码存入您的JS文件或者网页的<head><script>JS代码</script></head>标签中

HTML要求:页面的HTML代码中必须包含三个元素,即:触发手柄、显示选中颜色的节点、显示筛选出来的216种颜色的节点
例:
触发手柄 <input type="button" value="按钮选取颜色" id="myhand" />
显示选中颜色的节点 <input type="button" value="#FFFFFF" id="showColor" style="width:120px; background:#fff; border:1px solid #ccc; height:22px;" />
显示筛选出来的216种颜色的节点 <div id="color" style="display:none;"></div>

CSS要求:
然后再将CSS源码放在头部的<head>标签中

引用:满足JS、HTML、CSS的要求后就只剩下引用来让效果生效了
window.onload = function(){
  var Fcolor = new getColor(F$("myhand"), F$("showColor"), F$("color"), "click");
  Fcolor.init();
};
引用解说:
将这段JS与前面说过的JS源码引用之后就可以。
onload函数是起待页面加载完成后执行
getColor()该函数就是取色效果的核心函数,其接受4个参数,依次是:触发手柄节点、显示选中颜色的节点、显示筛选出来的216种颜色的节点、鼠标触发方式『click表示点击弹出颜色选择框』
F$()该函数相当于document.getElementById(); 只是一个辅助函数

(更多…)

js复制内容代码

星期五, 十月 22nd, 2010

复制内容的JS我寻找了有些时候了,自叹技术不行,搞不定全兼容版的,下面是调整出来的一个IE可以复制,其他浏览器提示不能复制后并将要复制的内容全选的效果,希望对大家有帮助。

看下面吧,源码和示例是最有力的说明,我这里就不多说了。

JS代码:

function copyToClipboard(theField,isalert,note) {
// theField copyright内容的节点ID
// isalert 成功后的提示
// note copyright成功后所添加的后缀
  var tempval=document.getElementById(theField);
  if(navigator.appVersion.match(/\bMSIE\b/)){
    therange=tempval.value;
    therange+="\n"+note;
    window.clipboardData.setData(‘text’,therange);
    if(isalert)alert(isalert);
  }else{
    alert("您使用的浏览器不支持此复制功能,请使用Ctrl+C或鼠标右键。");
    tempval.select();
  };
};

(更多…)

关于获取EVENT的代码 兼容IE Firefox等主流浏览器

星期六, 九月 18th, 2010

当我们想获取鼠标坐标,或者其他获取键盘操作等事件时需要用到event属性,而Firefox下本身没有window.event方法,让很多人望而生畏,感觉这个方法存在兼容性问题而很少去使用它,放弃了很多效果的实现。

下面是根据前辈分的总结的得到的一些获取event以及鼠标坐标的方法示例,希望对大家有帮助。

(更多…)

星星打分效果整理

星期五, 八月 13th, 2010

项目预览演示地址:http://www.imf7.com/code/star/

星星打分效果:[不支持半颗星星]
支持初始值显示;
支持一个页面多次引用;
每个投票模块可以任意安排投票项目,不限个数;
支持form向后台提交数据。
使用方法:
首先在页面中引入JS部分;
然后编写相应的HTML代码[下面代码结构中有讲HTML的要求];
然后引用效果:starGrade(“grade”, “gradeInput”);
上面这个引用中包含两个变量,第一个变量”grade”代表包含星星显示的节点ID,第二个变量”gradeInput”代表包含隐藏表单的节点ID.

(更多…)

TAB选项卡示例介绍

星期一, 七月 19th, 2010

演示主页:http://www.imf7.com/code/tab/
博客介绍:http://www.imf7.com/archives/154

选项卡解说:
1、支持一个页面多次引用;
2、一次引用实现多次切换;
3、点击/滑过等切换方式自定义;
4、自动播放+鼠标动作切换;
5、自动播放时鼠标移向内容区域暂停播放;
6、切换完成后回调函数。

函数引用说明:
slide({handle:elems, content:elems, current:”current”, mode:”click”, delay:5000, fn:function(){…} });

引用基本格式 slide({…}); 中间的“…”所代表的就是参数内容。

参数说明:
handle:表示选项卡分组名称的节点数组
content:表示与分组名称对应的内容的节点数组
current:表示当前分组名称的样式名称
mode:表示切换方式,支持“click/mouseover/…”等鼠标事件
delay:表示自动播放的间隔时间,有值则自动播放,单位毫秒
fn:表示切换完成一次后的回调函数

完整版下载TAB.rar
完整JS下载tab.full.rar
压缩JS下载tab.min.rar

演示主页:http://www.imf7.com/code/tab/
博客介绍:http://www.imf7.com/archives/154

cookie的添加、获取、删除代码

星期四, 六月 3rd, 2010

下面这段代码最开始是参考腾讯的,自经过调整加工及添加注释后贴出来,希望对大家有所帮助。

在注释中的解释应该已经很详细了,如遇到问题可以在评论中咨询。

 

(更多…)