GreenHand_zh 2020-02-19 13:29 采纳率: 0%
浏览 311
已采纳

前端横折线框怎么实现

图片说明
大约就是这样

  • 写回答

1条回答 默认 最新

  • Civitasv 2020-02-19 21:09
    关注

    使用hr标签实现了一下，使用Vue实现的，当然如果想换成jquery也很简单，只需要把我代码中的@click事件用jquery替换一下就可以了

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        hr {
            border: none;
            border-top: 3px solid black;
        }

        #xie,
        #heng {
            float: right;
        }

        #graph {
            float: left;
        }
    </style>
</head>

<body>
    <div id="graph">
        length: <input type="text" v-model="len"> px<br>
        degree: <input type="text" v-model="degree"><br>
        <input type="button" value="绘制" @click="setVal"><br>
        <hr id="xie" :style="xieStyle">
        <hr id="heng" :style="hengStyle">
        <input type="text">
    </div>

    <script>
        var vm = new Vue({
            el: "#graph",
            data: {
                degree: "",
                len: "",
                xieStyle: {
                    "width": "",
                    "transform": ""
                },
                hengStyle: {
                    "width": ""
                }
            },
            methods: {
                setVal() {
                    this.xieStyle["width"] = this.len + "px";
                    this.hengStyle["width"] = this.len + "px";

                    var offsetH = this.len / 2 * Math.sin(this.degree / 180 * Math.PI);
                    var offsetW = this.len / 2 - this.len / 2 * Math.cos(this.degree / 180 * Math.PI);
                    this.xieStyle["transform"] = "translate(" + -(offsetW + 1) + "px, " + offsetH + "px) rotate(" + this.degree + "deg)";
                }
            }
        })
    </script>
</body>

</html>

    复制就能运行了，看看能看懂吗，看不懂也可以给你写个jquery版本的
    点击绘制，就能根据选的参数绘制了，如图：
    图片说明
    改改样式就能很好看了

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

报告相同问题？

悬赏问题

  • ¥15 神经网络怎么把隐含层变量融合到损失函数中？
  • ¥30 自适应 LMS 算法实现 FIR 最佳维纳滤波器matlab方案
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥15 Python3.5 相关代码写作
  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动