1
아래 코드 으로 게이지 컨트롤을 구현하려고하지만 어떤 출력도 얻지 못한다면 html 파일에서 동일하게 시도하면 3 게이지로 출력됩니다.ASP.NET에서 자바 스크립트 게이지 컨트롤
링크 window.onload Not Working correclty에서 설명한대로 window.onload 대신 $(document).ready()으로 변경되었습니다. 그러나 도움이되지 않았습니다.
저는 Javascript 또는 JQuery에서 초보자입니다. 이를 달성하는 방법을 알려주십시오.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
text-align: center;
}
#g1, #g2, #g3 {
width:200px; height:160px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="raphael.2.1.0.min.js" type="text/javascript"></script>
<script src="justgage.1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var g1, g2, g3;
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(350, 980),
min: 350,
max: 980,
title: "Lone Ranger",
label: "miles traveled"
});
var g2 = new JustGage({
id: "g2",
value: 32,
min: 50,
max: 100,
title: "Empty Tank",
label: ""
});
var g3 = new JustGage({
id: "g3",
value: 120,
min: 50,
max: 100,
title: "Meltdown",
label: ""
});
setInterval(function() {
g1.refresh(getRandomInt(350, 980));
g2.refresh(getRandomInt(0, 49));
g3.refresh(getRandomInt(101, 200));
}, 2500);
};
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
</div>
</form>
</body>
</html>