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 对象的创建与使用
Mar 09 Javascript
javascript AutoScroller 函数类
May 29 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
js get和post请求实现代码解析
Feb 06 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
解析yii数据库的增删查改
2013/06/20 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
35个Python编程小技巧
2014/04/01 Python
python re模块的高级用法详解
2018/06/06 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
售后服务科岗位职责范文
2013/11/13 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Python机器学习之决策树和随机森林
2021/07/15 Javascript
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