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 24 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
JavaScript门面模式详解
Oct 19 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
JS实现简单的表格增删
Jan 16 Javascript
基于Vue的侧边目录组件的实现
Feb 05 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中常量,变量的作用域和生存周期
2013/08/10 PHP
php对称加密算法示例
2014/05/07 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
javascript实现留言板功能
2020/02/08 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Django中几种重定向方法
2015/04/28 Python
python获取文件扩展名的方法
2015/07/06 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
教师自我鉴定范文
2013/11/10 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
司机检讨书
2014/02/13 职场文书
工程安全员岗位职责
2014/03/09 职场文书
关于环保的活动方案
2014/08/25 职场文书
毕业赠语大全
2015/06/23 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书