“我的作品”目录存档
一个前端对设计师的诉求
2012年02月14日,星期二网站速度优化–个人总结
2012年02月12日,星期日拼图游戏–JavaScript小游戏
2011年05月16日,星期一限制表单输入长度 汉字为两个字符
2011年03月23日,星期三
第一个为textarea或其他text表单的ID;
第二个为显示输入内容的ID,可留空;
第三个为最多输入的字符,一个汉字为2个字符。
检测表单输入长度 显示剩余可输入字数
2011年03月12日,星期六第一、为表单添加即时监测事件
第二、判断获取到的内容长度【关系到中英文】
IE用 onpropertychange
其他浏览器用 oninput
要了解这两处的内容请看以前写的一篇博文 监听输入框值的即时变化onpropertychange、oninput
一个汉字 = 2个字符, 一个英文 = 1个字符
下面这个函数可以返回字符串长度
return str.replace(/[^\x00-\xff]/g,"xx").length;
};
里面的注释应该已经很清楚了
图片放大缩小功能
2010年12月23日,星期四很早以前写的一个效果,今天有时间了整理出来
通过 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颜色选择器】
2010年10月22日,星期五本颜色选择器进筛选出了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(); 只是一个辅助函数
星星打分效果整理
2010年08月13日,星期五项目预览演示地址:http://www.imf7.com/code/star/
支持初始值显示;
支持一个页面多次引用;
每个投票模块可以任意安排投票项目,不限个数;
支持form向后台提交数据。
首先在页面中引入JS部分;
然后编写相应的HTML代码[下面代码结构中有讲HTML的要求];
然后引用效果:starGrade(“grade”, “gradeInput”);
上面这个引用中包含两个变量,第一个变量”grade”代表包含星星显示的节点ID,第二个变量”gradeInput”代表包含隐藏表单的节点ID.
关于多人协作完成前端制作的一点想法
2010年07月29日,星期四以下是个人对多人协作完成前端制作的一点初浅的想法,仅作记录,日后继续完善。
多人共同完成一个页面的制作。
例如3个人同时开发一个页面:
首先编写一个总页面,引入四个CSS,一个是初始化CSS,剩下三个是三个人的专属CSS。
页面预先给三个人分配好模块,然后include引入三个人的专属页面,此时就可以进行同步开发了。

