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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
移动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
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python 变量类型详解
2018/10/10 Python
Python Pandas 箱线图的实现
2019/07/23 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python SocketServer源码深入解读
2019/09/17 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python函数定义和调用过程详解
2020/02/09 Python
Python函数参数分类原理详解
2020/05/28 Python
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
英语简历自我评价
2014/01/26 职场文书
房地产项目策划书
2014/02/05 职场文书
捐书活动总结
2014/05/04 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python