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 学习技巧总结
May 21 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
js控制div弹出层实现方法
May 11 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
基于vue-cli3和element实现登陆页面
Nov 13 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+oracle 分页类
2006/10/09 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python PIL库图片灰化处理
2020/04/07 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Servlet的生命周期
2013/08/25 面试题
乔布斯辞职信(中英文对照)
2015/05/12 职场文书