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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
移动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 数组实例说明
2008/08/18 PHP
php强制下载类型的实现代码
2011/04/21 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
Python内置函数 next的具体使用方法
2017/11/24 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python中的unittest框架实例详解
2021/02/05 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
小学生检讨书大全
2014/02/06 职场文书
企业文化理念标语
2014/06/10 职场文书
企业精神口号
2014/06/11 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
档案工作个人总结
2015/03/03 职场文书