js一些常见的问题与解决代码(2)(转自www.51js.com)

最新推荐文章于 2022-02-14 08:43:49 发布

Jofee

最新推荐文章于 2022-02-14 08:43:49 发布

阅读量3.2k

点赞数

分类专栏： Web 文章标签： function null javascript table button hex

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

RGB颜色转换

脚本说明: 第一步:把如下代码加入<head>区域中 <SCRIPT LANGUAGE="JavaScript">     </script> 第二步:把如下代码加入<body>区域中 <form name=rgbform> <b>请输入RGB颜色值(0 to 255)</b><br> Red: <input type="text" name="red" size="4"><br> Green: <input type="text" name="green" size="4"><br> Blue: <input type="text" name="blue" size="4"><br> <input type=button value="Show Hex #" onClick="showRGB(this.form)"> Hex code: <input type=text name=hexval size=7> </form>
提示：你可以先修改部分代码再运行

背景色调色板

<html> <head> <title>调色板</title> </head> <body> <script language="JavaScript">  </script> </body> </html>
   提示：你可以先修改部分代码再运行

滚动的超级链接

脚本说明: 第一步:把如下代码加入<head>区域中 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 第二步:把如下代码加入<body>区域中 <A HREF="http://98062.cn99.com/" οnmοuseοver="greenlight(this)"; οnmοuseοut="stp(this)"><span id="esh">武测科大98062</span></A>
   提示：你可以先修改部分代码再运行

 闪烁的霓虹灯

脚本说明：第一步:把如下代码加入<body>区域中: <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 第二步:把<body>中的内容改为 <body bgcolor="#fef4d9" onLoad="animate()">
   提示：你可以先修改部分代码再运行

 随次数变化提示

脚本说明: 把如下代码加入<body>区域中 <SCRIPT language="JavaScript"> </SCRIPT> <SCRIPT language="JavaScript"> </SCRIPT>
   提示：你可以先修改部分代码再运行

动态编辑表格

