前端札记
Xin
2025-01-09
目录

剑网3换算器

# nPrepareFrames

吟唱时长计算
帧
秒
<template>
  <div>
    <div>吟唱时长计算</div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.frame" clearable>
            <i slot="suffix">帧</i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <i class="el-icon-d-arrow-right"></i>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.second" :disabled="true">
            <i slot="suffix">秒</i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="showText">
      <el-tag type="success" v-if="form.second">
        <span
          :key="new Date().getTime()"
          v-clipboard="`${form.second}秒`"
          v-clipboard:success="clipboardSuccessHandler"
          v-clipboard:error="clipboardErrorHandler"
        >
          {{ form.second }}秒
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
const genNew = () => ({
  frame: "", // 帧
  second: "", // 秒
});

export default {
  data() {
    return {
      form: genNew(),
    };
  },
  watch: {
    "form.frame": {
      handler(val) {
        if (val && !isNaN(val)) {
          this.form.second = val / 16;
        } else {
          this.form.second = "";
        }
      },
    },
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$message.success("已复制到剪贴板");
    },
    clipboardErrorHandler({ value, event }) {
      this.$message.error("复制失败，请长按绑定码手动复制!");
    },
  },
};
</script>
<style>
i {
  font-style: normal;
}
.el-form,
.container,
.showText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showText {
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
显示代码 复制代码

# nAngleRange

角度计算
°
<template>
  <div>
    <div>角度计算</div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.angleRange" clearable>
            <i slot="suffix"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <i class="el-icon-d-arrow-right"></i>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.angle" :disabled="true">
            <i slot="suffix">°</i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="showText">
      <el-tag type="success" v-if="form.angle">
        <span
          :key="new Date().getTime()"
          v-clipboard="`${form.angle}°`"
          v-clipboard:success="clipboardSuccessHandler"
          v-clipboard:error="clipboardErrorHandler"
        >
          {{ form.angle }}°
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
const genNew = () => ({
  angleRange: "", // 扇形角度范围
  angle: "", // °
});

export default {
  data() {
    return {
      form: genNew(),
    };
  },
  watch: {
    "form.angleRange": {
      handler(val) {
        if (val && !isNaN(val)) {
          this.form.angle = (360 / 256) * val;
        } else {
          this.form.angle = "";
        }
      },
    },
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$message.success("已复制到剪贴板");
    },
    clipboardErrorHandler({ value, event }) {
      this.$message.error("复制失败，请长按绑定码手动复制!");
    },
  },
};
</script>
<style>
i {
  font-style: normal;
}
.el-form,
.container,
.showText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showText {
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
显示代码 复制代码

# nTargetRayWidth

射击宽度
尺
<template>
  <div>
    <div>射击宽度</div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.targetRay" clearable>
            <i slot="suffix"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <i class="el-icon-d-arrow-right"></i>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.width" :disabled="true">
            <i slot="suffix">尺</i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="showText">
      <el-tag type="success" v-if="form.width">
        <span
          :key="new Date().getTime()"
          v-clipboard="`宽${form.width}尺`"
          v-clipboard:success="clipboardSuccessHandler"
          v-clipboard:error="clipboardErrorHandler"
        >
          宽{{ form.width }}尺
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
const genNew = () => ({
  targetRay: "",
  width: "", // 尺
});

export default {
  data() {
    return {
      form: genNew(),
    };
  },
  watch: {
    "form.targetRay": {
      handler(val) {
        if (val && !isNaN(val)) {
          this.form.width = val / 64;
        } else {
          this.form.width = "";
        }
      },
    },
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$message.success("已复制到剪贴板");
    },
    clipboardErrorHandler({ value, event }) {
      this.$message.error("复制失败，请长按绑定码手动复制!");
    },
  },
};
</script>
<style>
i {
  font-style: normal;
}
.el-form,
.container,
.showText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showText {
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
显示代码 复制代码

# nSpreadCircleVelocity

环每帧运动距离
尺
<template>
  <div>
    <div>环每帧运动距离</div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.num" clearable>
            <i slot="suffix"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <i class="el-icon-d-arrow-right"></i>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.width" :disabled="true">
            <i slot="suffix">尺</i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="showText">
      <el-tag type="success" v-if="form.width">
        <span
          :key="new Date().getTime()"
          v-clipboard="`${form.width}尺`"
          v-clipboard:success="clipboardSuccessHandler"
          v-clipboard:error="clipboardErrorHandler"
        >
          {{ form.width }}尺
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
const genNew = () => ({
  num: "",
  width: "", // 尺
});

export default {
  data() {
    return {
      form: genNew(),
    };
  },
  watch: {
    "form.num": {
      handler(val) {
        let newVal = 0;
        if (val.includes("*")) {
          newVal = val.split("*")[0] * val.split("*")[1];
        } else {
          newVal = val;
        }
        if (newVal && !isNaN(newVal)) {
          this.form.width = (newVal / 64).toFixed(2);
        } else {
          this.form.width = "";
        }
      },
    },
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$message.success("已复制到剪贴板");
    },
    clipboardErrorHandler({ value, event }) {
      this.$message.error("复制失败，请长按绑定码手动复制!");
    },
  },
};
</script>
<style>
i {
  font-style: normal;
}
.el-form,
.container,
.showText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showText {
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
显示代码 复制代码

# Buff 属性

%
<template>
  <div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.beginAttrib" clearable>
            <i slot="suffix"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <i class="el-icon-d-arrow-right"></i>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.percentage" :disabled="true">
            <i slot="suffix">%</i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="showText">
      <el-tag type="success" v-if="form.percentage">
        <span
          :key="new Date().getTime()"
          v-clipboard="
            `${form.percentage > 0 ? '增加' : '降低'}${form.percentage}%`
          "
          v-clipboard:success="clipboardSuccessHandler"
          v-clipboard:error="clipboardErrorHandler"
        >
          {{ form.percentage > 0 ? "增加" : "降低" }}{{ form.percentage }}%
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
const genNew = () => ({
  beginAttrib: "", // Buff属性
  percentage: "", // 百分比%
});

export default {
  data() {
    return {
      form: genNew(),
    };
  },
  watch: {
    "form.beginAttrib": {
      handler(val) {
        if (val && !isNaN(val)) {
          this.form.percentage = ((val / 1024) * 100).toFixed();
        } else {
          this.form.percentage = "";
        }
      },
    },
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$message.success("已复制到剪贴板");
    },
    clipboardErrorHandler({ value, event }) {
      this.$message.error("复制失败，请长按绑定码手动复制!");
    },
  },
};
</script>
<style>
i {
  font-style: normal;
}
.el-form,
.container,
.showText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showText {
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
显示代码 复制代码

# 拉拽距离

每帧移动点数
每秒移动距离/尺
<template>
  <div>
    <div class="container">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.pullNum" clearable>
            <i slot="suffix">每帧移动点数</i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <i class="el-icon-d-arrow-right"></i>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.distance" :disabled="true">
            <i slot="suffix">每秒移动距离/尺</i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="showText">
      <el-tag type="success" v-if="form.distance">
        <span
          :key="new Date().getTime()"
          v-clipboard="`每秒移动${form.distance}尺`"
          v-clipboard:success="clipboardSuccessHandler"
          v-clipboard:error="clipboardErrorHandler"
        >
          每秒移动{{ form.distance }}尺
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
const genNew = () => ({
  pullNum: "", // 每帧移动点数
  distance: "", // 每秒移动距离
});

export default {
  data() {
    return {
      form: genNew(),
    };
  },
  watch: {
    "form.pullNum": {
      handler(val) {
        if (val && !isNaN(val)) {
          // 13, -- 每帧移动点数，一秒16帧，64点为一米
          // 那么就是说16帧可以移动的距离为16*13 = 208
          // 208点/64点 = 3.25米 = 3.25尺
          // 每帧移动点数
          // 64 点为 1米 = 1尺
          // 当前1帧移动速度为form.pullNum距离
          this.form.distance = ((val * 16) / 64).toFixed(2);
        } else {
          this.form.distance = "";
        }
      },
    },
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$message.success("已复制到剪贴板");
    },
    clipboardErrorHandler({ value, event }) {
      this.$message.error("复制失败，请长按绑定码手动复制!");
    },
  },
};
</script>
<style>
i {
  font-style: normal;
}
.el-form,
.container,
.showText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.showText {
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
显示代码 复制代码
编辑 (opens new window)
上次更新: 2025-01-09 17:45:31
GitHub图床
其他

← 其他→

Theme by Vdoing | Copyright © 2021-2025