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 select标签操作代码段
May 16 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 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
PHP用户指南-cookies部分
2006/10/09 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
javascript判断office版本示例
2014/04/11 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python字典键值对的添加和遍历方法
2016/09/11 Python
Python多进程编程常用方法解析
2020/03/26 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
人力资源部门的主要职能
2014/02/22 职场文书
自荐信的格式
2014/03/10 职场文书
食品流通安全承诺书
2014/05/22 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
员工升职自荐信
2015/03/27 职场文书
2019个人工作总结
2019/06/21 职场文书