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代码
Oct 19 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
简单的渐变轮播插件
Jan 12 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 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
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Javascript中的数学函数
2007/04/04 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
JavaScript实现短暂提示框功能
2018/04/04 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
django的登录注册系统的示例代码
2018/05/14 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
心理健康心得体会
2014/01/02 职场文书
自我鉴定书面格式
2014/01/13 职场文书
科研先进个人典型材料
2014/01/31 职场文书
面试后感谢信
2014/02/01 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
争先创优活动总结
2014/08/27 职场文书
给老师的一封感谢信
2015/01/20 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers