Hej
Jeg er ved at at lave et preloader object.
Det vil bare ikke som jeg vil håber på at en af jer kan hjælpe mig.
Jeg har to problemer.
1. Jeg kan ikke få animationen til at køre uden at definere "var progress = 0;". Hvis jeg underlader denne globale variabel så bliver this.progress opfattet som Nan. Selom jeg skulle mene at this.progress = 0; i konstruktoren ville give det samme resultatat?
2.I <div id="progress"> ville jeg gerne oprette id dynamisk så hvert nyt objekt har sit eget id jeg kan tilgå fra updatePreloader().
Jeg er lige begyndt at lave objekter så det er nyt for mig.
Kode
var progress = 0;
function preloader(showAt)
{
this.showAt = showAt
this.timer;
this.progress = 0;
this.updatePreloader = updatePreloader;
this.startPreloader = startPreloader;
this.stopPreloader = stopPreloader;
this.show = function show()
{
document.getElementById(this.showAt).innerHTML = '<div style="width:200px; height:15px; border:1px solid #000000;"><div id="progress" style="position:absolute; width:0px; height:15px; background-color:#0099FF;"></div></div>';
}
this.hide = function hide()
{
document.getElementById(this.showAt).innerHTML = "";
}
}
function updatePreloader()
{
if(this.progress >= 200)
{
this.progress = 0;
}
this.progress += 5;
temp = this.progress;
document.getElementById("progress").style.width = temp + "px";
}
function stopPreloader()
{
this.hide();
clearTimeout(this.timer);
}
function startPreloader()
{
this.show();
this.timer = setInterval("this.updatePreloader()", 100);
}
xhtml:
<script type="text/javascript" language="javascript" src="preloader.js"></script>
<script type="text/javascript">
<!--
var pre = new preloader("main");
var pre1 = new preloader("main2");
-->
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="main"></div>
<a href="#" onclick="pre.stopPreloader()">Stop</a>
<a href="#" onclick="pre.startPreloader()">Start</a>
<div id="main2"></div>
<a href="#" onclick="pre1.stopPreloader()">Stop</a>
<a href="#" onclick="pre1.startPreloader()">Start</a>
</body>
</html> |