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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
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对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
jQuery 表格工具集
2010/04/25 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python中的包和模块实例
2014/11/22 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python 统计字数的思路详解
2018/05/08 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python IP地址转整数
2020/11/20 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
NET程序员上机面试题
2015/05/23 面试题
应届生自我鉴定
2013/12/11 职场文书
企业门卫岗位职责
2013/12/12 职场文书
校园十大歌手策划书
2014/02/01 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
单位委托函范文
2015/01/29 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书