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函数
Aug 19 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python实现程序的单一实例用法分析
2015/06/03 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
物理力学求职信
2014/02/18 职场文书
中学校庆方案
2014/03/17 职场文书
财务整改报告范文
2014/11/05 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年采购员工作总结
2015/04/27 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers