JS字随鼠标移动,伸缩菜单,搜索引擎，删表格列

来源：互联网发布：校园社区源码编辑：程序博客网时间：2024/05/18 22:45

字随鼠标移动

<html>
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
   .d1{
         position: absolute;
                  left: 30px;
                  top: 20px;
   }
  </style>
    </head>
    <body>
        <font color="red" class="d1" id="d1">hello</font>
<script type="text/javascript">
      var d1_node=document.getElementById("d1");
    document.onmousemove=function(e){
           var e=e?e:window.event;
           d1_node.style.left=e.clientX;
           d1_node.style.top=e.clientY;
     }
  </script>
    </body>
</html>

伸缩菜单：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
     li{ list-style:none}
   ul li ul{display:none;}
   .view{display:block;}
   .noview{display:none;}
  </style>
    </head>
    <body onload="demo()">
    <ul id="d1">
        <li>
            <a href="#">一级菜单01</a>
                <ul>
                <li>一级菜单01_1</li>
                    <li>一级菜单01_2</li>
                </ul>
            </li>
            <li><a href="#">一级菜单02</a></li>
            <ul>
                <li>一级菜单02_1</li>
                    <li>一级菜单02_2</li>
                </ul>
            <li>
             <a href="#">一级菜单03</a>
               <ul>
                <li>一级菜单03_1</li>
                    <li>一级菜单03_2</li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
   function demo(){
    var ul_n=document.getElementById("d1");
    var ul_chs=ul_n.childNodes;
    for(var i=0;i<ul_chs.length;i++)
    {
     if(ul_chs[i].tagName=="LI")
     {
      ul_chs[i].onclick=change;
     }
    }
   }
   function change(){
    li_chs=this.childNodes;
    for(var i=0;i<li_chs.length;i++){
     if(li_chs[i].tagName=="UL")
     {
      if(li_chs[i].className=="view")
      {
       li_chs[i].className="noview"
      }
      else{
       li_chs[i].className="view"
      }
     }
    }
   }
  </script>
    </body>
</html>

搜索引擎

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  .disview{display:none;}
     .view{ display:block; border:#096 solid; width:30%; margin-left:32px;}
  .text{ width:30%}
  ul{list-style:none; padding:0px; margin:0px;}
  .no{}
  .over{ background-color:#00C}
</style>
<script type="text/javascript">
  function getArray(str){
   var array=["red","blue","blank","white","green","black"];
   var darr=new Array();
   var len=str.length;
   len=parseInt(len)
   for(i=0;i<array.length;i++)
   {
    if(array[i].indexOf(str)==0){
     darr.push(array[i])
    }
   }
   return darr;
  }
  function addli(str)
  {
   ulnode=document.getElementById("ul");
   removeall(ulnode);
   var arr=getArray(str);
   flag=false;
   for(i=0;i<arr.length;i++)
   {
    linode=document.createElement("li");
    textnode=document.createTextNode(arr[i]);
    linode.appendChild(textnode);
    ulnode.appendChild(linode);
    linode.onclick=function(){
     txtnode=document.getElementById("text");
     var listr=this.firstChild.nodeValue;
     txtnode.value=listr;
     removeall(ulnode);
    }
    linode.onmouseover=function(){
     this.className="over";
    }
    linode.onmouseout=function(){
     this.className="no"
    }
    flag=true;
   }
   return flag;
  }
  function removeall(node){
   for(i=0;i<node.childNodes.length;i++){
    node.removeChild(node.childNodes[i]);
    i--;
   }
   divnode=document.getElementById("div");
   divnode.className="disview";
   return;
  }
  function demo()
  {
   txtnode=document.getElementById("text");
   var str=txtnode.value;
   if(str.length>0)
   {
    if(addli(str))
    {
     divnode=document.getElementById("div");
     divnode.className="view";
    }
   }
   else{
    ulnode=document.getElementById("ul");
    removeall(ulnode)
   }
  }
</script>
</head>

<body>
color:<input type="text" onkeyup="demo()" id="text" class="text"/>
    <div class="disview" id="div">
    <ul id="ul">
        </ul>
    </div>
</body>
</html>
删除表格一列

</head>
<body onload="demo()">
  <table id="tabobj">
   <tr><td>1</td><td>2</td><td>3</td></tr>
   <tr><td>1</td><td>2</td><td>3</td></tr>
   <tr><td>1</td><td>2</td><td>3</td></tr>
  </table>
<script type="text/javascript">
  function deletecoll(tabobj,j)
  {
   var length=tabobj.rows.length;
   for(var i=0;i<length;i++)
   {
    tabobj.rows[i].deleteCell(j);
   }
  }
  function demo(){
   var tabobj=document.getElementById("tabobj");
   deletecoll(tabobj,1);
  }
</script>
</body>
</html>

带提示文本框:

//i已经为2不能用i
     if($(this).val()=="请输入内容"){
      $(this).val("");
    }
   })
   $("input:eq("+i+")").bind("blur",function(){
     if($(this).val()==""){
      $(this).val("请输入内容");
     }
    });
  }
})
</script>
</head>

0 0