JavaScript跳动的时间电子钟_日期时间特效

模板酷站
  •       4/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      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">