冷心63 2022-12-11 03:20 采纳率: 100%
浏览 31
已结题

javascript一场报错求解决

问题遇到的
为什么我的代码会出现错误,他老是报错第8行代码有错误,
就是这一行
class CarouselPoint{


```现象和发生背景 

###### 遇到的现象和发生背景,请写出第一个错误信息

###### 用代码块功能
```javascript
/*
 * Author: Nokey
 * Date: 2016/12/06
 * Dependencies: jQuery, Tween.js
 */
'use strict';

 class CarouselPoint{
  constructor(initState){
    var _me = this;
    // jQuery DOM
    this.dom = initState.dom;
    
    // TranslateX
    this.x = 0;
    
    // Scale()
    this.s = 0;
    
    // z-index
    this.z = 0;
    
    // 获取父组件属性
    this.A = initState.A;
    this.S = initState.S;
    this.Z = initState.Z;
    
    // 当前的总弧度
    this.rad = initState.rad;
    
    // 动画器
    this.tween = new TWEEN.Tween(_me)
                          .onStart(()=>{
                            _me.start();
                          })
                          .onUpdate(()=>{
                            _me.setState();
                          })
                          .onComplete(()=>{
                            _me.complete();
                          });
    
    // 动画时间
    this.time = initState.time;
  }
  
  setState(){ // theta 是每次增加或减少的弧度值
    // this.rad += theta;
    var _me = this;
    _me.x = _me.A * _me.checkMinNum(Math.cos(_me.rad));
    _me.s = _me.S * Math.sin(_me.rad) + 1;
    _me.z = parseInt(_me.Z * ((1 + _me.checkMinNum(Math.sin(_me.rad))) / 2));
    // Render
    _me.render();
    
    return _me;
  }
  
  checkMinNum(n){
    if(Math.abs(n) < 0.001){
      return 0;
    }
    return Math.floor(n * 1000) / 1000;
  }
  
  start(){
    console.log('This image Tween Start...');
    // 动画开始前取消 Focus 状态
    this.dom.removeClass('focus-3d');
  }
  
  complete(){
    console.log('This image Tween Complete...');
    // 检查当前元素是否在 Focus 位置
    if(this.x === 0 && this.z === this.Z){
      this.dom.addClass('focus-3d');
    }
  }
  
  animate(theta){
    var _me = this;
    _me.tween.stop().to({rad: _me.rad + theta}, _me.time).start();
  }
  
  render(){
    var _me = this;
    _me.dom.css({
      'z-index': _me.z,
      '-webkit-transform': 'scale('+_me.s+') translate('+_me.x+'px,0)',
      '-ms-transform': 'scale('+_me.s+') translate('+_me.x+'px,0)',
      'transform': 'scale('+_me.s+') translate('+_me.x+'px,0)'
    });
  }
}


class Carousel3D{
  constructor(initState){
    // a: 椭圆长轴;b: 椭圆短轴
    this.a = initState.a;
    this.b = initState.b;
    
    // DOM数组元素
    this.doms = initState.doms;
    
    // CarouselPoint 对象数组 [Array]
    this.CPs = [];
    
    // CarouselPoint 数量
    this.num = initState.doms.length;
    
    // 缩放可变范围 [Number] 1 ± s
    this.scaleDelta = initState.scaleDelta;
    
    // z-index 可变范围 [Number]
    this.zIndexMax = initState.zIndexMax;
    
    // 每个点相差的弧度
    this.deltaRad = Math.PI * 2 / this.num;
    
    // 动画时间
    this.time = initState.time;
    
    // 动画控制标志
    this.moving = false;
  }
  
  // 初始化控件
  init(){
    if(this.num < 1){
      throw 'There is no element to show!';
    }else{
      var _me = this;
      
      _me.doms.each((i, e)=>{
        var $e = $(e),
            o = new CarouselPoint({
              dom: $e,
              rad: (Math.PI / 2) + (_me.deltaRad * i),
              time: _me.time,
              A: _me.a,
              S: _me.scaleDelta,
              Z: _me.zIndexMax
            });
        _me.CPs.push(o);
        
        // 初始化 Focus
        i === 0 && $e.addClass('focus-3d');
        
        // 将dom映射到GP对象
        $e.data('gpnum', i);
        
        // 给每个dom绑定click事件
        $e.click((e)=>{
          // console.log($(e.target));
          // 确定要旋转的弧度
          var i = $(e.target).data('gpnum'),
              theta = _me.getNextTheta(i);

          // 开始 tween
          _me.animate(theta);
        });
      });
      
      _me.render();
      
      return _me;
    }
  }
  
  // 动画
  animate(theta){
    this.CPs.forEach((e)=>{
      e.animate(theta);
    });
  }
  
  // 获取即将变化的theta
  getNextTheta(i){
    var currentGP = this.CPs[i],
        diff_theta = (currentGP.rad % (Math.PI * 2)) - (Math.PI / 2),
        temp_theta = Math.abs(diff_theta) - Math.PI,
        next_theta;
    
    if(temp_theta >= 0){
      if(diff_theta >= 0){
        next_theta = Math.PI - temp_theta;
      }else{
        next_theta = -1*(Math.PI - temp_theta);
      }
    }else{
      next_theta = -1*diff_theta;
    }
    
    return next_theta;
  }
  
  // 初始化渲染每个点
  render(){
    if(this.num < 1){
      throw 'There is no element to update!';
    }else{
      this.CPs.forEach((e, i)=>{
        e.setState();
      });
      
      return this;
    }
  }
}

var C3D = new Carousel3D({
  a: 200,
  b: 20,
  doms: $('.carousel-item'),
  scaleDelta: 0.15,
  zIndexMax: 100,
  time: 500
}).init();

animate();

function animate() {
    requestAnimationFrame(animate);
  
    // Tween FPS
    TWEEN.update();
}


```插入代码,请勿粘贴截图。 不用代码块回答率下降 50%

运行结果及详细报错内容
我的解答思路和尝试过的方法,不写自己思路的,回答率下降 60%
我想要达到的结果,如果你需要快速回答,请尝试 “付费悬赏”
  • 写回答

1条回答 默认 最新

  • 谷雨睡不醒 2022-12-11 18:45
    关注

    如果就是class可能是不支持es6 class关键字,但是只是猜测
    建议把报错的环境和报错的内容贴一下,

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月20日
  • 已采纳回答 12月12日
  • 创建了问题 12月11日

悬赏问题

  • ¥15 关于#vscode#的问题:ESP32开发板对接MQTT实现小灯泡的开关
  • ¥15 TMC2209串口模式下读取不到寄存器的值串口助手蓝色字体是发过去的消息,绿色字体是收到的消息,第二行发送读取寄存器的指令但是没有读取到寄存器的值串口助手如下图:接线如下图,如何解决?
  • ¥15 高通安卓11提取完整线刷包软件,或者优博讯dt50顺丰刷机包
  • ¥20 C,有个译码器,换了信道就跑不出原来数据
  • ¥15 MIMIC数据库安装问题
  • ¥60 基于JTag协议开发Fpga下载器上位机,哪位大🐂有偿指导?
  • ¥20 全书网Java爬取数据
  • ¥15 怎么获取红包封面的原始链接,并且获取红包封面序列号
  • ¥100 微信小程序跑脚本授权的问题
  • ¥100 房产抖音小程序苹果搜不到安卓可以付费悬赏