30、时间跳动 器简单代码

30、时间跳动 器简单代码

脚本说明:

第一步:把如下代码加入<head>区域中

<script language="JavaScript">

<!-- Hide this script from old browsers --

 

function modRange (value, min, max) {

 

    if (min == max) {

 

        return (min)

 

    }

 

    var low = Math.min (min, max)

 

    var high = Math.max (min, max)

 

    var range = high - low + 1

 

    var valOff = parseInt (value) - low

 

    var mod = range * Math.floor (valOff / range)

 

    result = low + valOff - mod

 

    if (result < low) {

 

        result += high

 

    }

 

    if (result > high) {

 

        result = low

 

    }

 

    return (result)

 

}

 

function array () {

 

    this[0] = null

 

}

 

function timerAppStart () {

 

    this.stop ()

 

    this.loop ()

 

}

 

function timerAppStop () {

 

    clearTimeout (this.timeout)

 

    this.timeout = null

 

}

 

function timerAppToggle () {

 

    if (this.timeout) {

 

        this.stop ()

 

    } else {

 

        this.start ()

 

    }

 

}

 

function timerAppLoop () {

 

    this.update ()

 

    command = this.name + '.loop()'

 

    for (var i = 0; i < this.syncCount; i++) {

 

        if (this.syncName[i] != '') {

 

            if (--this.syncCountdown[i] <= 0) {

 

                this.syncCountdown[i] = this.syncInterval[i]

 

                command += ';' + this.syncName[i] + '.update()'

 

            }

 

        }

 

    }

 

    this.timeout = setTimeout (command, this.interval)

 

}

 

function timerAppSetOutput (output) {

 

    if (! this.output) {

 

        this.output = output

 

    }

 

}

 

function timerAppSetInterval (interval) {

 

    if (interval) {

 

        var newInterval = parseInt (interval)

 

        if (newInterval > 0) {

 

            this.interval = newInterval

 

        } else {

 

            alert ('Interval value must be a positive number: ' + interval)

 

        }

 

    }

 

}

 

function timerAppSync (name, interval) {

 

    if (interval == null) {

 

        interval = 1

 

    }

 

    if (interval <= 0) {

 

        eval (this.name + '.unsync("' + name + '")')

 

        return

 

    }

 

    var newIndex = this.syncCount

 

    for (var i = 0; i < this.syncCount; i++) {

 

        if (this.syncName[i] == name) {

 

            newIndex = i

 

            break

 

        }

 

    }

 

    if (newIndex == this.syncCount) {

 

        this.syncCount++

 

    }

 

    this.syncInterval[newIndex] = interval

 

    this.syncCountdown[newIndex] = interval

 

    this.syncName[newIndex] = name

 

}

 

function timerAppUnsync (name) {

 

    for (var i = 0; i < this.syncCount; i++) {

 

        if (this.syncName[i] == name) {

 

            this.syncName[i] = ''

 

            if (i == (this.syncCount - 1)) {

 

                this.syncCount--

 

            }

 

        }

 

    }

 

}

 

function timerAppSetIncrement (increment) {

 

    if (increment) {

 

        var newIncrement = parseInt (increment)

 

//*Unix only*   if (! isNan (newIncrement)) {

 

        if (newIncrement != 0) {

 

            this.increment = newIncrement

 

        } else {

 

            alert ('Increment value must be a number: ' + increment)

 

        }

 

    }

 

}

 

function timerAppSetBounce (bounce) {

 

    if (bounce) {

 

        var newBounce = parseInt (bounce)

 

//*Unix only*   if (! isNan (newBounce)) {

 

        if (newBounce != 0) {

 

            this.bounce = newBounce

 

        } else {

 

            alert ('Bounce value must be a number: ' + bounce)

 

        }

 

    }

 

}

 

function timerAppSetOffset (offset) {

 

    if (offset) {

 

        var newOffset = parseInt (offset)

 

        if ((newOffset > 0)

 

            && (newOffset <= this.output.length)) {

 

            this.offset = newOffset

 

        } else {

 

            warnMessage = 'Value of offset must be a valid index (0 - '

 

                        + this.output.length + '): ' + offset

 

            alert (warnMessage)

 

        }

 

    }

 

}

 

function clock (name, output, interval) {

 

    // Initialize with default values

 

    this.name = name            // object name, needed for setTimeout

 

    this.output = null          // output area

 

    this.interval = 1000        // milliseconds

 

    this.timeout = null

 

    this.syncCount = 0

 

    this.syncName = new array ()

 

    this.syncInterval = new array ()

 

    this.syncCountdown = new array ()

 

    // Define object methods

 

    this.update = clockUpdate

 

    this.start = timerAppStart

 

    this.stop = timerAppStop

 

    this.toggle = timerAppToggle

 

    this.loop = timerAppLoop

 

    this.setOutput = timerAppSetOutput

 

    this.setInterval = timerAppSetInterval

 

    this.sync = timerAppSync

 

    this.unsync = timerAppUnsync

 

    // Initialize with specified values

 

    this.setOutput (output)

 

    this.setInterval (interval)

 

    this.start()

 

}

 

