小黄练编程 发表于 2022-4-17 18:35:25

为啥报错啊，如何解决？这变量定义哪里除了问题啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .topback{
      position:fixed;
      bottom:50%;
      right:0;
      background-color:green;
}
.topback .toppback {
      position:absolute;
      top:0;
      left:0;
      width:160px;
      height:50px;
    text-align:left;
      line-height:50px;
      background-color:green;
      z-index:-1;
}
.topback i{
      display:inline-block;
   width:50px;
         height:50px;
         text-align:center;
         line-height:50px;
         background-color:green;
         cursor:pointer;
}
.problem{
        border-top:1px solid gray;
        position:fixed;
        bottom:39.5%;
        right:0;
        background-color:green;
        color:gray;
        font-size:30px;
}
.problem .problemm{
        position:absolute;
        top:0;
        left:0;
        width:160px;
        height:50px;
    text-align:left;
        line-height:50px;
        background-color:green;
        z-index:-1;
}
.problem .jiantou{
        display:inline-block;
   width:50px;
       height:50px;
       text-align:center;
       line-height:50px;
       background-color:green;
       cursor:pointer;
}
    </style>
</head>
<body>
    <div class="topback">
      <span><a href="#"><i></i></a></span>
       <div class="toppback"><a href="#">返回顶部</a></div>
   </div>
   <div class="problem">
    <span class="jiantou">⬅<span>
   <div class="problemm">问题反馈</div>
</div>
   <script src="/js/index.js"></script>
    <script>
      function animate( obj, target, callback){
      clearInterval(obj.timer);
         obj.timer=setInterval(function(){
               var step=(target-obj.offsetLeft)/10;
               step=step>0?Math.ceil(step):Math.floor(step);
          if(obj.offsetLeft==target){
                        clearInterval(obj.timer);
                        if(callback){
                                  callback();
                        }
                  }
                  obj.style.left=obj.offsetLeft+step+'px';
      },30);
}
var topback=document.querySelector('.topback');
                   var toppback=document.querySelector('.toppback');
            topback.addEventListener('mouseenter',function(){
                                  animate(toppback,-65,function(){
                                          topback.addEventListener('mouseleave',function(){
                                                  animate(toppback,0);
                                          });
                                  });
                          });
                          var jiantou=querySelector('.jiantou');
                          var problem=querySelector('.problem');
                          var problemm=querySelector('.problemm');
                          problem.addEventListener('mouseenter',function(){
                                  animate(problemm,-65,function(){
                                          problem.addEventListener('mouseleave',function(){
                                                  animate(problemm,0);
                                          });
                                  });
                          });

    </script>
</body>
</html>

isdkz 发表于 2022-4-17 18:38:18

本帖最后由 isdkz 于 2022-4-17 18:40 编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .topback{
      position:fixed;
      bottom:50%;
      right:0;
      background-color:green;
}
.topback .toppback {
      position:absolute;
      top:0;
      left:0;
      width:160px;
      height:50px;
    text-align:left;
      line-height:50px;
      background-color:green;
      z-index:-1;
}
.topback i{
      display:inline-block;
   width:50px;
         height:50px;
         text-align:center;
         line-height:50px;
         background-color:green;
         cursor:pointer;
}
.problem{
      border-top:1px solid gray;
      position:fixed;
      bottom:39.5%;
      right:0;
      background-color:green;
      color:gray;
      font-size:30px;
}
.problem .problemm{
      position:absolute;
      top:0;
      left:0;
      width:160px;
      height:50px;
    text-align:left;
      line-height:50px;
      background-color:green;
      z-index:-1;
}
.problem .jiantou{
      display:inline-block;
   width:50px;
         height:50px;
         text-align:center;
         line-height:50px;
         background-color:green;
         cursor:pointer;
}
    </style>
</head>
<body>
    <div class="topback">
      <span><a href="#"><i></i></a></span>
       <div class="toppback"><a href="#">返回顶部</a></div>
   </div>
   <div class="problem">
    <span class="jiantou">⬅<span>
   <div class="problemm">问题反馈</div>
</div>
   <script src="./js/index.js"></script>                                                <!-- 这里使用相对路径 -->
    <script>
      function animate( obj, target, callback){
      clearInterval(obj.timer);
         obj.timer=setInterval(function(){
               var step=(target-obj.offsetLeft)/10;
               step=step>0?Math.ceil(step):Math.floor(step);
          if(obj.offsetLeft==target){
                        clearInterval(obj.timer);
                        if(callback){
                                  callback();
                        }
                  }
                  obj.style.left=obj.offsetLeft+step+'px';
      },30);
}
var topback=document.querySelector('.topback');
                   var toppback=document.querySelector('.toppback');
            topback.addEventListener('mouseenter',function(){
                                  animate(toppback,-65,function(){
                                          topback.addEventListener('mouseleave',function(){
                                                animate(toppback,0);
                                          });
                                  });
                        });
                        var jiantou=document.querySelector('.jiantou');                     // 这里少了 document.
                        var problem=document.querySelector('.problem');                      // 这里少了 document.
                        var problemm=document.querySelector('.problemm');                      // 这里少了 document.
                        problem.addEventListener('mouseenter',function(){
                                  animate(problemm,-65,function(){
                                          problem.addEventListener('mouseleave',function(){
                                                animate(problemm,0);
                                          });
                                  });
                        });

    </script>
</body>
</html>

小黄练编程 发表于 2022-4-17 18:53:51

isdkz 发表于 2022-4-17 18:38


谢谢{:5_92:}
页: [1]
查看完整版本: 为啥报错啊，如何解决？这变量定义哪里除了问题啊