Javascript JSFIDLE相同的代码在html上显示不同的结果_Javascript_Jquery_Html_Css

Javascript JSFIDLE相同的代码在html上显示不同的结果

javascript jquery html css

Javascript JSFIDLE相同的代码在html上显示不同的结果,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我将相同的代码放入HTML，但得到的结果不同。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。为什么呢 <!DOCTYPE html> <html lang="en" xmlns="http://www

我将相同的代码放入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>


$（文档）.ready（函数（）{
$（函数（）{
$（“#滑块1”）.滑块({
射程：“分钟”，
价值：36，
民:12,，
最高：36，
幻灯片：功能（事件、用户界面）{
$（“.amount1”）.val（用户界面值）；
writesum（）；
}
});
$（“.amount1”）.val（$（“#slider1”）.slider（“值”）；
});
$（函数（）{
$（“#滑块2”）.滑块({
射程：“分钟”，
价值：50000，
民:1,，
最高：50000，
幻灯片：功能（事件、用户界面）{
$（“.amount2”）.val（用户界面值）；
writesum（）；
}
});
$（“.amount2”）.val（$（“#slider2”）.slider（“值”）；
});
函数writesum（）{
变量月份=$（'.amount1'）.val（）；
var credits=$（'.amount2'）.val（）；
var付款=浮动（数量（信用）/数量（月））
var四舍五入=固定付款（2）；
$（'.amount3'）.val（四舍五入）；
}
});
艾尔·科德梅·米克塔尔·恩茨

jsiddle使用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之后加载的，因此来自它的样式将覆盖您的

样式。CSS

切换它们，最后放入

样式。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" />

@codingfreak，我很高兴能帮上忙，先生！！