js代码加总结

原创 2016年05月30日 21:09:26
一.  给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循环给所有标签和所有内容设置好类样式,设置好的类样式是所有标签和内容是同一种样式(也就是状态都一样),下面在设置当前鼠标放上去的标签样式和对应得内容样式
            <!--最新上架开始--
                <div class="book_type" id="history"   onmouseover="bookPutUp(0)">历史</div>
                <div class="book_type" id="family" onmouseover="bookPutUp(1)">家教</div>
                <div class="book_type" id="culture" onmouseover="bookPutUp(2)">文化</div>
                <div class="book_type" id="novel" onmouseover="bookPutUp(3)">小说</div>
                       <div class="book_class" style="height:250px;">
                <!--历史-->
                <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对象的属性和方法


JavaScript 实例:书讯快递(循环滚动)(offsetHeight,scrollTop)

滚动 /*全局样式*/ body,ul,li{margin:0px;padding:0px;} ul,li{list-style:none;} body{font-size:12px;} #dome...
  • houyanhua1
  • houyanhua1
  • 2017年11月09日 22:04
  • 120

js代码总结

 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.src...
  • quxiuer
  • quxiuer
  • 2009年02月01日 10:20
  • 504

js代码总结

  事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.sr...
  • SmartTony
  • SmartTony
  • 2009年02月01日 22:21
  • 957

数字加千位符JS代码

function cc(svlue){ var str=svlue.toString(); var length=str.length,a=(length - 1)/3,m=length%3,...
  • sjerry_9
  • sjerry_9
  • 2013年12月03日 10:14
  • 1543

转--js代码放在head还是body里面

在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 一、区别 浏览器解析ht...
  • cktmyh
  • cktmyh
  • 2016年10月02日 20:52
  • 2367

java使用Qrcode生成二维码(内嵌logo)

1、前言 整理一个使用qrcode.jar生成二维码的测试方法,以备后面学习使用。 2、使用准备Qrcode.jar3、demo /* 生成二维码 */ @R...
  • static_coder
  • static_coder
  • 2018年01月04日 16:45
  • 103

常用js代码总结

验证:失去焦点弹出对话框value=========================================================== ---------------------...
  • lixiao1048
  • lixiao1048
  • 2016年06月23日 14:52
  • 148

在网页两旁插入对联图片广告的js代码

var showad = true;var Toppx = 60;   //上端位置var AdDivW = 100;  //宽度var AdDivH = 360;  //高度var PageWidt...
  • csdlrj
  • csdlrj
  • 2007年11月23日 15:50
  • 1696

API 开发的心得总结

最近开发公司SDK的支付API。对API有有一点点心得,记录下来。 一、数据安全1.通信协议 尽量使用HTTPS2.签名加签 使用双方约定的算法,发送方对数据进行加签,相应的接受方需...
  • xiojing825
  • xiojing825
  • 2017年05月27日 19:44
  • 113

动易网站某些通用标签

动易网站通用标签     网站通用标签适用于整个网站,可在网站所有的版式模板页面中进行调用。以下将详细说明各标签的作用:标签名:{$PageTitle}作 用:显示浏览器的标题栏显示页面的标题信息标签...
  • kof98cs
  • kof98cs
  • 2008年01月24日 17:23
  • 871
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js代码加总结
举报原因:
原因补充:

(最多只允许输入30个字)