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的replace方法介绍
Oct 20 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
taro开发微信小程序的实践
May 21 Javascript
uniapp实现可滑动选项卡
Oct 21 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
php 发送带附件邮件示例
2014/01/23 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
php实现记事本案例
2020/10/20 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
详解vue-cli3多环境打包配置
2019/03/28 Javascript
javascript实现日历效果
2019/06/17 Javascript
express框架下使用session的方法
2019/07/31 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python实现批量图片格式转换
2020/06/16 Python
python梯度下降法的简单示例
2018/08/31 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python IDLE添加行号显示教程
2020/04/25 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
python使用建议与技巧分享(二)
2020/08/17 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
县政府班子个人对照检查材料
2014/10/05 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
走近毛泽东观后感
2015/06/04 职场文书
男生贾里读书笔记
2015/06/30 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python