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 相关文章推荐
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
JS实现点击掉落特效
Jan 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防止恶意刷新与刷票的方法
2014/11/21 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
使用python3构建文件传输的方法
2019/02/13 Python
python binascii 进制转换实例
2019/06/12 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
python设置中文界面实例方法
2020/10/27 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
师范应届生求职信
2013/11/15 职场文书
升职自荐信
2013/11/28 职场文书
初一地理教学反思
2014/01/16 职场文书
房地产财务管理制度
2014/02/02 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
护理学专业求职信
2014/06/29 职场文书
爱牙日活动总结
2014/08/29 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
大学迎新生标语
2014/10/06 职场文书
批评与自我批评总结
2014/10/17 职场文书
投资入股合作协议书
2014/10/28 职场文书
优秀英文求职信范文
2015/03/19 职场文书
统招统分证明
2015/06/23 职场文书
计算机实训心得体会
2016/01/14 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
详解Vue router路由
2021/11/20 Vue.js