<html> <head> <style> TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;} </style> <body style="font-family: verdana"> <h2>Table Editor</h2> <br> <h3>Single click to select a cell, alt-click to select a row</h3> <br> <div id=TableContainer> <table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed"> <tbody> <tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr> <tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr> <tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr> </tbody> </table> </div> <br><br><br> <input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" οnclick="addRow()"><br> <input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" οnclick="removeRow()"><br> <input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" οnclick="addCell()"><br> <input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" οnclick="removeCell()"><br> <input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" οnclick="moveUp()"><br> <input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" οnclick="moveDown()"><br> <input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" οnclick="moveLeft()"><br> <input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" οnclick="moveRight()"><br> <input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" οnclick="editContents();"> <input type=text style="display: none; width: 400px;" id=EditCell><br> <input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" οnclick="editStyle();"> <input type=text style="display: none; width: 400px;" id=EditStyle><br> <script> var lastSelection = null; ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)"); ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)"); ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)"); ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)"); ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)"); ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)"); ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)"); ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)"); ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')"); ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')"); ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'"); function select(element) { var e, r, c; if (element == null) { e = window.event.srcElement; } else { e = element; } if ((window.event.altKey) || (e.tagName == "TR")) { r = findRow(e); if (r != null) { if (lastSelection != null) { deselectRowOrCell(lastSelection); } selectRowOrCell(r); lastSelection = r; } } else { c = findCell(e); if (c != null) { if (lastSelection != null) { deselectRowOrCell(lastSelection); } selectRowOrCell(c); lastSelection = c; } } window.event.cancelBubble = true; } TableContainer.onclick = select; function cancelSelect() { if (window.event.srcElement.tagName != "BODY") return; if (lastSelection != null) { deselectRowOrCell(lastSelection); lastSelection = null; } } document.onclick = cancelSelect; function findRow(e) { if (e.tagName == "TR") { return e; } else if (e.tagName == "BODY") { return null; } else { return findRow(e.parentElement); } } function findCell(e) { if (e.tagName == "TD") { return e; } else if (e.tagName == "BODY") { return null; } else { return findCell(e.parentElement); } } function deselectRowOrCell(r) { r.runtimeStyle.backgroundColor = ""; r.runtimeStyle.color = ""; //r.runtimeStyle.fontFamily = "Verdana"; } function selectRowOrCell(r) { r.runtimeStyle.backgroundColor = "darkblue"; r.runtimeStyle.color = "white"; //r.runtimeStyle.fontFamily = "Verdana"; } function addRow() { var r, p, nr; if (lastSelection == null) { r = null; p = TheTable.children[0]; } else { r = lastSelection; if (r.tagName == "TD") { r = r.parentElement; } p = r.parentElement; } nr = document.createElement("TR"); p.insertBefore(nr, r); select(nr); addCell(); return nr; } function removeRow() { var r, p, nr; if (lastSelection == null) return false; r = lastSelection; if (r.tagName == "TD") { r = r.parentElement; } p = r.parentElement; p.removeChild(r); lastSelection = null; return r; } function addCell() { var r, p, c, nc, text; if (lastSelection == null) return false; r = lastSelection; if (r.tagName == "TD") { r = r.parentElement; c = lastSelection; } else { c = null; } nc = document.createElement("TD"); text = document.createTextNode("New Cell"); nc.insertBefore(text, null); r.insertBefore(nc, c); select(nc); return nc; } function removeCell() { var c, p, nr; if (lastSelection == null) return false; c = lastSelection; if (c.tagName != "TD") { return null; } p = c.parentElement; p.removeChild(c); lastSelection = null; return c; } function editContents() { var c, p, nr; if (lastSelection == null) return false; c = lastSelection; if (c.tagName != "TD") { return null; } EditCell.style.display = ""; EditCell.value = c.innerHTML; c.setExpression("innerHTML", "EditCell.value"); EditCell.focus(); EditCell.onblur = unhookContentsExpression; } function unhookContentsExpression() { lastSelection.removeExpression("innerHTML"); EditCell.value = ''; EditCell.style.display = "none"; } function editStyle() { var c; if (lastSelection == null) { c = TheTable; } else { c = lastSelection; } EditStyle.style.display = ""; EditStyle.value = c.style.cssText; c.style.setExpression("cssText", "EditStyle.value"); EditStyle.focus(); EditStyle.onblur = unhookStyleExpression; } function unhookStyleExpression() { var c; if (lastSelection == null) { c = TheTable; } else { c = lastSelection; } c.style.removeExpression("cssText"); EditStyle.value = ''; EditStyle.style.display = "none"; } function moveUp() { var r, p, ls; if (lastSelection == null) return false; r = lastSelection; if (r.tagName != "TR") { return null; } if (r.rowIndex == 0) return; ls = r.previousSibling; p = ls.parentElement; p.insertBefore(r, ls); return r; } function moveDown() { var r, p, ls; if (lastSelection == null) return false; r = lastSelection; if (r.tagName != "TR") { return null; } ls = r.nextSibling; if (ls == null) return null; p = ls.parentElement; ls = ls.nextSibling; p.insertBefore(r, ls); return r; } function moveLeft() { var c, p, ls; if (lastSelection == null) return false; c = lastSelection; if (c.tagName != "TD") { return null; } ls = c.previousSibling; if (ls == null) return null; p = ls.parentElement; p.insertBefore(c, ls); return c; } function moveRight() { var c, p, ls; if (lastSelection == null) return false; c = lastSelection; if (c.tagName != "TD") { return null; } ls = c.nextSibling; if (ls == null) return null; p = ls.parentElement; ls = ls.nextSibling; p.insertBefore(c, ls); return c; } function nothingSelected() { return (lastSelection == null); } function rowSelected() { var c; if (lastSelection == null) return false; c = lastSelection; return (c.tagName == "TR") } function cellSelected() { var c; if (lastSelection == null) return false; c = lastSelection; return (c.tagName == "TD") } function whatIsSelected() { if (lastSelection == null) return "Table"; if (lastSelection.tagName == "TD") return "Cell"; if (lastSelection.tagName == "TR") return "Row"; } </script>
   提示：你可以先修改部分代码再运行

