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对象的属性和方法


相关文章推荐

php生成驗證碼,JS驗證加html代碼

測過,能用。 js部份: function newcode(){ var img_obj = document.getElementById('imgcode'); img_ob...

js金额数字格式化实现代码(三位加逗号处理保留两位置小数)

工作中很常用的东西: 例1,使数字1111111变成11,111,111.00,保留两位小数。 html> head> script type="text/javascript"> f...

解决js代码中加入alert()就成功执行,不加就不对的问题!

因为return false的作用域在each循环中,它只起到了结束当前循环的作用,相当于break,并没有返回任何类型的值 转众多网友意见 问题:          我是做一个...

网页天幕代码!从css、html到js的完美实现(自执行函数加原型的完美应用)!!

天幕代码!完整干货!已封装好一切!

JS 代码中到底加不加分号

背景在写自动执行函数时vm.$watch('datas', function() { console.log(vm.datas); }) (function () { console....

总结AJAX相关JS代码片段和浏览器模型

在.net开发中,充分利用免费控件是好事情,但是如果不能修改控件达到自己的需求,就要动用JS大法了,前提是研究好浏览器模型 的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身...

html通过native.js调用原生android API代码段总结

关于这部分DCloud官网也有代码示例,在这里这里就把我自己写好的总结一下:#####调用Android SharePreference数据 /** * 在通过NJS获...
  • lhg_55
  • lhg_55
  • 2016年12月19日 14:56
  • 272

window.close(); 关闭浏览器窗口js代码的分析总结

序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome, safari Opera Close ...
  • celte
  • celte
  • 2012年11月30日 16:37
  • 609

总结几个实用的js/jq代码片段

前言:众所周知,前端页面的动画效果的实现一般都是由js/jq实现的(现在css3也可以实现很多很酷炫的页面特效,但是由于浏览器的兼容性问题,运用还不算太广泛,这里先不说css3对于实现页面特效的便利。...

总结【代码重构】:Backbone.js做一个点击链接,跳过加载图片后即可跳转到效果图片的例子

因为要遵循KISS(Keep It Simple Stupid)原则,尽可能使事情简单 把应用拆分成多个文件,每个包含下面一种类型:(1)视图(2)模板(3)路由器(4)集合(5)模型 此文是对《Ba...
  • Miss_LL
  • Miss_LL
  • 2016年12月01日 15:56
  • 598
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js代码加总结
举报原因:
原因补充:

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