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

鱼C论坛

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

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

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

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

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

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .topback{
  10.         position:fixed;
  11.         bottom:50%;
  12.         right:0;
  13.         background-color:green;
  14. }
  15. .topback .toppback {
  16.         position:absolute;
  17.         top:0;
  18.         left:0;
  19.         width:160px;
  20.         height:50px;
  21.     text-align:left;
  22.         line-height:50px;
  23.         background-color:green;
  24.         z-index:-1;
  25. }
  26. .topback i{
  27.         display:inline-block;
  28.      width:50px;
  29.          height:50px;
  30.          text-align:center;
  31.          line-height:50px;
  32.          background-color:green;
  33.          cursor:pointer;
  34. }
  35. .problem{
  36.         border-top:1px solid gray;
  37.         position:fixed;
  38.         bottom:39.5%;
  39.         right:0;
  40.         background-color:green;
  41.         color:gray;
  42.         font-size:30px;
  43. }
  44. .problem .problemm{
  45.         position:absolute;
  46.         top:0;
  47.         left:0;
  48.         width:160px;
  49.         height:50px;
  50.     text-align:left;
  51.         line-height:50px;
  52.         background-color:green;
  53.         z-index:-1;
  54. }
  55. .problem .jiantou{
  56.         display:inline-block;
  57.      width:50px;
  58.          height:50px;
  59.          text-align:center;
  60.          line-height:50px;
  61.          background-color:green;
  62.          cursor:pointer;
  63. }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="topback">
  68.         <span><a href="#"><i>&#59941;</i></a></span>
  69.        <div class="toppback"><a href="#">返回顶部</a></div>
  70.    </div>
  71.    <div class="problem">
  72.     <span class="jiantou">&#11013;<span>
  73.    <div class="problemm">问题反馈</div>
  74. </div>
  75.    <script src="/js/index.js"></script>
  76.     <script>
  77.         function animate( obj, target, callback){
  78.         clearInterval(obj.timer);
  79.          obj.timer=setInterval(function(){
  80.                  var step=(target-obj.offsetLeft)/10;
  81.                  step=step>0?Math.ceil(step):Math.floor(step);
  82.           if(obj.offsetLeft==target){
  83.                           clearInterval(obj.timer);
  84.                           if(callback){
  85.                                   callback();
  86.                           }
  87.                   }
  88.                   obj.style.left=obj.offsetLeft+step+'px';
  89.         },30);
  90. }
  91. var topback=document.querySelector('.topback');
  92.                    var toppback=document.querySelector('.toppback');
  93.               topback.addEventListener('mouseenter',function(){
  94.                                   animate(toppback,-65,function(){
  95.                                           topback.addEventListener('mouseleave',function(){
  96.                                                   animate(toppback,0);
  97.                                           });
  98.                                   });
  99.                           });
  100.                           var jiantou=querySelector('.jiantou');
  101.                           var problem=querySelector('.problem');
  102.                           var problemm=querySelector('.problemm');
  103.                           problem.addEventListener('mouseenter',function(){
  104.                                   animate(problemm,-65,function(){
  105.                                           problem.addEventListener('mouseleave',function(){
  106.                                                   animate(problemm,0);
  107.                                           });
  108.                                   });
  109.                           });

  111.     </script>
  112. </body>
  113. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
isdkz
2022-4-17 18:38:18
本帖最后由 isdkz 于 2022-4-17 18:40 编辑

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .topback{
  10.         position:fixed;
  11.         bottom:50%;
  12.         right:0;
  13.         background-color:green;
  14. }
  15. .topback .toppback {
  16.         position:absolute;
  17.         top:0;
  18.         left:0;
  19.         width:160px;
  20.         height:50px;
  21.     text-align:left;
  22.         line-height:50px;
  23.         background-color:green;
  24.         z-index:-1;
  25. }
  26. .topback i{
  27.         display:inline-block;
  28.      width:50px;
  29.          height:50px;
  30.          text-align:center;
  31.          line-height:50px;
  32.          background-color:green;
  33.          cursor:pointer;
  34. }
  35. .problem{
  36.         border-top:1px solid gray;
  37.         position:fixed;
  38.         bottom:39.5%;
  39.         right:0;
  40.         background-color:green;
  41.         color:gray;
  42.         font-size:30px;
  43. }
  44. .problem .problemm{
  45.         position:absolute;
  46.         top:0;
  47.         left:0;
  48.         width:160px;
  49.         height:50px;
  50.     text-align:left;
  51.         line-height:50px;
  52.         background-color:green;
  53.         z-index:-1;
  54. }
  55. .problem .jiantou{
  56.         display:inline-block;
  57.      width:50px;
  58.          height:50px;
  59.          text-align:center;
  60.          line-height:50px;
  61.          background-color:green;
  62.          cursor:pointer;
  63. }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="topback">
  68.         <span><a href="#"><i>&#59941;</i></a></span>
  69.        <div class="toppback"><a href="#">返回顶部</a></div>
  70.    </div>
  71.    <div class="problem">
  72.     <span class="jiantou">&#11013;<span>
  73.    <div class="problemm">问题反馈</div>
  74. </div>
  75.    <script src="./js/index.js"></script>                                                <!-- 这里使用相对路径 -->
  76.     <script>
  77.         function animate( obj, target, callback){
  78.         clearInterval(obj.timer);
  79.          obj.timer=setInterval(function(){
  80.                  var step=(target-obj.offsetLeft)/10;
  81.                  step=step>0?Math.ceil(step):Math.floor(step);
  82.           if(obj.offsetLeft==target){
  83.                           clearInterval(obj.timer);
  84.                           if(callback){
  85.                                   callback();
  86.                           }
  87.                   }
  88.                   obj.style.left=obj.offsetLeft+step+'px';
  89.         },30);
  90. }
  91. var topback=document.querySelector('.topback');
  92.                    var toppback=document.querySelector('.toppback');
  93.               topback.addEventListener('mouseenter',function(){
  94.                                   animate(toppback,-65,function(){
  95.                                           topback.addEventListener('mouseleave',function(){
  96.                                                   animate(toppback,0);
  97.                                           });
  98.                                   });
  99.                           });
  100.                           var jiantou=document.querySelector('.jiantou');                       // 这里少了 document.
  101.                           var problem=document.querySelector('.problem');                      // 这里少了 document.
  102.                           var problemm=document.querySelector('.problemm');                      // 这里少了 document.
  103.                           problem.addEventListener('mouseenter',function(){
  104.                                   animate(problemm,-65,function(){
  105.                                           problem.addEventListener('mouseleave',function(){
  106.                                                   animate(problemm,0);
  107.                                           });
  108.                                   });
  109.                           });

  111.     </script>
  112. </body>
  113. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2022-4-17 18:38:18 | 显示全部楼层    本楼为最佳答案   
