js代码加总结

来源：互联网发布：淘宝运作流程编辑：程序博客网时间：2024/05/19 02:18

一. 给html标签加属性class是为了给标签加类样式css，给html标签加id属性主要是为了在js中能访问到html标签节点（也就是直接拿到html标签对象），关键就是在js中用到哪个标签对象就在html文件里给哪个标签加id属性，在js中拿到html标签对象后也可以给html标签对象添加class类样式或者行内样式
1.最新上架板块（可以把板块叫标签）切换效果
主要是每份标签对应每份内容，标签上加有事件属性（onmouseover和onmouseout）,标签有自己的class类样式和id属性，内容有自己的class类样式（dispaly）和id属性
在js中的事件函数中设置数组把标签和内容的id值放进去，通过for循环给所有标签和所有内容设置好类样式，设置好的类样式是所有标签和内容是同一种样式（也就是状态都一样），下面在设置当前鼠标放上去的标签样式和对应得内容样式
            
                <dl id="book_history">
                    <dt><img src="images/dd_history_1.jpg" alt="history"/></dt>
                    <dd><font class="book_title">《中国时代》（上）</font><br /
                
                <dl id="book_family" class="book_none">
                    <dt><img src="images/dd_family_1.jpg" alt="history"/></dt>
                    <dd><font class="book_title">嘿，我知道你</font><br />
              
                <dl id="book_culture" class="book_none">
                    <dt><img src="images/dd_culture_1.jpg" alt="history"/></dt>
                    <dd><font class="book_title">嘿，我知道你</font><br />
                
                <dl id="book_novel" class="book_none">
             </div>
   1. /*最新上架版块TAB切换效果*/
     var bookCate=new Array();
     bookCate[0]="book_history";
     bookCate[1]="book_family";
     bookCate[2]="book_culture";
     bookCate[3]="book_novel";
     var bookClass=new Array();
     bookClass[0]="history";
     bookClass[1]="family";
     bookClass[2]="culture";
     bookClass[3]="novel";
function bookPutUp(elementId){
   for(var i=0;i<bookCate.length;i++){
       if(elementId==i){
           document.getElementById(bookCate[i]).className="book_show";
           document.getElementById(bookClass[i]).className="book_type_out";

           }
          else{
           document.getElementById(bookCate[i]).className="book_none";
           document.getElementById(bookClass[i]).className="book_type";
              }
       }
   }
   2.   /*循环显示的轮换横幅广告*/
/*循环显示的图片地址*/
     var scorll_img=new Array();
     scorll_img[0]="images/dd_scroll_1.jpg";
     scorll_img[1]="images/dd_scroll_2.jpg";
     scorll_img[2]="images/dd_scroll_3.jpg";
     scorll_img[3]="images/dd_scroll_4.jpg";
     scorll_img[4]="images/dd_scroll_5.jpg";
     scorll_img[5]="images/dd_scroll_6.jpg";
   /*按钮的ID编号*/
   var scroll_number=new Array();
   scroll_number[0]="scroll_number_1";
   scroll_number[1]="scroll_number_2";
   scroll_number[2]="scroll_number_3";
   scroll_number[3]="scroll_number_4";
   scroll_number[4]="scroll_number_5";
   scroll_number[5]="scroll_number_6";
   var NowFrame = 1;   //最先显示第一张图片
     var MaxFrame = 6;   //一共六张图片
function loopShow(d1){
    if(Number(d1)){
       NowFrame=d1;                //设当前显示图片
       }
   for(var i=1;i<(MaxFrame+1);i++){
       if(i==NowFrame){
           document.getElementById("dd_scroll").src =scorll_img[i-1];   //显示当前图片
           document.getElementById(scroll_number[i-1]).className="scroll_number_over";    //设置当前按钮的CSS样式
         }
       else{
       document.getElementById(scroll_number[i-1]).className="scroll_number_out";
       }
   }
   if(NowFrame == MaxFrame){   //设置下一个显示的图片
       NowFrame = 1;
       }
   else{
       NowFrame++;
       }
//var theTimer=setTimeout('loopShow()', 3000);   //设置定时器，显示下一张图片
}
var theTimer=setInterval('loopShow()', 3000);   //设置定时器，显示下一张图片
//window.onload=loopShow;

3. /*书讯快递循环垂直向上滚动的文字特效*/
   var dome=$("dome");
   var dome1=$("dome1");
   var dome2=$("dome2");
   var speed=50; //设置向上滚动速度
   dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
   //保证这任意一个盒子都正好“装满”外层盒子
   dome1.style.height = dome.offsetHeight + "px";
   dome2.style.height = dome.offsetHeight + "px";
   function moveTop(){
       //offsetTop: 一个对象举例页面或其父对象的顶部距离
       //offsetHeight: 一个对象的实际高度
       //scrollTop: 一个对象的向上滚动的距离
       //当外层盒子向上滚动的距离大于等于第一个盒子的高度的时候就回到初始状态
       //即刚刚将第一个盒子滚出demo的上边界，就又将其恢复到最初状态
       if(dome.scrollTop > dome1.offsetHeight)
           dome.scrollTop   = 0;
       else{
           dome.scrollTop++;
       }
       //$("tmpmsg").innerHTML = dome2.offsetTop+"," + dome.scrollTop + dome1.offsetParent.tagName;
   }
   var MyMar=setInterval(moveTop,speed) //设置定时器
   dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
   dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)}//鼠标移开时重设定时器，继续滚动

<a href="javascript:deleteProduct('shoppingProduct_05')" class="blue">删除</a>搞懂
在js中拿到html标签对象后怎么处置呢？其实就是给html标签对象加属性或加样式，给节点或属性增删改查，还可以在js函数中写js的一些判断语句循环语句等和写一些Bom对象和Dom对象的属性和方法

0 0