这个上滑过程中好像定时器冲突了，怎么解决

Question

这个上滑过程中好像定时器冲突了，怎么解决

小白求大神带

511613

发布于
2016-07-30

hsfzxjy

22k51941

更新于
2016-07-30

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>select</title>
  <style>
        *{
          margin:0;
          padding:0;
        }
        li{
          list-style: none;
        }
        a{
          text-decoration: none;
          display: block;
          line-height: 30px;
          padding-left: 10px;
          color:#333;
        }
        a:hover{
          background: #ccc
        }
        #contain{
          width:200px;
          margin:100px auto;
        }
        cite{
          width:188px;
          height: 30px;
          border:1px solid #888;
          padding-left: 10px;
          line-height: 30px;
          position: relative;
          cursor:pointer;
          font-style: normal;
          display: block;
        }
        cite:before{
          content:'';
          position:absolute;
          width: 0;
          height:0;
          border-width: 5px;
          border-style:solid;
          border-color:#888 #fff #fff #fff;
          right:10px;
          top:15px;
          transition: 0.2s;
          transform-origin:50% 25%;
        }
        #select_body{
            width:200px;
            height:151px;
            position:relative;
            overflow: hidden;
        }
        ul{
            width:198px;
            border:1px solid #888;
            border-top: 0;
            position:absolute;
            top:-151px;
        }
        .extended:before{
            transform:rotate(180deg);
        }
  </style>

  <script>
      window.onload=function(){
          var oHead=document.getElementsByTagName('cite')[0];;
          var oUl=document.getElementsByTagName('ul')[0];
          var aLi=document.getElementsByTagName('li');
          var flag=0;
          oHead.onclick=function(){

              flag=flag+1;
              if(flag%2!=0){
                return slideDown(); 

              }
              else{
                return slideUp();

              } 
          }
          
      }
      function slideDown(){
          var oHead=document.getElementsByTagName('cite')[0];;
          var oUl=document.getElementsByTagName('ul')[0];
          addClass(oHead,"extended");
          startMove(oUl,{top:0});
      }

      function slideUp(){
          var oHead=document.getElementsByTagName('cite')[0];;
          var oUl=document.getElementsByTagName('ul')[0];
          removeClass(oHead,"extended");
          startMove(oUl,{top:-151});
      }

      function hasClass(obj,cls){
        return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
      }

      function addClass(obj,cls){
        if(!hasClass(obj,cls)){
          obj.className+=" "+cls;
        }
      }

      function removeClass(obj,cls){
        if(hasClass(obj,cls)){
          obj.className=obj.className.replace(new RegExp("(\\s|^)"+cls+"(\\s|$)")," ");
        }
      }

      function getStyle(obj,attr){
          if(obj.currentStyle){
            return  obj.currentStyle[attr];
          }
          else{
            return  getComputedStyle(obj,false)[attr];
          }
      }

      function startMove(obj,json,fn){
        clearInterval(obj.timer);
        obj.temer=setInterval(function(){
              var bStop=true;
              for(var attr in json){
                 var cur=0;
                 if(attr=='opacity'){
                  cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                 }
                 else{
                  cur=parseInt(getStyle(obj,attr));
                 }
                 var speed=(json[attr]-cur)/8;
                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
                 if(cur!=json[attr]){
                      bStop=false;
                 }
                 if(attr=='opacity'){
                      obj.style.filter="alpha(opacity:'+cur+peed+')";
                      obj.style.opacity=(cur+speed)/100;
                 }
                 else{
                    obj.style[attr]=cur+speed+'px';
                 }
              }
              if(bStop){
                clearInterval(obj.timer);
                if(fn){
                  return fn();
                }
              }
        },30)
      }
  </script>
</head>
<body>
<div id="contain">
      <cite>请选择课程</cite>
      <div id="select_body">
            <ul>
                  <li><a href="##" class="select1">PHP</a></li>
                  <li><a href="##" class="select2">JAVA</a></li>
                  <li><a href="##" class="select3">HTML</a></li>
                  <li><a href="##" class="select4">CSS</a></li>
                  <li><a href="##" class="select5">JavaScript</a></li>
            </ul>
      </div>
</div>

</body>
</html>

javascript css html

阅读 2k

1 个回答

得票最新

hsfzxjy

22k51941

发布于
2016-07-30

✓ 已被采纳

看的我好辛苦。。。

startMove 第二行： obj.temer -> obj.timer

撰写回答