gpt4 book ai didi

javascript - jsfiddle相同的代码在html上显示不同的结果

转载 作者:太空宇宙 更新时间:2023-11-04 14:34:55 25 4
gpt4 key购买 nike

我把 http://jsfiddle.net/48Hpa/19/ 与 HTML 相同的代码,但我得到不同的结果 ............................................... ..................................................... ..................................................... ........................这是为什么?

enter image description here

<!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>

最佳答案

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.css 切换它们并放置 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" />

关于javascript - jsfiddle相同的代码在html上显示不同的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18818639/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com