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代码
Apr 24 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
一道JS算法面试题——冒泡、选择排序
Apr 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 登录记住密码实现思路
2013/05/07 PHP
php对称加密算法示例
2014/05/07 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
PHP PDO操作总结
2014/11/17 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
讲解Python中的标识运算符
2015/05/14 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
Python面试题集
2012/03/08 面试题
客房主管岗位职责
2013/12/09 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
总经理助理工作职责
2014/02/06 职场文书
课外活动实习计划
2015/01/19 职场文书
投诉信格式范文
2015/07/02 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python