取得本地计算机名

<script language="JavaScript"> var WshNetwork = new ActiveXObject("WScript.Network"); alert("Domain = " + WshNetwork.UserDomain); alert("Computer Name = " + WshNetwork.ComputerName); alert("User Name = " + WshNetwork.UserName); </script>
   提示：你可以先修改部分代码再运行

 进度条上端加图片

<div id="a" style="position:absolute;top:30;left:229;width:71;background-color:green"><img src="http://www.51js.com/images/avatars/07.gif"></div> <div style="position:absolute;top:120;left:300"> <table cellpadding="0" cellspacing="0" border="1" width="500" height="5"> <tr> <td> <table id="t1" style="background-color:red;"><tr><td></td></tr></table> </td> </tr> </table> </div> <script language="javascript"> var i=0; function abc(){ t1.style.width=i+"%"; a.style.posLeft=a.style.posLeft+2; i=i+0.4; if(i>=100.4){ document.location.href="http://www.163.com" return false; } setTimeout("abc()",10); } abc(); </script>
   提示：你可以先修改部分代码再运行

 CSS也能控制表格的交替颜色

<style type="text/css">  </style> </HEAD> <table> <tr><td>第1行</td><td>第1行</td></tr> <tr><td>第2行</td><td>第2行</td></tr> <tr><td>第3行</td><td>第3行</td></tr> <tr><td>第4行</td><td>第4行</td></tr> <tr><td>第5行</td><td>第5行</td></tr> </table> //myhyli @ blueidea
   提示：你可以先修改部分代码再运行

 CSS也能控制表格的交替颜色(2)

<style type="text/css">  </style> </HEAD> <table> <tr><td>第1行</td><td>第1行</td><td>第1行 </td><td>第1行</td><td>第1行</td></tr> <tr><td>第2行</td><td>第2行</td><td>第2行 </td><td>第2行</td><td>第2行</td></tr> <tr><td>第3行</td><td>第3行</td><td>第3行 </td><td>第3行</td><td>第3行</td></tr> <tr><td>第4行</td><td>第4行</td><td>第4行 </td><td>第4行</td><td>第4行</td></tr> <tr><td>第5行</td><td>第5行</td><td>第5行 </td><td>第5行</td><td>第5行</td></tr> </table> //myhyli @ blueidea
   提示：你可以先修改部分代码再运行

一、*表格*相关问题

no1、1象素表格边框制作方法

　　这个方法比较多，而且不同方法做出来的效果又不完全一样。

　　1.利用cellspacing和背景颜色

　　<table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" >
　　　　<tr bgcolor="#FFFFFF">
　　　　　　<td bgcolor="#FFFFFF">　</td>
　　　　　　<td bgcolor="#FFFFFF">　</td>
　　　　</tr>
　　　　<tr bgcolor="#FFFFFF">
　　　　　　<td bgcolor="#FFFFFF">　</td>
　　　　　　<td bgcolor="#FFFFFF">　</td>
　　　　</tr>
　　</table>

　　2.利用CSS

　　<table border="1" width="200" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
　　<tr>
　　　　<td>　</td>
　　　　<td>　</td>
　　</tr>
　　<tr>
　　　　<td>　</td>
　　　　<td>　</td>
　　</tr>
　　</table>

　　3.利用1像素的表格。

　　可以将单元格里插入1像素的表格，并将单元格的高设为1。制作虚线的时候，用这种方法比较好哦。
二、*页面*相关问题

no1、页面完全居中显示

　　<table width=100% height=100%>
　　　<tr>
　　　　<td align="center" valign="middle">
　　　　<table width=776 height=445 bgcolor="#EEEEEE">
　　　　　<tr><td>这里是第二个表格</td></tr>
　　　　</table>
　　　　</td>
　　　</tr>
　　</table>

