javascript背景时钟实现方法


Posted in Javascript onJune 18, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 #Javascript
javascript随机显示背景图片的方法
Jun 18 #Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 #Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 #Javascript
javascript显示中文日期的方法
Jun 18 #Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 #Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 #Javascript
You might like
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
angular动态表单制作
2018/02/23 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
pycharm新建一个python工程步骤
2019/07/16 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
中考学习决心书
2015/02/04 职场文书
建国大业电影观后感
2015/06/01 职场文书