日常技巧总结

注：日常工作中有好多小的技巧，时间长了容易遗忘，现总结如下，以作备忘。

1、透明iframe：

首先在引入iframe时增加allowTransparency="true"的属性设置，然后将被引用的页面的body的background属性设置为transparent

2、流式布局中图片垂直居中对齐：

增加 align="absmiddle"的属性设置，另外图片一般需要增加border=0的属性设置以解决图片作为链接时存在蓝边的问题

3、定义手型鼠标样式时不要采用cursor:hand，因为FF不支持，最好采用cursor:pointer;

4、文本框只能输入数字：

在文本框中增加 onkeyup="this.value = this.value.replace(/[^\d]/ig, '');" 

5、页面执行a的js事件而导致播放器停止的问题：

请教刘又大哥后得知，执行click here时页面地址发生了变化（猜测），从而导致播放器停止。解决的办法是click here或者click here

6、用innerHTML方法将不完整的html代码设置到一个div中时破坏掉页面的显示

典型的是今天央视博客的一篇文章无法出现评论，后来分析了代码发现用户的html代码里面多了一个。而ie对于残缺的标记会做自动补全处理，从而破坏了原来的页面结构。解决的办法可以是把内容在textarea里面显示，但让要相应的设置textarea的样式。随着innerHTML应用的越来越多，用户有更多的机会自己编辑html代码，直接放到div里面显示越来越不足，所以需要使用新的方法。使用textarea的方法是学习csdn的做法，不知道还有没有更好的方法。

7、获取选区的文字或者html代码：document.selection.createRange() .text .htmlText

8、 //保存内容到剪切板
function saveText(title, content, other) {
try{
var clip_data = clipboardData.getData('text');
if(clip_data.indexOf("#oLdDaTa&!!") != -1)
clipboardData.setData('text',clip_data.substring(clip_data.indexOf("#oLdDaTa&!!")+ 11, clip_data.length));
var str = "#bBsTiTlE&!!" + title + "#bBsCoNtEnT&!!" + content + "#bBsOtHeR&!!" + other + "#oLdDaTa&!!" + clipboardData.getData('text');
clipboardData.setData('text',str);
}catch(e){}
}
//从剪切板取出
function resetText(str) {
if(getIEVersonNumber() >= 7){
var autoSave = document.getElementById("auto_save");
autoSave.checked = "";
}
var tIndex = str.indexOf("#bBsTiTlE&!!");
if(tIndex == -1)
return;
var cIndex = str.indexOf("#bBsCoNtEnT&!!");
var oIndex = str.indexOf("#bBsOtHeR&!!");
var oldIndex = str.indexOf("#oLdDaTa&!!");
var title = document.getElementById("post_title");
if(typeof(title) == "undefined" || title == null)
return;
var content = document.PostForm[textName];

title.value = str.substring(12, cIndex);
content.value = removeFmt(str.substring(cIndex + 14, oIndex));
str = str.substring(oIndex + 12, oldIndex);
try {
if(str.substring(1, 2) == "1") {
document.getElementById("post.original").checked = "checked";
}
}catch (e) {}
if(str.substring(0, 1) == "1") {
document.PostForm[abname][0].checked = "checked";
} 
if(str.substring(2, 3) == "1") {
document.PostForm[nttname][1].checked = "checked";
}

}

//id是textarea的id,value想要插入的内容
function insertIntoText(target, value, bolReplace){
var ta = target;

if (document.selection) { //For IE
if (ta.currPos){
if(bolReplace){
ta.currPos.text=value;
}
else{
ta.currPos.text+=value;
}
}
else{
ta.value+=value;
}
}
else{ //For Firefox
var startPos = ta.selectionStart;
var endPos = ta.selectionEnd;

if(bolReplace)
ta.value = ta.value.substring(0, startPos) + value + ta.value.substring(endPos, ta.value.length);
else
ta.value = ta.value.substring(0, startPos) + value + ta.value.substring(startPos, ta.value.length);
}
}


9、去掉点击链接时的虚线：onfocus="this.blur();"

10、拖动控件

