logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

JavaScript技巧（下）

 子豪001 2010-08-08

用javascript进行拖拽

 

一个表格特效的JS代码（收藏）

Posted on 2007-03-22 14:58 Jaunt 阅读(521) 评论(0)  编辑  收藏 所属分类: JavaScript

嘿嘿……今天看到很好用的一个js表格效果，有时间研究下^_^
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mytable</title>
<script language="JavaScript">
 // src="anole.js"
// about this: javapig修改 源自 忘了。
// Date: 2006-04-29
 
 function anole(
 str_tableid, // table id
  num_header_offset,// 表头行数
  str_odd_color, // 奇数行的颜色
  str_even_color,// 偶数行的颜色
  str_mover_color, // 鼠标经过行的颜色
  str_onclick_color // 选中行的颜色
  )  {

 // 表格ID参数验证
  if(!str_tableid) return alert(str_tableid+"表格不存在");
 var obj_tables=(document.all ? document.all[str_tableid]:document.getElementById(str_tableid));
 if(!obj_tables) return alert("ID为("+str_tableid+")不存在！");

 // 设置个参数的缺省值
  var col_config=[];
 col_config.header_offset=(num_header_offset?num_header_offset:0 );
 col_config.odd_color=(str_odd_color?str_odd_color:'#ffffff');
 col_config.even_color=(str_even_color?str_even_color:'#dbeaf5');
 col_config.mover_color=(str_mover_color?str_mover_color:'#6699cc');
 col_config.onclick_color=(str_onclick_color?str_onclick_color:'#4C7DAB');
 // 初始化表格（可能多个表格用同一个ID）
  if(obj_tables.length)
  for(var i=0;i<obj_tables.length;i++ )
 tt_init_table(obj_tables[i],col_config);
 else
 tt_init_table(obj_tables,col_config);
}
 
 function tt_init_table(obj_table,col_config)  {
 var col_lconfig=[],
 col_trs=obj_table.rows;
 if(!col_trs) return ;
 
 for(var i=col_config.header_offset;i<col_trs.length;i++)  { // i 从 表头以下开始
  col_trs[i].config=col_config;
 col_trs[i].lconfig=col_lconfig;
 col_trs[i].set_color=tt_set_color;
 col_trs[i].onmouseover=tt_mover;
 col_trs[i].onmouseout=tt_mout;
 col_trs[i].onmousedown=tt_onclick;
 col_trs[i].order=(i-col_config.header_offset)%2 ;
 col_trs[i].onmouseout();
 }
}
 function tt_set_color(str_color) {
 this.style.backgroundColor=str_color;
}
 
 // 事件操作
 function tt_mover() {
 if(this.lconfig.clicked!=this )
  this.set_color(this.config.mover_color);
}
 function tt_mout() {
 if(this.lconfig.clicked!=this )
  this.set_color(this.order?this.config.odd_color:this.config.even_color);
}
 function tt_onclick()  {
 if( this.lconfig.clicked==this) {
  this.lconfig.clicked=null;
  this.onmouseover();
 }
  else {
  var last_clicked=this.lconfig.clicked;
  this.lconfig.clicked=this ;
  if(last_clicked) last_clicked.onmouseout();
  this.set_color(this.config.onclick_color);
 }
}
 
</script>
</head>

<body>
<table bgcolor="#9933ff" align="center" cellpadding="1" cellspacing="0" width="80%">
 <tr>
 <td>
 <table id="demo" cellpadding="1" cellspacing="1" border="0" width="100%" align="center">
 <tr><th colspan="2" bgcolor="ffffff">HTML document object properties</th></tr>
 <tr><td width="20%">activeElement</td><td>Retrieves the object that has the focus.</td></tr>
 <tr><td>aLinkColor</td><td>Sets or retrieves the color of all links in the document.</td></tr>
 <tr><td>bgColor</td><td>Sets or retrieves the background color behe document object.</td></tr>
 <tr><td>body</td><td>Specifies the beginning and end of the document body.</td></tr>
 <tr><td>contentEditable</td><td>Sets or retrieves whether the userdocument object.</td></tr>
 <tr><td>cookie</td><td>Sets or retrieves the string value of a cookie.</td></tr>
 <tr><td>defaultCharset</td><td>Sets or retrieves the default chara of the document.</td></tr>
 <tr><td>designMode</td><td>Sets or retrieves whether the document can be edited.</td></tr>
 <tr><td>documentElement</td><td>Retrieves a reference to the root node of the document.</td></tr>
 <tr><td>domain</td><td>Sets or retrieves the security domain of the document.</td></tr>
 </table>
 </td>
 </tr>
 </table>
 <script language="JavaScript">
  anole('demo',1,'#ffffff','#ccccff','#ffccff','#cc99ff');
 </script>
