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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
js+css3实现简单时钟特效
Sep 13 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核心代码分析require和include的区别
2011/01/02 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
python私有属性和方法实例分析
2015/01/15 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
工商管理专业自荐信
2014/06/03 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js