function BwlDrag() {
 
 this.root    =  null;
 this.onDragStart  =  null;
 this.onDragEnd   =  null;
 this.onDrag   =  null;
 this.oldEvents  =  new Array();
 //o is the part that drag on, and oRoot is the main object
 this.init = function(o, oRoot) {
  this.root = oRoot && oRoot != null ? oRoot : o ;
  
  this.onDragStart  =  new Function();
  this.onDragEnd   =  new Function();
  this.onDrag   =  new Function();
  var caller    =  this;
  this.root.style.cssText  =  "background:#fff000;position:relative;left:0px;top:0px;z-index:100;";
  o.onmousedown = function(ev) {
   var eSrc = window.event? window.event.srcElement : ev.target;
   /*if(eSrc&&(eSrc.onclick||eSrc.nodeName.toLowerCase()!='tr')){
    return;
   }*/
   caller.start(ev);return false;
  }
  o.onmousemove = null;
 }

 this.start = function(ev) {
  ev=(window.event)?window.event:ev;
  var y = parseInt(this.root.style.top);
  var x = parseInt(this.root.style.left);

  this.onDragStart(x, y);
  this.lastMouseX = ev.clientX;
  this.lastMouseY = ev.clientY;
  
  var caller    =  this;
  this.oldEvents.push(document.onmousemove);
  this.oldEvents.push(document.onmouseup);
  
  if(this.root.setCapture) {
   this.root.setCapture(false);
  }
  document.onmousemove = function(ev){caller.drag(ev);return false;};
  document.onmouseup  = function(ev){caller.end(ev);return false;};
  return false;  
 }
 
 this.drag = function(ev) {
  ev=(window.event)?window.event:ev;
  var ey   =  ev.clientY;
  var ex   =  ev.clientX;
  var y    =  parseInt(this.root.style.top);
  var x    =  parseInt(this.root.style.left);
  var nx    = x + ex - this.lastMouseX;
  var ny   = y + ey - this.lastMouseY;
  
  this.root.style.left =  nx + "px";
  this.root.style.top  =  ny + "px";
  //this.root.style.cssText  =  "background:#fff000;position:relative;left:" + nx + "px;top:" + ny + "px;z-index:100;";
  this.lastMouseX =  ex;
  this.lastMouseY =  ey;  
  
  this.onDrag(nx, ny);
 }
 
 this.end = function(ev) {
  document.onmouseup   = this.oldEvents.pop();
  document.onmousemove  = this.oldEvents.pop();
  if(this.root.releaseCapture){
   this.root.releaseCapture();
  }
  this.onDragEnd(parseInt(this.root.style.left),parseInt(this.root.style.top));
  this.root.style.cssText  =  "background:#fff000;position:relative;left:" + this.root.style.left + "px;top:" + this.root.style.top + "px;z-index:100;";
 }
}

 

评论

6 楼 liudaoru 2008-07-23  

跑马灯效果：
              <marquee id=info onMouseOver=info.stop() onMouseOut=info.start() scrollamount=2 scrolldelay=50 width="100%"  border="0">
              <strong>快讯</strong>：<a href="#">滚动显示奥运倒计时一个月</a>，点燃激情盛邀世界文字滚动文字
              </marquee>

5 楼 liudaoru 2008-01-11  

获取body引用的方法
document.body || document.documentElement

4 楼 liudaoru 2008-01-10  