no2、禁止页面内容被选择

<body onselectstart='return false' οncοpy='return false;' oncut='return false;'>

no3、在网页中加入声音

<bgsound src="URL" loop="-1">

loop设为-1则为循环播放。。

可以用FLASH来控制更自由。。

no4、js控制背景音乐播放与停止

<a href="#" onMouseOver="document.all.music.src='#.wav'">播放</a>
<a href="#" onMouseOver="document.all.music.src=''">停止</a>
<bgsound src="#" id=music>

三、*层*相关问题

no1.层在flash上层显示

　　<param name="wmode" value="transparent"> FLASH将透明
　　<param name="wmode" value="Opaque"> FLASH仍将保持不透明
*JS常用函数*

no1.自定义弹出窗口

　　<HEAD>
　　<SCRIPT language="javascript">
　　function cusWin(url,w,h){
　　window.open(url,'newWin','width='+w+',height='+h)
　　}
　　</SCRIPT>
　　</HEAD>
　　<BODY>
　　<a href="###" onClick="cusWin('www.ccdiy.com',200,200)">弹出窗口</a>
　　</BODY>

　　其中<head></head>中的Script定义了一个cusWin函数，包括地址、窗口大小。
　　在<body></body>中的<a>利用onClick事件来触发cusWin这个函数。
　　其中有三个参数，第一个代表地址，第二代表宽，第三个代表高

no2.加入收藏夹

　　window.external.addFavorite('URL','siteName')

　　这里的URL要改成你的网址，siteName改成要在收藏夹中显示的名字

no3.设为首页

　　this.style.behavior='url(#default#homepage)';this.setHomePage('URL')

　　把URL把要设为首页的网址就可以了。

no4.不问断滚动

<span id="_tv_box" style="width:150;height:60;overflow:hidden" onMouseOver="_tv_start=false" onMouseOut="_tv_start=true">
<span id="_tv_item" style="position:relative;top:0">
<font color=red>您好！朋友</font><br>
1.欢迎光临dev-club<br>
2.<a href="http://www.dev-club.com/club/bbs/bbsView.asp?boardid=31">进入php编程</a><br>
3.进入joy asp<br>
4.进入script<br>
5.在dev-club您将获得最好的帮助<br>
</span>
</span>

<script>
var _tv_moveSpeed = 50; // 速度控制，两次移动的间隔ms
var _tv_movestep = 1; // 速度控制，每次的移动量px
var _tv_post = 0; // 工作变量，当前偏移量
var _tv_tvheight = 0; // 工作变量，移动区域的总高度
var _tv_start = true; // 工作变量，运动状态控制
/**
* 移动控制
* 首次调用需有参数
*/
function tv_item_move(v) {
if(v) { // 第一次进入
_tv_item.innerHTML += _tv_item.innerHTML; // 复制移动区域内容，这是本算法的关键
_tv_tvheight = _tv_item.offsetHeight; // 获取移动区域的总高度
}
if(_tv_start) { // 是移动状态
_tv_post -= _tv_movestep; // 计算偏移
if(_tv_post+_tv_tvheight < _tv_box.offsetHeight) // 若移动后将露出底部
_tv_post += _tv_tvheight/2; // 将偏移上调一段
_tv_item.style.pixelTop = _tv_post; // 设置偏移
}
setTimeout('tv_item_move()',_tv_moveSpeed); // 启动定时器
}
/*** 启动纵向滚动 ***/
tv_item_move(1);
</script>

＊链接＊相关问题

no1．如何在同一个页面实现多种链接样式

　　比如当鼠标over一些链接时,它显示9PT,字是红色,另一些是10号字.字是蓝的等等