function clockUpdate () {

 

    var now = new Date()

 

    var timeHH = now.getHours();

 

    var timeMM = now.getMinutes()

 

    var timeSS = now.getSeconds()

 

    var msec = now.getTime ()

 

    var timeSSm = msec - 1000 * Math.floor (msec / 1000)

 

    timeSSm = '00' + timeSSm

 

    timeSSm = timeSSm.substring(timeSSm.length-3, timeSSm.length)

 

    var timeString = ((timeHH < 10) ? '0' : '') + timeHH

 

                 + ':' + ((timeMM < 10) ? '0' : '') + timeMM

 

                 + ':' + ((timeSS < 10) ? '0' : '') + timeSS

 

                 + '.' + timeSSm

 

    if (this.output) {

 

        this.output.value = timeString

 

    } else {

 

        self.status = timeString

 

    }

 

}

 

function buttons (name, output, interval, increment, bounce, offset) {

 

    // Initialize with default values

 

    this.name = name            

 

    this.output = null         

 

    this.interval = 1000       

 

    this.increment = 1         

 

    this.bounce = 1            

 

    this.offset = 0

 

    this.timeout = null

 

    this.syncCount = 0

 

    this.syncName = new array ()

 

    this.syncInterval = new array ()

 

    this.syncCountdown = new array ()

 

    // Define object methods

 

    this.update = buttonsUpdate

 

    this.start = timerAppStart

 

    this.stop = timerAppStop

 

    this.toggle = timerAppToggle

 

    this.loop = timerAppLoop

 

    this.setOutput = timerAppSetOutput

 

    this.setInterval = timerAppSetInterval

 

    this.sync = timerAppSync

 

    this.unsync = timerAppUnsync

 

    this.setIncrement = timerAppSetIncrement

 

    this.setBounce = timerAppSetBounce

 

    this.setOffset = timerAppSetOffset

 

    // Initialize with specified values

 

    this.setOutput (output)

 

    this.setInterval (interval)

 

    this.setIncrement (increment)

 

    this.setBounce (bounce)

 

    this.setOffset (offset)

 

    this.start()

 

}

 

function buttonsUpdate () {

 

    if (this.output) {

 

        var newOffset = this.offset + this.increment

 

        if ((newOffset < this.output.length)

 

            && (newOffset >= 0)) {

 

            this.offset = newOffset

 

        } else {

 

            this.increment *= this.bounce

 

            if (this.increment >= 0) {

 

                this.increment = modRange (this.increment, 0, this.output.length-1)

 

            } else {

 

                this.increment = 0 - modRange (Math.abs (this.increment),

 

                                0, this.output.length-1)

 

            }

 

            this.offset += this.increment

 

            this.offset = modRange (this.offset, 0, this.output.length-1)

 

        }

 

        this.output[this.offset].checked = true

 

    }

 

}

 

// -- End Hiding Here -->

</script>

 

 

 

第二步:把如下代码加入<body>区域中

<FORM NAME='clock' ACTION=''>

 

<TABLE BORDER=2><TR><TD>

 

<FONT SIZE=-2>

 

<INPUT TYPE='text' NAME='display' SIZE=8

 

 

 

 onFocus='wClock.toggle()'

 

 

 

 onMouseOver='self.status="Click here to turn on/off clock"; return true'>

 

</FONT>

 

</TD></TR></TABLE>

 

</FORM>

 

<FORM NAME='imastudios'>

 

<P>

 

<INPUT TYPE='radio' NAME='buttons'>

 

        Tick

 

<INPUT TYPE='radio' NAME='buttons'>

 

        Tock

 

<INPUT TYPE='radio' NAME='buttons'>

 

        Tick

 

<INPUT TYPE='radio' NAME='buttons'>

 

        Tock

 

<INPUT TYPE='radio' NAME='buttons'>

 

        Tick

 

</FORM>

 

 

 

第三步:<body>区中内容改为

<body bgcolor="#fef4d9" onLoad='wClock = new clock ("wClock", document.clock.display); wButtons = new buttons ("wButtons", document.imastudios.buttons, 500, 1,-1); wButtons.stop(); wClock.sync ("wButtons", 1)'onUnload='wClock.stop(); wButtons.stop()' bgcolor="#FFFFFF">

 

Write a comment

Comments: 0