// 用ajax的方式发送表单
function submitForm(frmId) {
var form = $(frmId);
if(!form) {
alert("您输入的form的id不正确!");
}
if(TRSValidator.validate(form)) {
var url = form.getAttribute("action");
var eles = form.elements;
var pars = "";
for(var i = 0; i < eles.length; i += 1) {
if(eles[i].type.toLowerCase() != "checkbox") {
pars += eles[i].name + "=" + eles[i].value;
}
else {
if(eles[i].checked) {
pars += eles[i].name + "=" + eles[i].value;
}
}
if( i != eles.length -1) {
pars += "&";
}
}
var myAjax = new Ajax.Request(
url,
{method: 'POST', parameters: pars, onComplete: function(res) {
publickOk(res.responseText);
}, asynchronous:true}
);
}
}
-------------------------------------------
// 打开新窗口
function showWin(url) {
var win = window.open(url, "win", "width=782,height=570,top=80");
win.focus();
}
--------------------------------------------
*
* 调整iframe的高度以适应所引用网页的高度
*/
function iframeResize()
{
var dyniframe = null;
var indexwin = null;

if (document.getElementById)
{
dyniframe = document.getElementById("mainFrame");
indexwin = window;

if (dyniframe)
{
if (dyniframe.contentDocument)
{
dyniframe.height = dyniframe.contentDocument.body.scrollHeight + 10;
}
else if (dyniframe.document && dyniframe.document.body.scrollHeight)
{
dyniframe.height = 500;
iframeheight = mainFrame.document.body.scrollHeight + 10;
windowheight = indexwin.document.body.scrollHeight - 128;
dyniframe.height = (iframeheight < windowheight) ? windowheight : iframeheight;
if(dyniframe.height<600)
{
dyniframe.height = 600;
}
}
}
}
}
----------------------------------------------
/*
* 增加加载的事件处理器，接口是window_on_load
*/
if (window.addEventListener)
window.addEventListener("load", window_on_load, false)
else if (window.attachEvent)
window.attachEvent("onload", window_on_load)
else
window.onload=window_on_load;
-----------------------------------------------
//测试设置左右框架大小的函数
function setFrameCols(width) {
//如果参数为空则默认右边宽度为0
var frame = null;
if(getBrowserName() == "IE") {
frame = parent.main_frm_set;
}
else { //suppot FF & Opera
frame = parent.document.getElementById("main_frm_set");
}
//如果没有定义,则默认右边宽度为0
if(typeof(width) == "undefined") {
frame.cols = "100%,*"
return;
}
//如果不参数不为空则，则将其设置成右侧的宽度
frame.cols = "*," + width;
}
------------------------------------------------
//将单字前增加0，例5变为05
function addZero(n){
var num = n + "";
if(num.length > 1)
return num;
return "0" + num;
} 
------------------------------------------------
//根据class获得对象
document.getElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = [];
var child = null;
for(var i in children) {
child = children[i];
if(child.className == className) {
elements.push(child);
}
}
return elements;
}
------------------------------------------------
textarea高度自动调整：
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"></textarea>
------------------------------------------------
new String(file.getFileName().getBytes("GBK"), "ISO8859-1")
文件下载时默认的编码是gbk 
------------------------------------------------
table单元格强制换行的方法：
在table的样式定义中添加：table-layout:fixed;
然后在td的样式定义中添加：
WORD-BREAK: break-all; word-warp: break-word
------------------------------------------------
//用户将数字转换为位数不超过3的KMG表示
function getSizeInKMG(num) {
if(isNaN(num)) {
alert(num + "不是一个数字！");
return false;
}
var unit = ["B", "K", "M", "G"];
for(var i = 0; i < unit.length; i += 1) {
if(num < 1024) {
num = num + "";
if(num.indexOf(".") != -1 && num.indexOf(".") != 3) {
num = num.substring(0,4);
}
else {
num = num.substring(0,3);
}
break;
}
else {
num = num/1024;
}
}
//num = (num+"").replace(/(\d*\.\d{0,2})\d*/ig, "$1");
return num + unit[i];
}
------------------------------------------------
//页面刷新的函数
function reloadMe() {
location.reload();
}
//将屏幕切换到顶部
function scroll_to_top()
{
document.body.scrollTop=0;
}
------------------------------------------------
通过iframe的src写入内容：
<IFRAME src="javascript:void(document.write('<h1>use src to write context</h1>'));" width=300 height=100 frameBorder=0 width=0 scrolling=no height=0 allowTransparency></IFRAME> 
------------------------------------------------
本质原因是 escape() 只是为 ASCII字符 做转换工作，转换成的 %unnnn 这样的码，如果要用更多的字符如 UTF-8字符库 就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以，就这么简单
java:URLEncoder.encode() 
------------------------------------------------
让Flash不档住浮动对象或层的关键参数：wmode=opaque
方法：
针对IE 在内加上参数
针对FF 在内加上参数wmode="opaque"
------------------------------------------------
在一个XML 的处理指令中必须包括version 属性指明所采用的XML 的版本号而
且它必须在属性列表中排在第一位standalone 属性表明该XML 文档是否和一个外部文档
类型定义DTD 配套使用encoding 属性则指明了数据所采用的编码标准如果需要显示中
文那么编码应该是GB2312 或者GBK
------------------------------------------------
//将复选框等设置为选择
function setSelect(_sName, _sVal){
var oObj = document.getElementsByName(_sName);
for (var i = 0; i < oObj.length; i++){
if (oObj[i].type == "select-one"){
for (var j = 0; j < oObj[i].options.length; j++){
if (_sVal == oObj[i].options[j].value){
oObj[i].options[j].selected = true;
}
}
}
if ((oObj[i].type == "checkbox" || oObj[i].type == "radio") && _sVal == oObj[i].value){
oObj[i].checked = true;
}
}
} 
------------------------------------------------
// 判断中英问混排时候的长度
function byteLength (sStr) {
aMatch = sStr.match(/[^\x00-\x80]/g);
return (sStr.length + (! aMatch ? 0 : aMatch.length));
}
------------------------------------------------
//调整图片大小
function img_resize(id)
{
_pObj = document.getElementById(id);
var width = 180;
var height = 120;
if(_pObj.width < width && _pObj.height < height)return;
if (width/_pObj.width < height/_pObj.height){
_pObj.width = _pObj.width * (width / _pObj.width);
}
else{
_pObj.height = _pObj.height * (height / _pObj.height);
}
//alert(_pObj.width + ' ' + _pObj.height);
}
--------------------------------------------------
//保存到剪切板
function setCopy(_sTxt){try{clipboardData.setData('Text',_sTxt)}catch(e){}} 
--------------------------------------------------
//添加到收藏夹
function setHome(title, url) {
if(!title) {
var title = window.document.title;
}
if(!url) {
var url = window.document.location;
}
try{
if (document.all){
window.external.addFavorite(url,title);
} else if (window.sidebar) {
window.sidebar.addPanel(title, url,"");
}
}catch(e){};
}
----------------------------------------------------
//获取浏览器类型
function getBrowserName(){
var user_agent = navigator.userAgent.toLowerCase();
if(user_agent.indexOf("firefox") != -1)
return "FF";
else if(user_agent.indexOf("msie") != -1)
return "IE";
else if(user_agent.indexOf("opera") != -1)
return "Opera";
return "Other";
} 
----------------------------------------------------
//页面转跳方式
req.setAttribute("exception", new SpaceException("很抱歉，没有找到您要的文件。"));
req.getRequestDispatcher("/WEB-INF/jsp/zh/tips/warning.jsp").forward(req, resp);
return;
-----------------------------------------------------
过滤中文字符
document.documentElement.innerHTML.replace(/[^\u4e00-\u9fa5]/gi,"");
-----------------------------------------------------
var objID = "ctl00_LeftNavBar1_floater";
if (document.getElementById(objID)){
var FloatTop = document.getElementById(objID).offsetTop+40;
function moveFloater() {
var clientHeight = window.screen.availHeight-100;
if (window.innerHeight) clientHeight = window.innerHeight;
var scrollY = document.documentElement.scrollTop;
var scrollto = scrollY - FloatTop + clientHeight/2
if (scrollto<0)scrollto = 0;
//alert(scrollto+" " +scrollY +" "+FloatTop +" "+clientHeight );
document.getElementById(objID).style.marginTop = scrollto+"px";
}
if (document.addEventListener){
document.addEventListener('scroll',moveFloater, false);}
else{
window.attachEvent('onscroll',moveFloater);
}
}
-------------------------------------------------------
[来自公司内网]如果做eval，反斜杠需要转义,因为字符串中的\是转义符

