SuanFaKeChengSheJi
/
index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="app/styles/main.css">
    <link rel="stylesheet" href="app/styles/demo.css">
    <!-- endbuild -->
</head>

<body ng-app="tmpApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container">
        <br>
        <br>
        <br>
        <br>
        <div class="row">

            <div class="col-xs-6 col-xs-offset-0">
                <div class="carousel">
                    <h2>可行解</h2>
                    <br>
                  <br>
                  <br>


                    <figure>
                        <img src="./1.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./2.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./3.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./4.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./5.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./6.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./7.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./8.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./9.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./10.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./11.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./12.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./13.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./14.png" alt="已经浏览完全部可行解" class="img_st">
                        <img src="./15.png" alt="已经浏览完全部可行解" class="img_st">
                    </figure>
                    <br>
                    <br>
                    <nav>
                        <button class="nav prev">Prev</button>
                        <button class="nav next">Next</button>
                    </nav>
                </div>

            </div>
            <div class="col-xs-6">
                <div class="carousel">
                    <h2>最优解</h2>
                  <br>
                  <br>
                  <br>
                    <figure>
                        <img src="./FAST.png" alt="" class="img_st">
                    </figure>
                </div>

            </div>
        </div>
        <br>
        <br>
        <br>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
        ! function(A, n, g, u, l, a, r) {
            A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
                    (A[l].q = A[l].q || []).push(arguments)
                }, A[l].l = +new Date, a = n.createElement(g),
                r = n.getElementsByTagName(g)[0], a.src = u, r.parentNode.insertBefore(a, r)
        }(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-XXXXX-X');
        ga('send', 'pageview');
    </script>


    <!-- build:js({.tmp,app}) scripts/npm.js -->
    <script src="node_modules/angular/angular.js"></script>
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/bower.js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="app/scripts/app.js"></script>
    <script src="app/scripts/controllers/main.js"></script>
    <!-- endbuild -->
</body>

</html>

<script type="text/javascript">
    'use strict';

    window.addEventListener('load', function() {
        var carousels = document.querySelectorAll('.carousel');

        for (var i = 0; i < carousels.length; i++) {
            carousel(carousels[i]);
        }
    });

    function carousel(root) {
        var figure = root.querySelector('figure'),
            nav = root.querySelector('nav'),
            images = figure.children,
            n = images.length,
            gap = root.dataset.gap || 0,
            bfc = 'bfc' in root.dataset,
            theta = 2 * Math.PI / n,
            currImage = 0;

        setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
        window.addEventListener('resize', function() {
            setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
        });

        setupNavigation();

        function setupCarousel(n, s) {
            var apothem = s / (2 * Math.tan(Math.PI / n));

            figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

            for (var i = 0; i < n; i++) {
                images[i].style.padding = gap + 'px';
            }
            for (i = 1; i < n; i++) {
                images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
                images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
            }
            if (bfc)
                for (i = 0; i < n; i++) {
                    images[i].style.backfaceVisibility = 'hidden';
                }
            rotateCarousel(currImage);
        }

        function setupNavigation() {
            nav.addEventListener('click', onClick, true);

            function onClick(e) {
                e.stopPropagation();

                var t = e.target;
                if (t.tagName.toUpperCase() != 'BUTTON') return;

                if (t.classList.contains('next')) {
                    currImage++;
                } else {
                    currImage--;
                }

                rotateCarousel(currImage);
            }
        }

        function rotateCarousel(imageIndex) {
            figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
        }
    }

</script>

<script type="text/javascript">
    window.onload = function() {
        /**
         * 上传函数
         * @param fileInput DOM对象
         * @param callback 回调函数
         */
        var getFileContent = function(fileInput, callback) {
            if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
                //下面这一句相当于JQuery的：var file =$("#upload").prop('files')[0];
                var file = fileInput.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.onloadend = function(evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            callback(evt.target.result);
                        }
                    };
                    // 包含中文内容用gbk编码
                    reader.readAsText(file, 'gbk');
                }
            }
        };

        /**
         * upload内容变化时载入内容
         */
        document.getElementById('data_input').onchange = function() {
            var content = document.getElementById('input');


            getFileContent(this, function(str) {
                content.value = str;
            });
        };


        /**
         * upload内容变化时载入内容
         */
        document.getElementById('upload').onchange = function() {
            var content = document.getElementById('content');

            getFileContent(this, function(str) {
                content.value = str;
            });
        };
    };

</script>