0

我将http://jsfiddle.net/48Hpa/19/相同的代码放入 HTML，但我得到不同的结果...................... ..................................................... ..................................................... ...................................... 这是为什么？

在此处输入图像描述

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <link type="text/css" rel="stylesheet" href="style.css" />
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

    <script>

        $(document).ready(function () {

            $(function () {
                $("#slider1").slider({
                    range: "min",
                    value: 36,
                    min: 12,
                    max: 36,
                    slide: function (event, ui) {
                        $(".amount1").val(ui.value);
                        writesum();
                    }
                });
                $(".amount1").val($("#slider1").slider("value"));
            });

            $(function () {
                $("#slider2").slider({
                    range: "min",
                    value: 50000,
                    min: 1,
                    max: 50000,
                    slide: function (event, ui) {
                        $(".amount2").val(ui.value);
                        writesum();
                    }
                });
                $(".amount2").val($("#slider2").slider("value"));
            });


            function writesum() {
                var months = $('.amount1').val();
                var credits = $('.amount2').val();
                var payment = parseFloat(Number(credits) / Number(months))
                var rounded = payment.toFixed(2);
                $('.amount3').val(rounded);
            }

        });

    </script>

</head>
<body>
     <input type="text" class="amount1" />

        <div class="container">
            <div id="slider1"></div>
        </div>

        <input type="text" class="amount2" />

        <div class="container">
            <div id="slider2"></div>
        </div>

        <div class="sonuccontainer">
            <div class="bilgilendirme">aylık ödeme miktarınız</div>
            <input type="text" class="amount3" />
        </div>
</body>
</html>
4

1 回答 1

1

JsFiddle 使用 CSS 重置文件来重置所有浏览器的默认样式。这可能是原因。

但蓝色来自您的风格定义：

.ui-slider .ui-slider-handle { outline-color: transparent; background: blue; position: absolute; top: -8px; left: -8px; z-index: 2;  border-radius: 70px;  width: 30px; height:30px; cursor: pointer; }

如果它没有显示在您的页面上，则意味着您的页面有问题或样式被覆盖。

查看您的 html，jQuery Ui 的 CSS 是在您的本地 CSS 之后加载的，因此它的样式会覆盖您的styles.cssSwitch 并放在styles.css最后。

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="style.css" />
于 2013-09-15T23:49:03.757 回答