本帖最后由 isdkz 于 2022-4-17 18:40 编辑

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .topback{
  10.         position:fixed;
  11.         bottom:50%;
  12.         right:0;
  13.         background-color:green;
  14. }
  15. .topback .toppback {
  16.         position:absolute;
  17.         top:0;
  18.         left:0;
  19.         width:160px;
  20.         height:50px;
  21.     text-align:left;
  22.         line-height:50px;
  23.         background-color:green;
  24.         z-index:-1;
  25. }
  26. .topback i{
  27.         display:inline-block;
  28.      width:50px;
  29.          height:50px;
  30.          text-align:center;
  31.          line-height:50px;
  32.          background-color:green;
  33.          cursor:pointer;
  34. }
  35. .problem{
  36.         border-top:1px solid gray;
  37.         position:fixed;
  38.         bottom:39.5%;
  39.         right:0;
  40.         background-color:green;
  41.         color:gray;
  42.         font-size:30px;
  43. }
  44. .problem .problemm{
  45.         position:absolute;
  46.         top:0;
  47.         left:0;
  48.         width:160px;
  49.         height:50px;
  50.     text-align:left;
  51.         line-height:50px;
  52.         background-color:green;
  53.         z-index:-1;
  54. }
  55. .problem .jiantou{
  56.         display:inline-block;
  57.      width:50px;
  58.          height:50px;
  59.          text-align:center;
  60.          line-height:50px;
  61.          background-color:green;
  62.          cursor:pointer;
  63. }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="topback">
  68.         <span><a href="#"><i>&#59941;</i></a></span>
  69.        <div class="toppback"><a href="#">返回顶部</a></div>
  70.    </div>
  71.    <div class="problem">
  72.     <span class="jiantou">&#11013;<span>
  73.    <div class="problemm">问题反馈</div>
  74. </div>
  75.    <script src="./js/index.js"></script>                                                <!-- 这里使用相对路径 -->
  76.     <script>
  77.         function animate( obj, target, callback){
  78.         clearInterval(obj.timer);
  79.          obj.timer=setInterval(function(){
  80.                  var step=(target-obj.offsetLeft)/10;
  81.                  step=step>0?Math.ceil(step):Math.floor(step);
  82.           if(obj.offsetLeft==target){
  83.                           clearInterval(obj.timer);
  84.                           if(callback){
  85.                                   callback();
  86.                           }
  87.                   }
  88.                   obj.style.left=obj.offsetLeft+step+'px';
  89.         },30);
  90. }
  91. var topback=document.querySelector('.topback');
  92.                    var toppback=document.querySelector('.toppback');
  93.               topback.addEventListener('mouseenter',function(){
  94.                                   animate(toppback,-65,function(){
  95.                                           topback.addEventListener('mouseleave',function(){
  96.                                                   animate(toppback,0);
  97.                                           });
  98.                                   });
  99.                           });
  100.                           var jiantou=document.querySelector('.jiantou');                       // 这里少了 document.
  101.                           var problem=document.querySelector('.problem');                      // 这里少了 document.
  102.                           var problemm=document.querySelector('.problemm');                      // 这里少了 document.
  103.                           problem.addEventListener('mouseenter',function(){
  104.                                   animate(problemm,-65,function(){
  105.                                           problem.addEventListener('mouseleave',function(){
  106.                                                   animate(problemm,0);
  107.                                           });
  108.                                   });
  109.                           });

  111.     </script>
  112. </body>
  113. </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-4-29 00:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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