答：a.sty1:link,a.sty1:visited{font-size:12px;color:#333333}
a.sty1:hover{color:#666666}
a.sty2:link,a.sty2:visited{font-size:14px;color:#cc0000}
a.sty2:link,a.sty2:visited{color:#CC3333}

　　　　在这里用了定义了两种样式，第一种样式的名为sty1，第二种样式的名为sty2，它们之间用这个名称来分别，而在使用的时候，只要在<a>标签中加上这个悔改就可以了。像下面这样子：

　　　　<a href=# class="sty1">样式１</a>
　　　　<a href=# class="sty2">样式２</a>

*ASP*相关问题

no1.搜索结果高亮显示

　　<%=Replace(rs("content"),keyword,"<b><font color=red>"&keyword&"</font></b>")%>

*Dreamweaver*相关问题

no1.字体混乱问题

　　按下面的步骤可以解决。

　　编辑→参数选择(Ctrl+U)，打开打开参数选择

　　然后找到字体，在这里就有详细的视图区、代码区的字体设置选项了。

　　一般设为宋体就可以了。

no2、在DW中页面汉字乱码的问题

　　在<head>和</head>之间加入如下的语句一般就可以解决问题了。

　　<META http-equiv="Content-Type" content="text/html; charset=gb2312">

*表单*相关问题

no1.表单元素上下有白边

　　<table>
　　　　<tr>
　　　　　<form>
　　　　　　<td></td>
　　　　　</form>
　　　　</tr>
　　</table>

　　只要这样子排列，就不会有问题了.

自动更新的日期时间

<script language="vbscript"
sub showtime()
fromclock.txtdate.value=date()
fromclock.txttime.value=time()
settimeout "showtime",1000
end sub
</script>文字

"); function showPopupText(){ var o=event.srcElement; MouseX=event.x; MouseY=event.y; if(o.alt!=null && o.alt!="") { o.pop=o.alt;o.alt="" } if(o.title!=null && o.title!=""){ o.pop=o.title;o.title="" } if(o.pop) { o.pop=o.pop.replace("/n","
"); o.pop=o.pop.replace("/n","
"); } if(o.pop!=sPop) { sPop=o.pop; clearTimeout(curShow); clearTimeout(tFadeOut); clearTimeout(tFadeIn); clearTimeout(tFadeWaiting); if(sPop==null || sPop=="") { popLayer.innerHTML=""; popLayer.style.filter="Alpha()"; popLayer.filters.Alpha.opacity=0; } else { if(o.dyclass!=null) popStyle=o.dyclass else popStyle="cPopText"; curShow=setTimeout("showIt()",tPopWait); } } } function showIt() { popLayer.className=popStyle; popLayer.innerHTML=sPop; popWidth=popLayer.clientWidth; popHeight=popLayer.clientHeight; if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 else popLeftAdjust=0; if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 else popTopAdjust=0; popLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; popLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; popLayer.style.filter="Alpha(Opacity=0)"; fadeOut(); } function fadeOut(){ if(popLayer.filters.Alpha.opacity < form.elements.length; i++) { var e = form.elements[i]; if (e.name != 'chkall') { e.checked = form.chkall.checked; } } } function findobj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0 && parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) { x=d.all[n]; } for(i=0;!x && i d.layers.length;i++) { x=MM_findObj(n,d.layers[i].document); } return x; } function copyCode(obj) { var rng = document.body.createTextRange(); rng.moveToElementText(obj); rng.scrollIntoView(); rng.select(); rng.execCommand("Copy"); rng.collapse(false); } function runCode(obj) { var winname = window.open('', "_blank", ''); winname.document.open('text/html', 'replace'); winname.document.writeln(obj.value); winname.document.close(); } function saveCode(obj) { var winname = window.open('', '_blank', 'top=10000'); winname.document.open('text/html', 'replace'); winname.document.writeln(obj.value); winname.document.execCommand('saveas','','code.htm'); winname.close(); } document.οnmοuseοver=showPopupText; </script>

Jofee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js一些常见的问题与解决代码(2)(转自www.51js.com)

RGB颜色转换脚本说明:第一步:把如下代码加入区域中<!-- Beginfunction showRGB(f) {red = f.red.value;green = f.green.value;blue = f.blue.value;var hexarray= new Array(256);hexarray[0]="00"; hexarra
复制链接

扫一扫