html

来源：互联网发布：2016nba总决赛数据统计编辑：程序博客网时间：2024/06/05 14:46

三句标准的Dynamic Html 创建进度条

<HTML>
<HEAD>
<TITLE>Recalc Example</TITLE>
<STYLE>
BUTTON {font-size:14;width:150}
</STYLE>
<SCRIPT>

var timerID = null;
var seconds = 0;

//
// This function is called when the page loads.
// It sets up a couple of expressions.
//

function init()
{
A.style.setExpression("width","seconds*10");
B.setExpression("innerText","seconds.toString()");
}

//
// This function gets calls once a second and updates the seconds
// variable. Notice that withoutrecalc, the expressions aren't
// updated until the mouse is moved.
//

function timer()
{
seconds++;
document.recalc();
}

//
// starts the timer
//

function starttimer()
{
if (timerID == null)
{
    timerID = setInterval("timer()", 1000);
    startButton.disabled = true;
    stopButton.disabled = false;
}
}

//
// stops the timer
//

function stoptimer()
{
if (timerID != null)
{
    clearInterval(timerID);
    timerID = null;
    startButton.disabled = false;
    stopButton.disabled = true;
}
}

//
// resets the timer
//

function resettimer()
{
seconds = 0;
}

</SCRIPT>
</HEAD>
<BODY onload="init()">

<DIV id=A style="background-color:lightblue" ></DIV>
<DIV id=B style="color:hotpink;font-weight:bold"></DIV>

<BR>
<BUTTON id="startButton" onclick="starttimer()">Start the Timer</BUTTON></BR>
<BUTTON id="stopButton" DISABLED="true" onclick="stoptimer()">Stop the Timer</BUTTON><BR>
<BUTTON id="resetButton" onclick="resettimer()">Reset the Timer</BUTTON><BR>

<P style="width:320;color:peru;background-color:wheat">
This example illustrates the use of document.recalc(). If the calls
to recalc are omitted in this example, expressions will not be updated
until the mouse is moved.
</P>

</BODY>
</HTML>