網頁特效代碼模板無憂>網頁特效>日期時間特效代碼>

JavaScript跳動的時間電子鐘_日期時間特效

查看演示效果

特效Tag：電子鐘添加

JavaScript跳動的時間電子鐘，無不刷新頁面實現的液晶電子鐘，個人感覺還行啊！

腳本說明：
第一步:如下代碼加入<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'>
<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">

所屬頻道：日期時間特效/更新時間：2013-01-15

[收藏][報錯][返回列表]

相關日期時間特效：

JavaScript跳動的時間電子鐘_日期時間特效

日期時間特效Rss訂閱特效代碼搜索

日期時間特效推薦

猜你也喜歡看這些