</body>
</html>
 

自动对select表单列表进行排序（收藏）

Posted on 2007-03-22 15:55 Jaunt 阅读(194) 评论(0)  编辑  收藏 所属分类: JavaScript
自动对select表单列表进行排序

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
function s(n){
  var o=document.getElementById(n);
  if (!o) return ;
  var t=[],tt=o.options;
  while(tt.length>0){
  t[t.length]=tt[0].text;
  tt.remove(0);
 }
 t.sort();
  for(var i=0,c;c=t[i];i++){
  tt.add(new Option(c));
 }
}
</script>
</head>
<body onload="s('abc')">
<select id="abc">
<option>华硕</option>
<option>.NET </option>
<option>360 安全卫士</option>
<option>ACDSee</option>
<option>Adobe</option>
<option>Firewall</option>
<option>Alcohol 120%</option>
<option>AMD</option>
<option>AnyDVD</option>
<option>Apple</option>
<option>ATi</option>
<option>AutoDesk</option>
<option>罗技</option>
<option>BitComet</option>
<option>BitSpirit(比特精灵)</option>
<option>BlackIce</option>
<option>BlueTooth</option>
<option>Cisco </option>
<option>CloneCD</option>
<option>CloneDVD</option>
<option>CS-半条命</option>
<option>CuteFTP</option>
<option>千千静听</option>
<option>趋势科技(PC-cillin)</option>
<option>DAEMON Tools</option>
<option>DELL</option>
<option>DirectX</option>
<option>DivX</option>
<option>DreamMail</option>
<option>PowerDVD</option>
<option>Easy CD-DA</option>
<option>瑞星(Rising)</option>
<option>Editplus</option>
<option>EmEditor</option>
<option>eMule</option>
<option>eMule Plus</option>
<option>FeedDemon</option>
<option>FileZilla</option>
<option>FlashFXP</option>
<option>Flashget</option>
<option>foobar2000</option>
<option>Foxit PDF Reader</option>
<option>Foxmail</option>
<option>FreeBSD</option>
<option>FTPRush</option>
<option>Gmail</option>
<option>Google talk</option>
<option>Google</option>
<option>GoogleToolbar</option>
<option>GoSURF</option>
<option>GreenBrowser</option>
<option>HP</option>
<option>HyperSnap-DX</option>
<option>IBM</option>
<option>ICQ</option>
<option>iMac G5</option>
<option>Intel</option>
<option>Internet Explorer</option>
<option>IPB</option>
<option>iTune</option>
<option>腾讯</option>
<option>微软</option>
<option>木马克星(iparmor)</option>
<option>天网防火墙</option>
<option>木马捆绑克星</option>
<option>风云防火墙个人版</option>
<option>卡巴斯基(Kaspersky)</option>
<option>Maxthon 傲游</option>
<option>Media Player Classic</option>
<option>Windows Media Player</option>
<option>Windows Live Messenger</option>
<option>Microsoft AntiSpyware</option>
<option>Microsoft Office</option>
<option>Mozilla FireFox</option>
<option>Mozilla ThunderBird</option>
<option>MySQL</option>
<option>Nero</option>
<option>NetCaptor</option>
<option>Nettransport</option>
<option>nVIDIA nForce</option>
<option>鱼鱼桌面秀</option>
<option>Opera</option>
<option>PHP</option>
<option>QQ病毒专杀工具</option>
<option>QuickTime</option>
<option>RealPlayer</option>
<option>skype</option>
<option>SQL Server 2005</option>
<option>stylexp</option>
<option>TheWorld Browser</option>
<option>TuneUp Utilities</option>
<option>UltraEdit</option>
<option>UltraISO</option>
<option>Winamp</option>
<option>Windows OneCare</option>
<option>Windows优化王</option>
<option>Windows优化大师</option>
<option>WinDVD</option>
<option>WinRAR</option>
<option>WinZip</option>
<option>XnView</option>
<option>Zonealarm</option>
<option>Zoom Player</option>
<option>超级兔子</option>
<option>风雷影音</option>
<option>急速启动 HurryRun</option>
</select>
</body>
</html>

主要有以下几点总结：
1，select控件本身支持字母索引。比如select控件处于焦点中的时候，按B键，option中相应的以B开头的选项就会显示出来。

