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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 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
session在PHP大型web应用中的使用
2011/06/25 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
javascript中Object使用详解
2015/01/26 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python编码时应该注意的几个情况
2013/03/04 Python
python编写爬虫小程序
2015/05/14 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python清理子进程机制剖析
2017/11/23 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python如何实现转换URL详解
2019/07/02 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python能做什么 python的含义
2019/10/12 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python 自由定制表格的实现示例
2020/03/20 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2015双创工作总结
2015/07/24 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang