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 相关文章推荐
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
详解vue表单——小白速看
Apr 08 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
学习python 之编写简单乘法运算题
2016/02/27 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
企业趣味活动方案
2014/08/21 职场文书
2015年入党决心书
2015/02/05 职场文书