js实现在网页上简单显示时间的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了js实现在网页上简单显示时间的方法。分享给大家供大家参考。具体如下:

这是一款网页时钟JS代码,纯javascript实现,显示时、分、秒。网页时间显示、网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简易网页时钟</title>

<style>

body,div{margin:0;padding:0;}

body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}

#clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}

span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

</style>

<script>

window.onload = function ()

{

var oClock = document.getElementById("clock");

var aSpan = oClock.getElementsByTagName("span");

setInterval(getTimes, 1000);

getTimes();

function getTimes ()

{

var oDate = new Date();

var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];

for (var i in aDate) aSpan[i].innerHTML = format(aDate[i])

}

function format(a)

{

return a.toString().replace(/^(\d)$/, "0$1")

}

}

</script>

</head>

<body>

<div id="clock">

<span></span>点<span></span>分<span></span>秒

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery提示效果代码分享
Nov 20 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
JavaScript严格模式详解
Jan 16 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP attributes()函数讲解
2019/02/03 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
python使用rpc框架gRPC的方法
2018/08/24 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python循环输出三角形图案的例子
2019/11/22 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
sealed修饰符是干什么的
2012/10/23 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
关于打架的检讨书
2014/01/17 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
颐和园导游词400字
2015/01/30 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
农村党员干部承诺书
2015/05/04 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python