Fatal编程技术网

如何移动Javascript函数

javascript html

如何移动Javascript函数,javascript,html,Javascript,Html,使用Highcharts，我成功地获得了两个显示随机数据的基本仪表。 这取决于我的主代码中的一大块javascript函数。它还使用另一个函数生成随机结果。我想把它移到一个外部文件，我该怎么做 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <scr

使用Highcharts，我成功地获得了两个显示随机数据的基本仪表。 这取决于我的主代码中的一大块javascript函数。它还使用另一个函数生成随机结果。我想把它移到一个外部文件，我该怎么做

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>

        <link rel="stylesheet" type="text/css" href="styles/result-light.css">
        <style type="text/css"></style>

        <title>2 gauge</title>

    <!--  start of .js-->
        <script type="text/javascript">
        $(window).load(function(){
            $(function() {
            $('#chart-A').highcharts({
                    chart: {
                        type: 'gauge',
                    },
                    title: {
                        text: 'Gauge1'
                    },
                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                    },
                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 200,
                    },
                    series: [{
                        data: [1]
                    }]
                },
                // Add some life
                function(chart) {
                    if (!chart.renderer.forExport) {
                        setInterval(function() {
                            var point = chart.series[0].points[0],
                                newVal,
                                inc = Math.round((Math.random() - 0.5) * 20);

                            newVal = point.y + inc;
                            if (newVal < 0 || newVal > 200) {
                                newVal = point.y - inc;
                            }

                            point.update(newVal);

                        }, 3000);
                    }
                });


            $('#chart-B').highcharts({
                    chart: {
                        type: 'gauge',
                    },
                    title: {
                        text: 'Gauge2'
                    },
                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                    },
                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,
                    },
                    series: [{
                        data: [1]
                    }]
                },
                // Add some life
                function(chart) {
                    if (!chart.renderer.forExport) {
                        setInterval(function() {
                            var point = chart.series[0].points[0], 
                                    newVal, 
                                    inc = Math.round((Math.random() - 0.5) * 20);
                                newVal = point.y + inc;

                            if (newVal < 0 || newVal > 100) {
                                newVal = point.y - inc;
                            }
                                point.update(newVal);
                            }, 500);
                        }
                    });
                });
        });

        </script>
    <!--  end of .js-->

    </head>
    <header>
        <div class="row">
            <div class="col">
                Couple of random guages
            </div>
        </div>
    </header>
    <body>
        <div class="row">
            <div class="col">
                <div id="chart-A" class="chart"></div>
                <div id="chart-B" class="chart"></div>
            </div>
        </div>
    </body>
</html>
正如你所看到的，它占用了大量的空间，并且重复了两次，它使用了一个我想分离出来的进一步的函数

您的Simon M.

将js代码移动到外部文件myjscode.js中

并将其导入html：

<script src="myjscode.js"></script>
简短回答：在.js文件中定义函数，然后使用脚本标记将它们导入html

<script src="/js/myFile.js"></script>
但是，如果您的应用程序增长，这将不是一件容易的事情。因此，您可以使用React、Vue或Angular等前端框架

或者你可以使用最现代的方法，网络组件。这样的话，输出就不会过度了。您可以使用Polymer框架构建网络组件

webcomponents的强大之处在于，您可以在任何地方使用它们，而不管框架是什么，一旦实现。

无论是Pubudu和Sebastien都是正确答案，我发现Dreamweaver可以为您做到这一点

工具-外部化JavaScript

您的Simon M.

我刚刚将/in之间的所有代码剪切并粘贴到一个名为myjscode.js的新文件中？然后在没有任何修改的情况下调用它？要使用随机数位，我可以在新的.js中执行相同的操作，只需使用到之间的代码。不熟悉你正在使用的highcharts库，但如果一切正常，它将与ChangesHankyu Pubudu一起工作，你所描述的远远超出我的理解，我仍然在JS的第一页！