var re = eval("/(\\>[\\d\\D]+?[^\\<\\/])"+str+"([\\d\\D]+?\\<)/igm");//这样改一下就可以了

3 楼 liudaoru 2008-01-10  

获取选中的对象：
Document.selection.createRange().item(0)
获取其内容.innerHTML 
---------------------------------
FCKSelection.GetSelectedElement = function()
{
if ( this.GetType() == 'Control' )
{
var oRange = FCK.EditorDocument.selection.createRange() ;

if ( oRange && oRange.item )
return FCK.EditorDocument.selection.createRange().item(0);
}
}
----------------------------------
//获取一个字符串的精确长度
function getStringLength(str){
var totallength=0;
for (var i=0; i < str.length;i++){
var intCode=str.charCodeAt(i);

if (intCode>=0&&intCode<=128) {
totallength=totallength+1; //非中文单个字符长度加 1
}else {
totallength=totallength+2; //中文字符长度则加 2
}
} //end for
return totallength;
}
----------------------------------
getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) {
var tmp = getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
------------------------------------
//obj为控件对象。
function getAbsolutePos(obj)
{
var pos = { x: 0, y: 0 };
var offset_x = obj.clientLeft + 2;
var offset_y = obj.clientTop + 2;

while(obj)
{
pos.x += obj.offsetLeft;
pos.y += obj.offsetTop;
pos.x += obj.clientLeft;
pos.y += obj.clientTop;
/*如果需要计算滚动条
if(obj.scrollLeft)
pos.x += obj.clientLeft;
if(obj.scrollTop)
pos.y += obj.scrollTop;
*/
obj=obj.offsetParent;
}
alert(pos.x + " " + pos.y);
pos.x -= offset_x;
pos.y -= offset_y;
return pos;
}
-------------------------------------
获取滚动条的高度：
window.onscroll = function() {
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}

$("left_head").style.top = scrollPos;
}
---------------------------------------
div嵌套的时候，外层的div的高度自适应的问题，当然这在IE下是没问题的，主要是firefox下的问题。解决的方式是给外层div加个overflow:auto;即可
参见：http://and8.net/article.asp?id=276
---------------------------------------
在FF和IE下表现一直的ul样式定义：
#box ul{padding:0; margin:0; list-style:inside decimal; }
---------------------------------------
encodeURIComponent用来对汉字等进行编码
---------------------------------------
站点的小logo添加的方式为：在系统根目录下面添加一个名称为favicon.ico的图标文件，尺寸要求为16×16.
----------------------------------------
str = str.replace(/<\s*[^(a|p|br|span|div|table|td|tr|\/)][^>]*>/ig, "").replace(/<\s*\/[^(a|p|br|span|div|table|td|tr)][^>]*>/ig, "");
过滤掉指定的标记 
----------------------------------------
java的正则表达式使用方式：
public boolean check(String s){
Pattern p=Pattern.compile("\\<[^\\>]*\\>");
Matcher m=p.matcher(s);
if(m.matches()) return false;
else return true;
} 
-----------------------------------------
//完备的设置innerHTML的方式
function setInnerHTML(el, htmlCode) {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
htmlCode = '
for IE
' + htmlCode;
htmlCode = htmlCode.replace(/]*)>/gi,'');
el.innerHTML = '';
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
} else {
var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if (el_next) {
el_parent.insertBefore(el, el_next)
} else {
el_parent.appendChild(el);
}
}
}
--------------------------------------
xml dom中获取
function getValue(node){
if(node.childNodes[0] == null || node.childNodes[0].childNodes[0] != null)
return "null";
return node.childNodes[0].nodeValue;
} 
---------------------------------------
//将屏幕切换到顶部
function scroll_to_top() {
document.body.scrollTop=0;
}
---------------------------------------
//获得文档的根对象
var leftMenuBodyBase_obj=(document.documentElement.scrollTop>document.body.scrollTop?document.documentElement:document.body);
----------------------------------------
//滚动效果
// on Scroll
if(scrollList_array!=null){
scrollList_array.push(leftMenuScroll);
}else{
var scrollList_array=new Array();
scrollList_array.push(leftMenuScroll);
setInterval(function(){
for(var loops in scrollList_array){
scrollList_array[loops]();
}
},50);
} 
------------------------------------------
//获取function的名称
this.getFunctionName=function(aFunction)
{
if(aFunction)
{
try
{
var name = aFunction.toString().match(/function (\w*)/)[1];
}catch(err)
{
name=null;
}
}
if ((name == null) || (name.length == 0))
name = 'anonymous';
return name;
}
------------------------------------------

2 楼 liudaoru 2008-01-10  

//将rgb(r, g, b)转换为#ffggbb的形式
function toHex(str){
if(str.substring(0, 3).toLowerCase() != "rgb")
return str;
//rgb(122,200,20)
str = str.substring(str.indexOf("(") + 1, str.indexOf(")"));
var nums = str.split(/\s*,\s*/i);
str = "#";
for(var i = 0 ; i < nums.length ; i += 1){
str += parseInt(nums[i]).toString(16);
}
return str;
}

1 楼 liudaoru 2008-01-10  

//停止冒泡
function stopPopup(evt) {
var ev = window.event || evt;
ev.cancelBubble=true;
ev.bubbles = false;
}