设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为啥报错啊，如何解决？这变量定义哪里除了问题啊
返回列表 发新帖
查看: 2596|回复: 2

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

[复制链接]
小黄练编程
发表于 2022-4-17 18:35:25 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x 
<!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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-17 18:53:51 | 显示全部楼层
isdkz 发表于 2022-4-17 18:38

谢谢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 15:23

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表