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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
js与applet相互调用的方法
Jun 22 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
vue如何进行动画的封装
Sep 26 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 _autoload自动加载类与机制分析
2012/02/10 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
浅谈Node.js之异步流控制
2017/10/25 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Django添加feeds功能的示例
2018/08/07 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
几个MySql的面试题
2013/04/22 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
个人简历自荐信
2013/12/05 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
爱牙日活动总结
2014/08/29 职场文书
2015年新学期寄语
2015/02/26 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL