javascript背景时钟实现方法

本文实例讲述了javascript背景时钟实现方法。分享给大家供大家参考。具体如下：

以下是这个效果的全部代码。[最好从一个空页面开始]

<html>
<head>
<TITLE>背景时钟</TITLE>
<script language=javaScript>
<!--//
function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}
if(document.layers) {
document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>')
document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>')
document.close()
}
var timer=setTimeout("clockon()",200)
}
//-->
</script>
<link rel="stylesheet" href="../style.css"></head>
<body onLoad="clockon()">
<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>
<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
</body>
</html>

说明：时钟显示的位置需要你修正TOP,LEFT参数来确定。TOP表示层距离显示器顶部的象素值，LEFT表示距离左侧的象素值。

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript实现的背景自动变色代码

    JavaScript实现的背景自动变色代码

    本文实例讲述了JavaScript实现的背景自动变色代码.分享给大家供大家参考,具体如下: 这里演示JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-bg-color-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tra

  • javascript实现网页背景烟花效果的方法

    javascript实现网页背景烟花效果的方法

    本文实例讲述了javascript实现网页背景烟花效果的方法.分享给大家供大家参考.具体如下: 这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁. 运行效果如下图所示: 具体代码如下: <html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!

  • Javascript简单改变表单元素背景的方法

    本文实例讲述了Javascript简单改变表单元素背景的方法.分享给大家供大家参考.具体如下: 这里使用Javascript改变表单元素的背景,如改变文本框的背景 function colorChange(formName,formItem){ document.forms[formName.name].elements[formItem.name].style.backgroundColor = "#FFFFFF"; } 希望本文所述对大家的javascript程序设计有所帮助.

  • javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码

    HTML部分代码: 复制代码 代码如下: <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> javascript部分代码: 当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的 复制代码 代

  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

  • JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

    复制代码 代码如下: <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>JavaScript</title> </head> <body>  <script language="javascript">   var n

  • javascript随机显示背景图片的方法

    本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

  • javascript修改表格背景色实例代码分享

    复制代码 代码如下: <html> <script> //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行      {        

  • 用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

    加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直

  • javascript背景时钟实现方法

    本文实例讲述了javascript背景时钟实现方法.分享给大家供大家参考.具体如下: 以下是这个效果的全部代码.[最好从一个空页面开始] <html> <head> <TITLE>背景时钟</TITLE> <script language=javaScript> <!--// function clockon() { thistime= new Date() var hours=thistime.getHours() var minutes

  • JavaScript动态修改背景颜色的方法

    本文实例讲述了JavaScript动态修改背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <title>Background Color Changer</title> <script language = JavaScript> <!-- function BG_yellow() { document.bgColor = 0xFFFF00 } function BG_thistle() { document.

  • javascript设置页面背景色及背景图片的方法

    本文实例讲述了javascript设置页面背景色及背景图片的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus

  • javascript实现模拟时钟的方法

    本文实例讲述了javascript实现模拟时钟的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript模拟时钟</title&

  • JavaScript让网页出现渐隐渐显背景颜色的方法

    本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript渐隐渐显的背景颜色</title> <style fprolloverstyle>A:hover

  • JS实现在页面随时自定义背景颜色的方法

    本文实例讲述了JS实现在页面随时自定义背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JS实现在页面随时自定义背景颜色</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin //以下代码将输入框及其所在的层写进窗口. document.writeln('<div align="cente

  • js+html5实现canvas绘制网页时钟的方法

    js+html5实现canvas绘制网页时钟的方法

    本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex

  • JS实现点击颜色块切换指定区域背景颜色的方法

    本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width=&q

  • JS修改iframe页面背景颜色的方法

    本文实例讲述了JS修改iframe页面背景颜色的方法.分享给大家供大家参考.具体如下: 下面的代码演示了如何在网页里通过JS代码修改嵌入的iframe的网页背景颜色 <!DOCTYPE html> <html> <head> <script> function changeStyle() { var x=document.getElementById("myframe"); var y=(x.contentWindow || x.cont

随机推荐