2，这段代码写的较好!这段代码的作用是一项一项赋值select空间列表内容赋给另一个数组。
var t=[],tt=o.options;
  while (tt.length>0){
    t[t.length]=tt[0].text;
    tt.remove(0);
  }
首先定义数组t=[],用于存储原select控件列表内容。
tt=o.options;读取select空间内容，以数组形式存储在tt数组中。
t[t.length]=tt[0].text;这里时一个技巧，因为t.length总是比当前t的最大索引大1，所以这样写数组t可以自动增加空间。tt[0].text这里每次都读取第一个内容，然后用tt.remove(0);删除第一项内容，直至读取完毕。

3，这段代码对新数组内容按字母派讯，然后写入原select空间列表。
t.sort();
  for (var i=0,c;c=t[i];i++){
    tt.add(new Option(c));
  }

JS检验密码安全性等级(收藏)

Posted on 2007-03-22 14:16 Jaunt 阅读(234) 评论(0)  编辑  收藏 所属分类: JavaScript
  JS检验密码安全性等级：（首先声明,本文非我原作）
  <STYLE type=text/css>
    body {
    font-size: 12px;
    font-family: Tahoma, Arial;
    background: #C4C8CB;
    margin: 0px;
    padding: 0px;
    }
    td {
    padding-left: 5px;
    font-size: 12px;
    font-family: Tahoma, Arial;
    }
    .blueFont {color: #6699CC}
    .redFont {color: #FF0000}
    /***** Other Elements in Page Content *****/
    .pwd-strength {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    width: 180px;
    border: solid 1px #CCCCCC;
    }
    .pwd-strength-box,
    .pwd-strength-box-low,
    .pwd-strength-box-med,
    .pwd-strength-box-hi
    {
    color: #464646;
    text-align: center;
    width: 33%;
    }
    .pwd-strength-box-low
    {
    color: #990000;
    background-color: #FFECEC;
    }
    .pwd-strength-box-med
    {
    color: #000066;
    background-color: #D2E9FF;
    }
    .pwd-strength-box-hi
    {
    color: #003300;
    background-color: #DDFFDD;
    }
    </STYLE>
    <SCRIPT language=javascript>
    function checkPassword(pwd){
    var objLow=document.getElementById("pwdLow");
    var objMed=document.getElementById("pwdMed");
    var objHi=document.getElementById("pwdHi");
    objLow.className="pwd-strength-box";
    objMed.className="pwd-strength-box";
    objHi.className="pwd-strength-box";
    if(pwd.length<6){
    objLow.className="pwd-strength-box-low";
    }else{
    var p1= (pwd.search(/[a-zA-Z]/)!=-1) ? 1 : 0;
    var p2= (pwd.search(/[0-9]/)!=-1) ? 1 : 0;
    var p3= (pwd.search(/[^A-Za-z0-9_]/)!=-1) ? 1 : 0;
    var pa=p1+p2+p3;
    if(pa==1){
    objLow.className="pwd-strength-box-low";
    }else if(pa==2){
    objMed.className="pwd-strength-box-med";
    }else if(pa==3){
    objHi.className="pwd-strength-box-hi";
    }
    }
    }
    </SCRIPT>
    <BR>
    <TABLE borderColor=#ffffff cellSpacing=0 borderColorDark=#eeeeee cellPadding=0 width=400 align=center bgColor=#ffffff border=1>
    <TBODY>
    <TR>
    <TD align=middle bgColor=#ffffcc colSpan=2 height=22><SPAN class=blueFont><B>校验密码安全性</B></SPAN></TD></TR>
    <TR>
    <TD style="WIDTH: 100px">请输入密码：</TD>
    <TD><INPUT onkeyup=checkPassword(this.value); type=password value="" name=password></TD></TR>
    <TR>
    <TD style="WIDTH: 100px">安全性等级：</TD>
    <TD>
    <TABLE class="pwd-strength FCK__ShowTableBorders" cellSpacing=0 cellPadding=0 width="100%">
    <TBODY>
    <TR>
    <TD class=pwd-strength-box id=pwdLow>低</TD>
    <TD class=pwd-strength-box id=pwdMed>中</TD>
    <TD class=pwd-strength-box id=pwdHi>高</TD></TR></TBODY></TABLE></TD></TR>
    <TR>
    <TD colSpan=2><SPAN class=redFont>建议至少 6 个字符. 请使用强密码以保证安全.</SPAN></TD></TR></TBODY></TABLE>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 子豪001 > 《网站技术》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多